[Graph] Restructure folders and add readme (#45782)

x-pack/legacy/plugins/graph/README.md

@@ -0,0 +1,34 @@
+# Graph app
+
+This is the main source folder of the Graph plugin. It contains all of the Kibana server and client source code. `x-pack/test/functional/apps/graph` contains additional functional tests.
+
+Graph shows only up in the side bar if your server is running on a platinum or trial license. You can activate a trial license in `Management > License Management`.
+
+## Common commands
+
+* Run tests `node x-pack/scripts/jest.js --watch plugins/graph`
+* Run type check `node scripts/type_check.js --project=x-pack/tsconfig.json`
+* Run linter `node scripts/eslint.js x-pack/legacy/plugins/graph`
+* Run functional tests (make sure to stop dev server)
+  * Server `cd x-pack && node ./scripts/functional_tests_server.js`
+  * Tests `cd x-pack && node ../scripts/functional_test_runner.js --config ./test/functional/config.js --grep=graph`
+
+## Folder structure
+
+### Client `public/`
+
+Currently most of the state handling is done by a central angular controller. This controller will be broken up into a redux/saga setup step by step.
+
+* `angular/` contains all code using javascript and angular. Rewriting this code in typescript and react is currently ongoing. When the migration is finished, this folder will go away
+* `components/` contains react components for various parts of the interface. Components can hold local UI state (e.g. current form data), everything else should be passed in from the caller. Styles should reside in a component-specific stylesheet
+* `hacks/` contains files that need to run before the actual app is started. When moving to the new platform, this folder will go away.
+* `services/` contains functions that encapsule other parts of Kibana. Stateful dependencies are passed in from the outside. Components should not rely on services directly but have callbacks passed in. Once the migration to redux/saga is complete, only sagas will use services.
+* `helpers/` contains side effect free helper functions that can be imported and used from components and services
+* `state_management/` contains reducers, action creators, selectors and sagas. It also exports the central store
+* `types/` contains type definitions for unmigrated functions in `angular/` and business objects
+* `app.js` is the central entrypoint of the app. It initializes router, state management and root components. This will become `app.tsx` when the migration is complete
+
+
+### Server `server/`
+
+The Graph server is only forwarding requests to Elasticsearch API and contains very little logic. It will be rewritten soon.

x-pack/legacy/plugins/graph/public/app.js

@@ -32,6 +32,7 @@ import { KibanaParsedUrl } from 'ui/url/kibana_parsed_url';
 import { npStart } from 'ui/new_platform';
 import { SavedObjectRegistryProvider } from 'ui/saved_objects/saved_object_registry';
 import { capabilities } from 'ui/capabilities';
+import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal';
 
 import { xpackInfo } from 'plugins/xpack_main/services/xpack_info';
 
@@ -40,8 +41,8 @@ import listingTemplate from './angular/templates/listing_ng_wrapper.html';
 import { getReadonlyBadge } from './badge';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { GraphListing } from './components/graph_listing';
-import { GraphSettings } from './components/graph_settings/graph_settings';
+import { Listing } from './components/listing';
+import { Settings } from './components/settings';
 
 import './angular/angular_venn_simple.js';
 import gws from './angular/graph_client_workspace.js';
@@ -51,17 +52,17 @@ import {
   colorChoices,
   iconChoicesByClass,
   urlTemplateIconChoices,
-} from './services/style_choices';
+} from './helpers/style_choices';
 import {
   outlinkEncoders,
-} from './services/outlink_encoders';
+} from './helpers/outlink_encoders';
 import { getEditUrl, getNewPath, getEditPath, setBreadcrumbs, getHomePath } from './services/url';
 import { appStateToSavedWorkspace, savedWorkspaceToAppState, lookupIndexPattern, mapFields } from './services/persistence';
-import { save } from  './services/save_modal';
-import { urlTemplateRegex } from  './services/url_template';
+import { openSaveModal } from  './services/save_modal';
+import { urlTemplateRegex } from  './helpers/url_template';
 import {
   asAngularSyncedObservable,
-} from './services/as_observable';
+} from './helpers/as_observable';
 
 import './angular/directives/graph_inspect';
 
@@ -89,7 +90,7 @@ app.directive('focusOn', function () {
 });
 
 app.directive('graphListing', function (reactDirective) {
-  return reactDirective(GraphListing);
+  return reactDirective(Listing);
 });
 
 if (uiRoutes.enable) {
@@ -310,17 +311,6 @@ app.controller('graphuiPlugin', function (
     $scope.closeMenus();
   };
 
-  $scope.setAllFieldStatesToDefault = function () {
-    $scope.selectedFields = [];
-    $scope.basicModeSelectedSingleField = null;
-    $scope.liveResponseFields = [];
-
-    // Default field state is not selected
-    $scope.allFields.forEach(function (fieldDef) {
-      fieldDef.selected = false;
-    });
-  };
-
   $scope.addFieldToSelection =  function () {
     $scope.selectedField.selected = true;
     if ($scope.selectedFields.indexOf($scope.selectedField) < 0) {
@@ -788,11 +778,12 @@ app.controller('graphuiPlugin', function (
         return $scope.allSavingDisabled || $scope.selectedFields.length === 0;
       },
       run: () => {
-        save({
+        openSaveModal({
           savePolicy: $scope.graphSavePolicy,
           hasData: $scope.workspace && ($scope.workspace.nodes.length > 0 || $scope.workspace.blacklistedNodes.length > 0),
           workspace: $scope.savedWorkspace,
-          saveWorkspace: $scope.saveWorkspace
+          saveWorkspace: $scope.saveWorkspace,
+          showSaveModal
         });
       },
       testId: 'graphSaveButton',
@@ -847,9 +838,7 @@ app.controller('graphuiPlugin', function (
         allFields: [...$scope.allFields],
         canEditDrillDownUrls: $scope.canEditDrillDownUrls
       }), $scope.$digest.bind($scope));
-      currentSettingsFlyout = npStart.core.overlays.openFlyout(<GraphSettings
-        observable={settingsObservable}
-      />, {
+      currentSettingsFlyout = npStart.core.overlays.openFlyout(<Settings observable={settingsObservable} />, {
         size: 'm',
         closeButtonAriaLabel: i18n.translate('xpack.graph.settings.closeLabel', { defaultMessage: 'Close' }),
         'data-test-subj': 'graphSettingsFlyout',
@@ -892,16 +881,15 @@ app.controller('graphuiPlugin', function (
       const {
         urlTemplates,
         advancedSettings,
-        workspace,
         allFields,
         selectedFields,
       } = savedWorkspaceToAppState($scope.savedWorkspace, indexPattern, $scope.workspace);
 
       // wire up stuff to angular
       $scope.allFields = allFields;
-      $scope.selectedFields = selectedFields;
-      $scope.workspace = workspace;
+      $scope.selectedFields.push(...selectedFields);
       $scope.exploreControls = advancedSettings;
+      $scope.workspace.options.exploreControls = advancedSettings;
       $scope.urlTemplates = urlTemplates;
       $scope.updateLiveResponseFields();
       $scope.workspace.runLayout();

x-pack/legacy/plugins/graph/public/components/_index.scss

@@ -1 +1 @@
-@import './graph_settings/index';
+@import './settings/index';

x-pack/legacy/plugins/graph/public/components/graph_listing.tsx → x-pack/legacy/plugins/graph/public/components/listing.tsx

@@ -13,7 +13,7 @@ import { EuiEmptyPrompt, EuiLink, EuiButton } from '@elastic/eui';
 import { TableListView } from '../../../../../../src/legacy/core_plugins/kibana/public/table_list_view/table_list_view';
 import { GraphWorkspaceSavedObject } from '../types';
 
-export interface GraphListingProps {
+export interface ListingProps {
   createItem: () => void;
   findItems: (query: string, limit: number) => Promise<GraphWorkspaceSavedObject[]>;
   deleteItems: (ids: string[]) => Promise<void>;
@@ -25,7 +25,7 @@ export interface GraphListingProps {
   initialFilter: string;
 }
 
-export function GraphListing(props: GraphListingProps) {
+export function Listing(props: ListingProps) {
   return (
     <I18nProvider>
       <TableListView

x-pack/legacy/plugins/graph/public/components/graph_save_modal.tsx → x-pack/legacy/plugins/graph/public/components/save_modal.tsx

@@ -19,7 +19,7 @@ export interface OnSaveGraphProps extends OnSaveProps {
   dataConsent: boolean;
 }
 
-export function GraphSaveModal({
+export function SaveModal({
   onSave,
   onClose,
   title,

x-pack/legacy/plugins/graph/public/components/graph_settings/advanced_settings_form.tsx → x-pack/legacy/plugins/graph/public/components/settings/advanced_settings_form.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import { EuiFormRow, EuiFieldNumber, EuiComboBox, EuiSwitch, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { GraphSettingsProps } from './graph_settings';
+import { SettingsProps } from './settings';
 import { AdvancedSettings } from '../../types';
 
 // Helper type to get all keys of an interface
@@ -25,7 +25,7 @@ export function AdvancedSettingsForm({
   advancedSettings,
   updateAdvancedSettings,
   allFields,
-}: Pick<GraphSettingsProps, 'advancedSettings' | 'updateAdvancedSettings' | 'allFields'>) {
+}: Pick<SettingsProps, 'advancedSettings' | 'updateAdvancedSettings' | 'allFields'>) {
   function updateSetting<K extends keyof AdvancedSettings>(key: K, value: AdvancedSettings[K]) {
     updateAdvancedSettings({ ...advancedSettings, [key]: value });
   }

x-pack/legacy/plugins/graph/public/components/graph_settings/blacklist_form.tsx → x-pack/legacy/plugins/graph/public/components/settings/blacklist_form.tsx

@@ -16,14 +16,14 @@ import {
   EuiCallOut,
 } from '@elastic/eui';
 
-import { GraphSettingsProps } from './graph_settings';
+import { SettingsProps } from './settings';
 import { LegacyIcon } from './legacy_icon';
 import { useListKeys } from './use_list_keys';
 
 export function BlacklistForm({
   blacklistedNodes,
   unblacklistNode,
-}: Pick<GraphSettingsProps, 'blacklistedNodes' | 'unblacklistNode'>) {
+}: Pick<SettingsProps, 'blacklistedNodes' | 'unblacklistNode'>) {
   const getListKey = useListKeys(blacklistedNodes || []);
   return (
     <>

x-pack/legacy/plugins/graph/public/components/settings/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './settings';

x-pack/legacy/plugins/graph/public/components/graph_settings/legacy_icon.tsx → x-pack/legacy/plugins/graph/public/components/settings/legacy_icon.tsx

@@ -7,7 +7,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { EuiButtonEmpty } from '@elastic/eui';
-import { FontawesomeIcon } from '../../services/style_choices';
+import { FontawesomeIcon } from '../../helpers/style_choices';
 
 export interface LegacyIconProps {
   icon: FontawesomeIcon;

x-pack/legacy/plugins/graph/public/components/graph_settings/graph_settings.test.tsx → x-pack/legacy/plugins/graph/public/components/settings/settings.test.tsx

@@ -8,13 +8,13 @@ import React from 'react';
 import { EuiTab, EuiListGroupItem, EuiButton, EuiAccordion, EuiFieldText } from '@elastic/eui';
 import * as Rx from 'rxjs';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import { GraphSettings, GraphSettingsProps } from './graph_settings';
+import { Settings, SettingsProps } from './settings';
 import { act } from 'react-testing-library';
 import { ReactWrapper } from 'enzyme';
 import { UrlTemplateForm } from './url_template_form';
 
-describe('graph_settings', () => {
-  const props: jest.Mocked<GraphSettingsProps> = {
+describe('settings', () => {
+  const props: jest.Mocked<SettingsProps> = {
     advancedSettings: {
       maxValuesPerDoc: 5,
       minDocCount: 10,
@@ -105,12 +105,12 @@ describe('graph_settings', () => {
     canEditDrillDownUrls: true,
   };
 
-  let subject: Rx.BehaviorSubject<jest.Mocked<GraphSettingsProps>>;
+  let subject: Rx.BehaviorSubject<jest.Mocked<SettingsProps>>;
   let instance: ReactWrapper;
 
   beforeEach(() => {
     subject = new Rx.BehaviorSubject(props);
-    instance = mountWithIntl(<GraphSettings observable={subject.asObservable()} />);
+    instance = mountWithIntl(<Settings observable={subject.asObservable()} />);
   });
 
   function toTab(tab: string) {

x-pack/legacy/plugins/graph/public/components/graph_settings/graph_settings.tsx → x-pack/legacy/plugins/graph/public/components/settings/settings.tsx

@@ -35,7 +35,7 @@ const tabs = [
   },
 ];
 
-export interface GraphSettingsProps {
+export interface SettingsProps {
   advancedSettings: AdvancedSettings;
   updateAdvancedSettings: (advancedSettings: AdvancedSettings) => void;
   blacklistedNodes?: WorkspaceNode[];
@@ -51,8 +51,8 @@ interface AsObservable<P> {
   observable: Readonly<Rx.Observable<P>>;
 }
 
-export function GraphSettings({ observable }: AsObservable<GraphSettingsProps>) {
-  const [currentProps, setCurrentProps] = useState<GraphSettingsProps | undefined>(undefined);
+export function Settings({ observable }: AsObservable<SettingsProps>) {
+  const [currentProps, setCurrentProps] = useState<SettingsProps | undefined>(undefined);
   const [activeTab, setActiveTab] = useState(0);
 
   useEffect(() => {

x-pack/legacy/plugins/graph/public/components/graph_settings/url_template_form.tsx → x-pack/legacy/plugins/graph/public/components/settings/url_template_form.tsx

@@ -20,13 +20,9 @@ import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
 import { UrlTemplate } from '../../types';
 import { LegacyIcon } from './legacy_icon';
-import { outlinkEncoders } from '../../services/outlink_encoders';
-import { urlTemplateIconChoices } from '../../services/style_choices';
-import {
-  isUrlTemplateValid,
-  isKibanaUrl,
-  replaceKibanaUrlParam,
-} from '../../services/url_template';
+import { outlinkEncoders } from '../../helpers/outlink_encoders';
+import { urlTemplateIconChoices } from '../../helpers/style_choices';
+import { isUrlTemplateValid, isKibanaUrl, replaceKibanaUrlParam } from '../../helpers/url_template';
 
 export interface NewFormProps {
   onSubmit: (template: UrlTemplate) => void;

x-pack/legacy/plugins/graph/public/components/graph_settings/url_template_list.tsx → x-pack/legacy/plugins/graph/public/components/settings/url_template_list.tsx

@@ -7,7 +7,7 @@
 import React, { useState } from 'react';
 import { EuiText, EuiSpacer, EuiTextAlign, EuiButton, htmlIdGenerator } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { GraphSettingsProps } from './graph_settings';
+import { SettingsProps } from './settings';
 import { UrlTemplateForm } from './url_template_form';
 import { useListKeys } from './use_list_keys';
 
@@ -17,7 +17,7 @@ export function UrlTemplateList({
   removeUrlTemplate,
   saveUrlTemplate,
   urlTemplates,
-}: Pick<GraphSettingsProps, 'removeUrlTemplate' | 'saveUrlTemplate' | 'urlTemplates'>) {
+}: Pick<SettingsProps, 'removeUrlTemplate' | 'saveUrlTemplate' | 'urlTemplates'>) {
   const [uncommittedForms, setUncommittedForms] = useState<string[]>([]);
   const getListKey = useListKeys(urlTemplates);
 

x-pack/legacy/plugins/graph/public/services/persistence/deserialize.test.ts

@@ -8,7 +8,7 @@ import { GraphWorkspaceSavedObject } from '../../types';
 import { savedWorkspaceToAppState } from './deserialize';
 import { IndexPattern } from 'src/legacy/core_plugins/data/public';
 import { createWorkspace } from '../../angular/graph_client_workspace';
-import { outlinkEncoders } from '../outlink_encoders';
+import { outlinkEncoders } from '../../helpers/outlink_encoders';
 
 describe('deserialize', () => {
   let savedWorkspace: GraphWorkspaceSavedObject;

x-pack/legacy/plugins/graph/public/services/persistence/deserialize.ts

@@ -19,13 +19,13 @@ import {
   Workspace,
   SerializedField,
 } from '../../types';
-import { outlinkEncoders } from '../outlink_encoders';
+import { outlinkEncoders } from '../../helpers/outlink_encoders';
 import {
   urlTemplateIconChoicesByClass,
   getSuitableIcon,
   colorChoices,
   iconChoicesByClass,
-} from '../style_choices';
+} from '../../helpers/style_choices';
 
 const defaultAdvancedSettings: AdvancedSettings = {
   useSignificance: true,

x-pack/legacy/plugins/graph/public/services/persistence/serialize.test.ts

@@ -12,7 +12,7 @@ import {
   WorkspaceEdge,
   AppState,
 } from '../../types';
-import { outlinkEncoders } from '../outlink_encoders';
+import { outlinkEncoders } from '../../helpers/outlink_encoders';
 
 describe('serialize', () => {
   let appState: AppState;

x-pack/legacy/plugins/graph/public/services/save_modal.tsx

@@ -5,15 +5,16 @@
  */
 
 import React from 'react';
-import { showSaveModal, SaveResult } from 'ui/saved_objects/show_saved_object_save_modal';
+import { SaveResult } from 'ui/saved_objects/show_saved_object_save_modal';
 import { GraphWorkspaceSavedObject, GraphSavePolicy } from '../types';
-import { GraphSaveModal, OnSaveGraphProps } from '../components/graph_save_modal';
+import { SaveModal, OnSaveGraphProps } from '../components/save_modal';
 
-export function save({
+export function openSaveModal({
   savePolicy,
   hasData,
   workspace,
   saveWorkspace,
+  showSaveModal,
 }: {
   savePolicy: GraphSavePolicy;
   hasData: boolean;
@@ -26,6 +27,7 @@ export function save({
     },
     dataConsent: boolean
   ) => Promise<SaveResult>;
+  showSaveModal: (el: React.ReactNode) => void;
 }) {
   const currentTitle = workspace.title;
   const currentDescription = workspace.description;
@@ -55,7 +57,7 @@ export function save({
     });
   };
   showSaveModal(
-    <GraphSaveModal
+    <SaveModal
       savePolicy={savePolicy}
       hasData={hasData}
       onSave={onSave}