Skip to content

Commit

Permalink
[Graph] Remove angular from inspect panel (#106368)
Browse files Browse the repository at this point in the history
* [Discover] remove angular from inspect panel

* [Graph] remove ui-ace module import

* [Graph] remove uiace angular injected module

* [Graph] remove redundant interface

* [Graph] remove ui-ace from package.json

Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
dimaanj and kibanamachine authored Jul 26, 2021
1 parent cf1761c commit 2bb1309
Show file tree
Hide file tree
Showing 7 changed files with 140 additions and 59 deletions.
2 changes: 0 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@
"@elastic/request-crypto": "1.1.4",
"@elastic/safer-lodash-set": "link:bazel-bin/packages/elastic-safer-lodash-set",
"@elastic/search-ui-app-search-connector": "^1.6.0",
"@elastic/ui-ace": "0.2.3",
"@emotion/react": "^11.4.0",
"@hapi/accept": "^5.0.2",
"@hapi/boom": "^9.1.1",
Expand Down Expand Up @@ -194,7 +193,6 @@
"angular-route": "^1.8.0",
"angular-sanitize": "^1.8.0",
"angular-sortable-view": "^0.0.17",
"angular-ui-ace": "0.2.3",
"antlr4ts": "^0.5.0-alpha.3",
"archiver": "^5.2.0",
"axios": "^0.21.1",
Expand Down
53 changes: 8 additions & 45 deletions x-pack/plugins/graph/public/angular/templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,51 +3,14 @@
<kbn-top-nav name="workspacesTopNav" config="topNavMenu" set-menu-mount-point="setHeaderActionMenu">
</kbn-top-nav>

<div class="gphGraph__menus" ng-show="menus.showInspect">
<div>
<div
class="kuiLocalDropdownTitle"
i18n-id="xpack.graph.inspect.title"
i18n-default-message="Inspect"
></div>

<div
class="list-group-item"
ng-if="(workspace !== null)"
>
<small class="help-block">http://host:port/{{ selectedIndex.name }}/_graph/explore</small>
<ul class="nav nav-tabs">
<li ng-class="{active: spymode === 'request'}">
<a
ng-click="spymode='request'"
i18n-id="xpack.graph.inspect.requestTabTitle"
i18n-default-message="Request"
></a>
</li>
<li ng-class="{active: spymode === 'response'}">
<a
ng-click="spymode='response'"
i18n-id="xpack.graph.inspect.responseTabTitle"
i18n-default-message="Response"
></a>
</li>
</ul>

<div
ng-show="spymode == 'request'"
ui-ace="{ onLoad: aceLoaded, mode: 'json', advanced: { readOnly: true } }"
ng-model="workspace.lastRequest"
class="gphSettings__jsonView"
></div>
<div
ng-show="spymode == 'response'"
ui-ace="{ onLoad: aceLoaded, mode: 'json', advanced: { readOnly: true } }"
ng-model="workspace.lastResponse"
class="gphSettings__jsonView"
></div>
</div>
</div>
</div>
<inspect-panel
show-inspect="menus.showInspect"
last-request="workspace && workspace.lastRequest"
last-response="workspace && workspace.lastResponse"
index-pattern="selectedIndex">
</inspect-panel>



<div
graph-app
Expand Down
19 changes: 19 additions & 0 deletions x-pack/plugins/graph/public/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {
getSavedWorkspace,
deleteSavedWorkspace,
} from './helpers/saved_workspace_utils';
import { InspectPanel } from './components/inspect_panel/inspect_panel';

export function initGraphApp(angularModule, deps) {
const {
Expand All @@ -55,6 +56,7 @@ export function initGraphApp(angularModule, deps) {
overlays,
savedObjects,
setHeaderActionMenu,
uiSettings,
} = deps;

const app = angularModule;
Expand Down Expand Up @@ -108,6 +110,23 @@ export function initGraphApp(angularModule, deps) {
return reactDirective(GraphVisualization, undefined, { restrict: 'A' });
});

app.directive('inspectPanel', function (reactDirective) {
return reactDirective(
InspectPanel,
[
['showInspect', { watchDepth: 'reference' }],
['lastRequest', { watchDepth: 'reference' }],
['lastResponse', { watchDepth: 'reference' }],
['indexPattern', { watchDepth: 'reference' }],
['uiSettings', { watchDepth: 'reference' }],
],
{ restrict: 'E' },
{
uiSettings,
}
);
});

app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
Expand Down
5 changes: 3 additions & 2 deletions x-pack/plugins/graph/public/application.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular';

import 'brace';
import 'brace/mode/json';
import '@elastic/ui-ace/ui-ace';

// required for i18nIdDirective and `ngSanitize` angular module
import 'angular-sanitize';
Expand All @@ -28,6 +27,7 @@ import {
ToastsStart,
OverlayStart,
AppMountParameters,
IUiSettingsClient,
} from 'kibana/public';
// @ts-ignore
import { initGraphApp } from './app';
Expand Down Expand Up @@ -75,6 +75,7 @@ export interface GraphDependencies {
savedObjects: SavedObjectsStart;
kibanaLegacy: KibanaLegacyStart;
setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
uiSettings: IUiSettingsClient;
}

export const renderApp = ({ appBasePath, element, kibanaLegacy, ...deps }: GraphDependencies) => {
Expand Down Expand Up @@ -119,7 +120,7 @@ const mainTemplate = (basePath: string) => `<div ng-view class="gphAppWrapper">

const moduleName = 'app/graph';

const thirdPartyAngularDependencies = ['ngSanitize', 'ngRoute', 'react', 'ui.bootstrap', 'ui.ace'];
const thirdPartyAngularDependencies = ['ngSanitize', 'ngRoute', 'react', 'ui.bootstrap'];

function mountGraphApp(appBasePath: string, element: HTMLElement) {
const mountpoint = document.createElement('div');
Expand Down
109 changes: 109 additions & 0 deletions x-pack/plugins/graph/public/components/inspect_panel/inspect_panel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React, { useMemo, useState } from 'react';
import { EuiTab, EuiTabs, EuiText } from '@elastic/eui';
import { monaco, XJsonLang } from '@kbn/monaco';
import { FormattedMessage } from '@kbn/i18n/react';
import { IUiSettingsClient } from 'kibana/public';
import { IndexPattern } from '../../../../../../src/plugins/data/public';
import {
CodeEditor,
KibanaContextProvider,
} from '../../../../../../src/plugins/kibana_react/public';

interface InspectPanelProps {
showInspect?: boolean;
indexPattern?: IndexPattern;
uiSettings: IUiSettingsClient;
lastRequest?: string;
lastResponse?: string;
}

const CODE_EDITOR_OPTIONS: monaco.editor.IStandaloneEditorConstructionOptions = {
automaticLayout: true,
fontSize: 12,
lineNumbers: 'on',
minimap: {
enabled: false,
},
overviewRulerBorder: false,
readOnly: true,
scrollbar: {
alwaysConsumeMouseWheel: false,
},
scrollBeyondLastLine: false,
wordWrap: 'on',
wrappingIndent: 'indent',
};

const dummyCallback = () => {};

export const InspectPanel = ({
showInspect,
lastRequest,
lastResponse,
indexPattern,
uiSettings,
}: InspectPanelProps) => {
const [selectedTabId, setSelectedTabId] = useState('request');

const onRequestClick = () => setSelectedTabId('request');
const onResponseClick = () => setSelectedTabId('response');

const services = useMemo(() => ({ uiSettings }), [uiSettings]);

const editorContent = useMemo(() => (selectedTabId === 'request' ? lastRequest : lastResponse), [
selectedTabId,
lastRequest,
lastResponse,
]);

if (showInspect) {
return (
<KibanaContextProvider services={services}>
<div className="gphGraph__menus">
<div>
<div className="kuiLocalDropdownTitle">
<FormattedMessage id="xpack.graph.inspect.title" defaultMessage="Inspect" />
</div>

<div className="list-group-item">
<EuiText size="xs" className="help-block">
<span>http://host:port/{indexPattern?.id}/_graph/explore</span>
</EuiText>
<EuiTabs>
<EuiTab onClick={onRequestClick} isSelected={'request' === selectedTabId}>
<FormattedMessage
id="xpack.graph.inspect.requestTabTitle"
defaultMessage="Request"
/>
</EuiTab>
<EuiTab onClick={onResponseClick} isSelected={'response' === selectedTabId}>
<FormattedMessage
id="xpack.graph.inspect.responseTabTitle"
defaultMessage="Response"
/>
</EuiTab>
</EuiTabs>
<CodeEditor
languageId={XJsonLang.ID}
height={240}
value={editorContent || ''}
onChange={dummyCallback}
editorDidMount={dummyCallback}
options={CODE_EDITOR_OPTIONS}
/>
</div>
</div>
</div>
</KibanaContextProvider>
);
}

return null;
};
1 change: 1 addition & 0 deletions x-pack/plugins/graph/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export class GraphPlugin
indexPatterns: pluginsStart.data!.indexPatterns,
overlays: coreStart.overlays,
savedObjects: pluginsStart.savedObjects,
uiSettings: core.uiSettings,
});
},
});
Expand Down
10 changes: 0 additions & 10 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1617,11 +1617,6 @@
history "^4.9.0"
qs "^6.7.0"

"@elastic/[email protected]":
version "0.2.3"
resolved "https://registry.yarnpkg.com/@elastic/ui-ace/-/ui-ace-0.2.3.tgz#5281aed47a79b7216c55542b0675e435692f20cd"
integrity sha512-Nti5s2dplBPhSKRwJxG9JXTMOev4jVOWcnTJD1TOkJr1MUBYKVZcNcJtIVMSvahWGmP0B/UfO9q9lyRqdivkvQ==

"@emotion/babel-plugin-jsx-pragmatic@^0.1.5":
version "0.1.5"
resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz#27debfe9c27c4d83574d509787ae553bf8a34d7e"
Expand Down Expand Up @@ -6951,11 +6946,6 @@ angular-sortable-view@^0.0.17:
resolved "https://registry.yarnpkg.com/angular-sortable-view/-/angular-sortable-view-0.0.17.tgz#99e2679951a86b6ee6ff27b099022943c683fb4f"
integrity sha512-2WkhM0Lt/wyMyrX/+7ve9ejSegBd7A4eRBNHEIJz8XMBIOjt+3oM1WpcAm+qNThkmNmmQaDeaYv0TQZw/WDMBw==

[email protected]:
version "0.2.3"
resolved "https://registry.yarnpkg.com/angular-ui-ace/-/angular-ui-ace-0.2.3.tgz#3cb903428100621a367fc7f641440e97a42a26d0"
integrity sha1-PLkDQoEAYho2f8f2QUQOl6QqJtA=

angular@>=1.0.6, angular@^1.8.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/angular/-/angular-1.8.0.tgz#b1ec179887869215cab6dfd0df2e42caa65b1b51"
Expand Down

0 comments on commit 2bb1309

Please sign in to comment.