[Graph] Empty workspace overlay (#45547) (#47198)

elastic · Oct 4, 2019 · 7fe079d · 7fe079d
1 parent 323165b
commit 7fe079d
Show file tree

Hide file tree

Showing 20 changed files with 622 additions and 134 deletions.
diff --git a/x-pack/legacy/plugins/graph/public/angular/graph_client_workspace.js b/x-pack/legacy/plugins/graph/public/angular/graph_client_workspace.js
@@ -1200,11 +1200,14 @@ module.exports = (function () {
     }
 
 
-    //Add missing links between existing nodes
-    this.fillInGraph = function () {
+    /**
+     * Add missing links between existing nodes
+     * @param maxNewEdges Max number of new edges added. Avoid adding too many new edges
+     * at once into the graph otherwise disorientating
+     */
+    this.fillInGraph = function (maxNewEdges = 10) {
       let nodesForLinking = self.getSelectedOrAllTopNodes();
 
-      const maxNewEdges = 10; // Avoid adding too many new edges at once into the graph otherwise disorientating
       const maxNumVerticesSearchable = 100;
 
 

diff --git a/x-pack/legacy/plugins/graph/public/angular/templates/index.html b/x-pack/legacy/plugins/graph/public/angular/templates/index.html
@@ -12,15 +12,17 @@
     on-index-pattern-selected="uiSelectIndex"
     on-query-submit="submit"
     is-loading="loading"
+    is-initialized="!!workspace || savedWorkspace.id"
     initial-query="initialQuery"
     state="reduxState"
     dispatch="reduxDispatch"
+    on-fill-workspace="fillWorkspace"
     autocomplete-start="autocompleteStart"
     core-start="coreStart"
     store="store"
   ></graph-app>
 
-  <div class="gphGraph__container" id="GraphSvgContainer" ng-click="hideAllConfigPanels()">
+  <div class="gphGraph__container" id="GraphSvgContainer" ng-if="workspace">
     <graph-visualization
       nodes="workspace.nodes"
       edges="workspace.edges"

diff --git a/x-pack/legacy/plugins/graph/public/app.js b/x-pack/legacy/plugins/graph/public/app.js
@@ -66,6 +66,7 @@ import { urlTemplateRegex } from  './helpers/url_template';
 import {
   asAngularSyncedObservable,
 } from './helpers/as_observable';
+import { fetchTopNodes } from './services/fetch_top_nodes';
 import {
   createGraphStore,
   loadFields,
@@ -111,6 +112,8 @@ app.directive('graphApp', function (reactDirective) {
   return reactDirective(GraphApp, [
     ['state', { watchDepth: 'reference' }],
     ['dispatch', { watchDepth: 'reference' }],
+    ['onFillWorkspace', { watchDepth: 'reference' }],
+    ['isInitialized', { watchDepth: 'reference' }],
     ['currentIndexPattern', { watchDepth: 'reference' }],
     ['isLoading', { watchDepth: 'reference' }],
     ['onIndexPatternSelected', { watchDepth: 'reference' }],
@@ -442,6 +445,30 @@ app.controller('graphuiPlugin', function (
       });
   };
 
+  $scope.fillWorkspace = async () => {
+    try {
+      const fields = selectedFieldsSelector(store.getState());
+      const topTermNodes = await fetchTopNodes(
+        npStart.core.http.post,
+        $scope.selectedIndex.title,
+        fields
+      );
+      initWorkspaceIfRequired();
+      $scope.workspace.mergeGraph({
+        nodes: topTermNodes,
+        edges: []
+      });
+      $scope.workspace.fillInGraph(fields.length * 10);
+    } catch (e) {
+      toastNotifications.addDanger({
+        title: i18n.translate(
+          'xpack.graph.fillWorkspaceError',
+          { defaultMessage: 'Fetching top terms failed: {message}', values: { message: e.message } }
+        ),
+      });
+    }
+  };
+
   $scope.submit = function (searchTerm) {
     initWorkspaceIfRequired();
     const numHops = 2;
@@ -846,9 +873,6 @@ app.controller('graphuiPlugin', function (
   } else {
     $route.current.locals.SavedWorkspacesProvider.get().then(function (newWorkspace) {
       $scope.savedWorkspace = newWorkspace;
-      openSourceModal(npStart.core, indexPattern => {
-        $scope.indexSelected(indexPattern);
-      });
     });
   }
 

diff --git a/x-pack/legacy/plugins/graph/public/components/_index.scss b/x-pack/legacy/plugins/graph/public/components/_index.scss
@@ -1,5 +1,7 @@
 @import './app';
 @import './search_bar';
+@import './source_modal';
+@import './guidance_panel/index';
 @import './graph_visualization/index';
 @import './venn_diagram/index';
 @import './settings/index';

diff --git a/x-pack/legacy/plugins/graph/public/components/_source_modal.scss b/x-pack/legacy/plugins/graph/public/components/_source_modal.scss
@@ -0,0 +1,4 @@
+.gphSourceModal {
+  width: 720px;
+  min-height: 530px;
+}
diff --git a/x-pack/legacy/plugins/graph/public/components/app.tsx b/x-pack/legacy/plugins/graph/public/components/app.tsx
@@ -5,41 +5,64 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
+import React, { useState } from 'react';
+import { I18nProvider } from '@kbn/i18n/react';
 import { Storage } from 'ui/storage';
 import { CoreStart } from 'kibana/public';
 import { AutocompletePublicPluginStart } from 'src/plugins/data/public';
 import { FieldManagerProps, FieldManager } from './field_manager';
 import { SearchBarProps, SearchBar } from './search_bar';
+import { GuidancePanel } from './guidance_panel';
+import { selectedFieldsSelector } from '../state_management';
+import { openSourceModal } from '../services/source_modal';
 
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 
 export interface GraphAppProps extends FieldManagerProps, SearchBarProps {
   coreStart: CoreStart;
   autocompleteStart: AutocompletePublicPluginStart;
   store: Storage;
+  onFillWorkspace: () => void;
+  isInitialized: boolean;
 }
 
 export function GraphApp(props: GraphAppProps) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+
   return (
-    <KibanaContextProvider
-      services={{
-        appName: 'graph',
-        store: props.store,
-        autocomplete: props.autocompleteStart,
-        ...props.coreStart,
-      }}
-    >
-      <div className="gphGraph__bar">
-        <EuiFlexGroup direction="column" gutterSize="s">
-          <EuiFlexItem>
-            <SearchBar {...props} />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <FieldManager {...props} />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </div>
-    </KibanaContextProvider>
+    <I18nProvider>
+      <KibanaContextProvider
+        services={{
+          appName: 'graph',
+          store: props.store,
+          autocomplete: props.autocompleteStart,
+          ...props.coreStart,
+        }}
+      >
+        <div className="gphGraph__bar">
+          <EuiFlexGroup direction="column" gutterSize="s">
+            <EuiFlexItem>
+              <SearchBar {...props} />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <FieldManager {...props} pickerOpen={pickerOpen} setPickerOpen={setPickerOpen} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </div>
+        {!props.isInitialized && (
+          <GuidancePanel
+            hasDatasource={Boolean(props.currentIndexPattern)}
+            hasFields={selectedFieldsSelector(props.state).length > 0}
+            onFillWorkspace={props.onFillWorkspace}
+            onOpenFieldPicker={() => {
+              setPickerOpen(true);
+            }}
+            onOpenDatasourcePicker={() => {
+              openSourceModal(props.coreStart, props.onIndexPatternSelected);
+            }}
+          />
+        )}
+      </KibanaContextProvider>
+    </I18nProvider>
   );
 }
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_icon.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_icon.tsx
@@ -16,7 +16,7 @@ function getIconForDataType(dataType: string) {
     boolean: 'invert',
     date: 'calendar',
     geo_point: 'globe',
-    ip: 'link',
+    ip: 'storage',
   };
   return icons[dataType] || ICON_TYPES.find(t => t === dataType) || 'document';
 }

diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.test.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.test.tsx
@@ -18,6 +18,7 @@ describe('field_manager', () => {
   let store: GraphStore;
   let instance: ShallowWrapper;
   let dispatchSpy: jest.Mock;
+  let openSpy: jest.Mock;
 
   beforeEach(() => {
     store = createGraphStore();
@@ -52,8 +53,16 @@ describe('field_manager', () => {
     );
 
     dispatchSpy = jest.fn(store.dispatch);
-
-    instance = shallow(<FieldManager state={store.getState()} dispatch={dispatchSpy} />);
+    openSpy = jest.fn();
+
+    instance = shallow(
+      <FieldManager
+        state={store.getState()}
+        dispatch={dispatchSpy}
+        pickerOpen={false}
+        setPickerOpen={openSpy}
+      />
+    );
   });
 
   function update() {
@@ -80,13 +89,19 @@ describe('field_manager', () => {
   });
 
   it('should select fields from picker', () => {
-    const fieldPicker = instance.find(FieldPicker).dive();
-
     act(() => {
-      (fieldPicker.find(EuiPopover).prop('button')! as ReactElement).props.onClick();
+      (instance
+        .find(FieldPicker)
+        .dive()
+        .find(EuiPopover)
+        .prop('button')! as ReactElement).props.onClick();
     });
 
-    fieldPicker.update();
+    expect(openSpy).toHaveBeenCalled();
+
+    instance.setProps({ pickerOpen: true });
+
+    const fieldPicker = instance.find(FieldPicker).dive();
 
     expect(
       fieldPicker

diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { I18nProvider } from '@kbn/i18n/react';
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { bindActionCreators } from 'redux';
@@ -24,9 +23,11 @@ import {
 export interface FieldManagerProps {
   state: GraphState;
   dispatch: GraphDispatch;
+  pickerOpen: boolean;
+  setPickerOpen: (open: boolean) => void;
 }
 
-export function FieldManager({ state, dispatch }: FieldManagerProps) {
+export function FieldManager({ state, dispatch, pickerOpen, setPickerOpen }: FieldManagerProps) {
   const fieldMap = fieldMapSelector(state);
   const allFields = fieldsSelector(state);
   const selectedFields = selectedFieldsSelector(state);
@@ -41,17 +42,20 @@ export function FieldManager({ state, dispatch }: FieldManagerProps) {
   );
 
   return (
-    <I18nProvider>
-      <EuiFlexGroup gutterSize="s" className="gphFieldManager" alignItems="center" wrap>
-        {selectedFields.map(field => (
-          <EuiFlexItem key={field.name} grow={false}>
-            <FieldEditor allFields={allFields} {...actionCreators} field={field} />
-          </EuiFlexItem>
-        ))}
-        <EuiFlexItem grow={false}>
-          <FieldPicker fieldMap={fieldMap} {...actionCreators} />
+    <EuiFlexGroup gutterSize="s" className="gphFieldManager" alignItems="center" wrap>
+      {selectedFields.map(field => (
+        <EuiFlexItem key={field.name} grow={false}>
+          <FieldEditor allFields={allFields} {...actionCreators} field={field} />
         </EuiFlexItem>
-      </EuiFlexGroup>
-    </I18nProvider>
+      ))}
+      <EuiFlexItem grow={false}>
+        <FieldPicker
+          open={pickerOpen}
+          setOpen={setPickerOpen}
+          fieldMap={fieldMap}
+          {...actionCreators}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx
@@ -16,11 +16,17 @@ export interface FieldPickerProps {
   fieldMap: Record<string, WorkspaceField>;
   selectField: (fieldName: string) => void;
   deselectField: (fieldName: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
 }
 
-export function FieldPicker({ fieldMap, selectField, deselectField }: FieldPickerProps) {
-  const [open, setOpen] = useState(false);
-
+export function FieldPicker({
+  fieldMap,
+  selectField,
+  deselectField,
+  open,
+  setOpen,
+}: FieldPickerProps) {
   const allFields = Object.values(fieldMap);
   const unselectedFields = allFields.filter(field => !field.selected);
   const hasSelectedFields = unselectedFields.length < allFields.length;

diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss
@@ -0,0 +1,47 @@
+.gphGuidancePanel {
+  max-width: 580px;
+  margin: $euiSizeL 0;
+}
+
+.gphGuidancePanel__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.gphGuidancePanel__item {
+  display: block;
+  max-width: 420px;
+  position: relative;
+  padding-left: $euiSizeXL;
+  margin-bottom: $euiSizeL;
+
+  button {
+    // make buttons wrap lines like regular text
+    display: contents;
+  }
+}
+
+.gphGuidancePanel__item--disabled {
+  color: $euiColorDarkShade;
+  pointer-events: none;
+
+  button {
+    color: $euiColorDarkShade !important;
+  }
+}
+
+.gphGuidancePanel__itemIcon {
+  position: absolute;
+  left: 0;
+  top: -($euiSizeXS / 2);
+  width: $euiSizeL;
+  height: $euiSizeL;
+  padding: $euiSizeXS;
+
+  &--done {
+    background-color: $euiColorSecondary;
+    color: $euiColorEmptyShade;
+    border-radius: 50%;
+  }
+}
diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/_index.scss b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_index.scss
@@ -0,0 +1 @@
+@import './_guidance_panel';