Skip to content

Commit

Permalink
NP Migration: Remove global angular references in graph (elastic#53293)
Browse files Browse the repository at this point in the history
  • Loading branch information
@flash1293
flash1293 committed Dec 20, 2019
1 parent 4e7aa55 commit e8da96e
Show file tree
Hide file tree
Showing 12 changed files with 118 additions and 169 deletions.
100 changes: 50 additions & 50 deletions ...aph/public/angular/__tests__/workspace.js → ...ic/angular/graph_client_workspace.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
* you may not use this file except in compliance with the Elastic License.
*/

const gws = require('../graph_client_workspace.js');
const expect = require('@kbn/expect');
import gws from './graph_client_workspace';

describe('graphui-workspace', function() {
describe('createWorkspace()', function() {
// var fooResource=null;
Expand Down Expand Up @@ -47,7 +47,7 @@ describe('graphui-workspace', function() {
});
it('initializeWorkspace', function() {
const { workspace } = init();
expect(workspace.nodes).to.have.length(0);
expect(workspace.nodes.length).toEqual(0);
});
it('simpleSearch', function() {
//Test that a graph is loaded from a free-text search
Expand Down Expand Up @@ -79,16 +79,16 @@ describe('graphui-workspace', function() {
};
workspace.simpleSearch('myquery', {}, 2);

expect(workspace.nodes).to.have.length(2);
expect(workspace.edges).to.have.length(1);
expect(workspace.selectedNodes).to.have.length(0);
expect(workspace.blacklistedNodes).to.have.length(0);
expect(workspace.nodes.length).toEqual(2);
expect(workspace.edges.length).toEqual(1);
expect(workspace.selectedNodes.length).toEqual(0);
expect(workspace.blacklistedNodes.length).toEqual(0);

const nodeA = workspace.getNode(workspace.makeNodeId('field1', 'a'));
expect(nodeA).to.be.an(Object);
expect(typeof nodeA).toBe('object');

const nodeD = workspace.getNode(workspace.makeNodeId('field1', 'd'));
expect(nodeD).to.be(undefined);
expect(nodeD).toBe(undefined);
});

it('expandTest', function() {
Expand Down Expand Up @@ -121,10 +121,10 @@ describe('graphui-workspace', function() {
};
workspace.simpleSearch('myquery', {}, 2);

expect(workspace.nodes).to.have.length(2);
expect(workspace.edges).to.have.length(1);
expect(workspace.selectedNodes).to.have.length(0);
expect(workspace.blacklistedNodes).to.have.length(0);
expect(workspace.nodes.length).toEqual(2);
expect(workspace.edges.length).toEqual(1);
expect(workspace.selectedNodes.length).toEqual(0);
expect(workspace.blacklistedNodes.length).toEqual(0);

mockedResult = {
vertices: [
Expand All @@ -151,8 +151,8 @@ describe('graphui-workspace', function() {
],
};
workspace.expandGraph();
expect(workspace.nodes).to.have.length(3); //we already had b from initial query
expect(workspace.edges).to.have.length(2);
expect(workspace.nodes.length).toEqual(3); //we already had b from initial query
expect(workspace.edges.length).toEqual(2);
});

it('selectionTest', function() {
Expand Down Expand Up @@ -203,38 +203,38 @@ describe('graphui-workspace', function() {
};
workspace.simpleSearch('myquery', {}, 2);

expect(workspace.selectedNodes).to.have.length(0);
expect(workspace.selectedNodes.length).toEqual(0);

const nodeA1 = workspace.getNode(workspace.makeNodeId('field1', 'a1'));
expect(nodeA1).to.be.an(Object);
expect(typeof nodeA1).toEqual('object');
const nodeA2 = workspace.getNode(workspace.makeNodeId('field1', 'a2'));
expect(nodeA2).to.be.an(Object);
expect(typeof nodeA2).toEqual('object');
const nodeB1 = workspace.getNode(workspace.makeNodeId('field1', 'b1'));
expect(nodeB1).to.be.an(Object);
expect(typeof nodeB1).toEqual('object');
const nodeB2 = workspace.getNode(workspace.makeNodeId('field1', 'b2'));
expect(nodeB2).to.be.an(Object);
expect(typeof nodeB2).toEqual('object');

expect(workspace.selectedNodes).to.have.length(0);
expect(workspace.selectedNodes.length).toEqual(0);
workspace.selectNode(nodeA1);
expect(workspace.selectedNodes).to.have.length(1);
expect(workspace.selectedNodes.length).toEqual(1);
workspace.selectInvert();
expect(workspace.selectedNodes).to.have.length(3);
expect(workspace.selectedNodes.length).toEqual(3);
workspace.selectInvert();
expect(workspace.selectedNodes).to.have.length(1);
expect(workspace.selectedNodes.length).toEqual(1);
workspace.deselectNode(nodeA1);
expect(workspace.selectedNodes).to.have.length(0);
expect(workspace.selectedNodes.length).toEqual(0);
workspace.selectAll();
expect(workspace.selectedNodes).to.have.length(4);
expect(workspace.selectedNodes.length).toEqual(4);
workspace.selectInvert();
expect(workspace.selectedNodes).to.have.length(0);
expect(workspace.selectedNodes.length).toEqual(0);

workspace.selectNode(nodeA1);
expect(workspace.selectedNodes).to.have.length(1);
expect(workspace.selectedNodes.length).toEqual(1);
workspace.selectNeighbours();
expect(workspace.selectedNodes).to.have.length(2);
expect(workspace.selectedNodes.length).toEqual(2);
workspace.selectNeighbours();
//Should have reached full extent of a1-a2 island.
expect(workspace.selectedNodes).to.have.length(2);
expect(workspace.selectedNodes.length).toEqual(2);
});

it('undoRedoDeletes', function() {
Expand Down Expand Up @@ -266,31 +266,31 @@ describe('graphui-workspace', function() {
};
workspace.simpleSearch('myquery', {}, 2);

expect(workspace.nodes).to.have.length(2);
expect(workspace.nodes.length).toEqual(2);

let nodeA1 = workspace.getNode(workspace.makeNodeId('field1', 'a1'));
expect(nodeA1).to.be.an(Object);
expect(typeof nodeA1).toEqual('object');
const nodeA2 = workspace.getNode(workspace.makeNodeId('field1', 'a2'));
expect(nodeA2).to.be.an(Object);
expect(typeof nodeA2).toEqual('object');

workspace.selectNode(nodeA1);
workspace.deleteSelection();
expect(workspace.nodes).to.have.length(1);
expect(workspace.nodes.length).toEqual(1);
nodeA1 = workspace.getNode(workspace.makeNodeId('field1', 'a1'));
expect(nodeA1).to.be(undefined);
expect(nodeA1).toBe(undefined);

workspace.undo();
expect(workspace.nodes).to.have.length(2);
expect(workspace.nodes.length).toEqual(2);
nodeA1 = workspace.getNode(workspace.makeNodeId('field1', 'a1'));
expect(nodeA1).to.be.an(Object);
expect(typeof nodeA1).toEqual('object');

workspace.redo();
expect(workspace.nodes).to.have.length(1);
expect(workspace.nodes.length).toEqual(1);
nodeA1 = workspace.getNode(workspace.makeNodeId('field1', 'a1'));
expect(nodeA1).to.be(undefined);
expect(nodeA1).toBe(undefined);

workspace.undo();
expect(workspace.nodes).to.have.length(2);
expect(workspace.nodes.length).toEqual(2);
});

it('undoRedoGroupings', function() {
Expand Down Expand Up @@ -322,36 +322,36 @@ describe('graphui-workspace', function() {
};
workspace.simpleSearch('myquery', {}, 2);

expect(workspace.nodes).to.have.length(2);
expect(workspace.nodes.length).toEqual(2);

const nodeA1 = workspace.getNode(workspace.makeNodeId('field1', 'a1'));
expect(nodeA1).to.be.an(Object);
expect(typeof nodeA1).toEqual('object');
const nodeA2 = workspace.getNode(workspace.makeNodeId('field1', 'a2'));
expect(nodeA2).to.be.an(Object);
expect(typeof nodeA2).toEqual('object');

workspace.selectNode(nodeA2);
workspace.mergeSelections(nodeA1);

let groupedItems = workspace.returnUnpackedGroupeds([nodeA1]);
expect(groupedItems).to.have.length(2);
expect(groupedItems.length).toEqual(2);
workspace.undo();
groupedItems = workspace.returnUnpackedGroupeds([nodeA1]);
expect(groupedItems).to.have.length(1);
expect(groupedItems.length).toEqual(1);
workspace.redo();
groupedItems = workspace.returnUnpackedGroupeds([nodeA1]);
expect(groupedItems).to.have.length(2);
expect(groupedItems.length).toEqual(2);

//Grouped deletes delete all grouped items
workspace.selectNone();
workspace.selectNode(nodeA1);
workspace.deleteSelection();
expect(workspace.nodes).to.have.length(0);
expect(workspace.selectedNodes).to.have.length(0);
expect(workspace.nodes.length).toEqual(0);
expect(workspace.selectedNodes.length).toEqual(0);

workspace.undo();
expect(workspace.nodes).to.have.length(2);
expect(workspace.nodes.length).toEqual(2);
groupedItems = workspace.returnUnpackedGroupeds([nodeA1]);
expect(groupedItems).to.have.length(2);
expect(groupedItems.length).toEqual(2);
});
});
});
22 changes: 8 additions & 14 deletions x-pack/legacy/plugins/graph/public/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Provider } from 'react-redux';
import { isColorDark, hexToRgb } from '@elastic/eui';

import { toMountPoint } from '../../../../../src/plugins/kibana_react/public';
import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal';
import { showSaveModal } from './legacy_imports';

import appTemplate from './angular/templates/index.html';
import listingTemplate from './angular/templates/listing_ng_wrapper.html';
Expand All @@ -32,24 +32,21 @@ import { asAngularSyncedObservable } from './helpers/as_observable';
import { colorChoices } from './helpers/style_choices';
import { createGraphStore, datasourceSelector, hasFieldsSelector } from './state_management';
import { formatHttpError } from './helpers/format_http_error';
import { checkLicense } from '../../../../plugins/graph/common/check_license';

export function initGraphApp(angularModule, deps) {
const {
chrome,
savedGraphWorkspaces,
toastNotifications,
savedObjectsClient,
indexPatterns,
kbnBaseUrl,
addBasePath,
getBasePath,
npData,
config,
savedObjectRegistry,
savedWorkspaceLoader,
capabilities,
coreStart,
Storage,
storage,
canEditDrillDownUrls,
graphSavePolicy,
} = deps;
Expand Down Expand Up @@ -110,22 +107,19 @@ export function initGraphApp(angularModule, deps) {
template: listingTemplate,
badge: getReadonlyBadge,
controller($location, $scope) {
const services = savedObjectRegistry.byLoaderPropertiesName;
const graphService = services['Graph workspace'];

$scope.listingLimit = config.get('savedObjects:listingLimit');
$scope.create = () => {
$location.url(getNewPath());
};
$scope.find = search => {
return graphService.find(search, $scope.listingLimit);
return savedWorkspaceLoader.find(search, $scope.listingLimit);
};
$scope.editItem = workspace => {
$location.url(getEditPath(workspace));
};
$scope.getViewUrl = workspace => getEditUrl(addBasePath, workspace);
$scope.delete = workspaces => {
return graphService.delete(workspaces.map(({ id }) => id));
return savedWorkspaceLoader.delete(workspaces.map(({ id }) => id));
};
$scope.capabilities = capabilities;
$scope.initialFilter = $location.search().filter || '';
Expand All @@ -139,14 +133,14 @@ export function initGraphApp(angularModule, deps) {
resolve: {
savedWorkspace: function($route) {
return $route.current.params.id
? savedGraphWorkspaces.get($route.current.params.id).catch(function() {
? savedWorkspaceLoader.get($route.current.params.id).catch(function() {
toastNotifications.addDanger(
i18n.translate('xpack.graph.missingWorkspaceErrorMessage', {
defaultMessage: 'Missing workspace',
})
);
})
: savedGraphWorkspaces.get();
: savedWorkspaceLoader.get();
},
indexPatterns: function() {
return savedObjectsClient
Expand Down Expand Up @@ -300,7 +294,7 @@ export function initGraphApp(angularModule, deps) {

// register things on scope passed down to react components
$scope.pluginDataStart = npData;
$scope.storage = new Storage(window.localStorage);
$scope.storage = storage;
$scope.coreStart = coreStart;
$scope.loading = false;
$scope.reduxStore = store;
Expand Down
51 changes: 21 additions & 30 deletions ...legacy/plugins/graph/public/render_app.ts → ...egacy/plugins/graph/public/application.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,6 @@ import { EuiConfirmModal } from '@elastic/eui';
// They can stay even after NP cutover
import angular from 'angular';
import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular';
import 'ui/angular-bootstrap';
import 'ace';
import 'ui/kbn_top_nav';
import { configureAppAngularModule } from 'ui/legacy_compat';
// @ts-ignore
import { createTopNavDirective, createTopNavHelper } from 'ui/kbn_top_nav/kbn_top_nav';
// @ts-ignore
import { confirmModalFactory } from 'ui/modals/confirm_modal';
// @ts-ignore
import { addAppRedirectMessageToUrl } from 'ui/notify';

// type imports
import {
Expand All @@ -31,6 +21,13 @@ import {
ToastsStart,
IUiSettingsClient,
} from 'kibana/public';
import {
configureAppAngularModule,
createTopNavDirective,
createTopNavHelper,
confirmModalFactory,
addAppRedirectMessageToUrl,
} from './legacy_imports';
// @ts-ignore
import { initGraphApp } from './app';
import {
Expand All @@ -40,14 +37,16 @@ import {
import { LicensingPluginSetup } from '../../../../plugins/licensing/public';
import { checkLicense } from '../../../../plugins/graph/common/check_license';
import { NavigationPublicPluginStart as NavigationStart } from '../../../../../src/plugins/navigation/public';
import { createSavedWorkspacesLoader } from './services/persistence/saved_workspace_loader';
import { Storage } from '../../../../../src/plugins/kibana_utils/public';

/**
* These are dependencies of the Graph app besides the base dependencies
* provided by the application service. Some of those still rely on non-shimmed
* plugins in LP-world, but if they are migrated only the import path in the plugin
* itself changes
*/
export interface GraphDependencies extends LegacyAngularInjectedDependencies {
export interface GraphDependencies {
element: HTMLElement;
appBasePath: string;
capabilities: Record<string, boolean | Record<string, boolean>>;
Expand All @@ -62,27 +61,11 @@ export interface GraphDependencies extends LegacyAngularInjectedDependencies {
savedObjectsClient: SavedObjectsClientContract;
addBasePath: (url: string) => string;
getBasePath: () => string;
Storage: any;
storage: Storage;
canEditDrillDownUrls: boolean;
graphSavePolicy: string;
}

/**
* Dependencies of the Graph app which rely on the global angular instance.
* These dependencies have to be migrated to their NP counterparts.
*/
export interface LegacyAngularInjectedDependencies {
/**
* Instance of SavedObjectRegistryProvider
*/
savedObjectRegistry: any;
kbnBaseUrl: any;
/**
* Instance of SavedWorkspacesProvider
*/
savedGraphWorkspaces: any;
}

export const renderApp = ({ appBasePath, element, ...deps }: GraphDependencies) => {
const graphAngularModule = createLocalAngularModule(deps.navigation);
configureAppAngularModule(graphAngularModule, deps.coreStart as LegacyCoreStart, true);
Expand All @@ -92,12 +75,20 @@ export const renderApp = ({ appBasePath, element, ...deps }: GraphDependencies)
const licenseAllowsToShowThisPage = info.showAppLink && info.enableAppLink;

if (!licenseAllowsToShowThisPage) {
const newUrl = addAppRedirectMessageToUrl(deps.addBasePath(deps.kbnBaseUrl), info.message);
const newUrl = addAppRedirectMessageToUrl(deps.addBasePath('/app/kibana'), info.message);
window.location.href = newUrl;
}
});

initGraphApp(graphAngularModule, deps);
const savedWorkspaceLoader = createSavedWorkspacesLoader({
chrome: deps.coreStart.chrome,
indexPatterns: deps.npData.indexPatterns,
overlays: deps.coreStart.overlays,
savedObjectsClient: deps.coreStart.savedObjects.client,
basePath: deps.coreStart.http.basePath,
});

initGraphApp(graphAngularModule, { ...deps, savedWorkspaceLoader });
const $injector = mountGraphApp(appBasePath, element);
return () => {
licenseSubscription.unsubscribe();
Expand Down
Loading

0 comments on commit e8da96e

Please sign in to comment.