* [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 <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dmitry Tomashevich <39378793+Dmitriynj@users.noreply.github.com>
This commit is contained in:
Kibana Machine
GitHub
parent
daa98ee0c6
commit
12dd691af6
|
|
@ -108,7 +108,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",
|
||||
|
|
@ -191,7 +190,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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<inspect-panel
|
||||
show-inspect="menus.showInspect"
|
||||
last-request="workspace && workspace.lastRequest"
|
||||
last-response="workspace && workspace.lastResponse"
|
||||
index-pattern="selectedIndex">
|
||||
</inspect-panel>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<div
|
||||
graph-app
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -55,6 +56,7 @@ export function initGraphApp(angularModule, deps) {
|
|||
overlays,
|
||||
savedObjects,
|
||||
setHeaderActionMenu,
|
||||
uiSettings,
|
||||
} = deps;
|
||||
|
||||
const app = angularModule;
|
||||
|
|
@ -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', {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
@ -28,6 +27,7 @@ import {
|
|||
ToastsStart,
|
||||
OverlayStart,
|
||||
AppMountParameters,
|
||||
IUiSettingsClient,
|
||||
} from 'kibana/public';
|
||||
// @ts-ignore
|
||||
import { initGraphApp } from './app';
|
||||
|
|
@ -75,6 +75,7 @@ export interface GraphDependencies {
|
|||
savedObjects: SavedObjectsStart;
|
||||
kibanaLegacy: KibanaLegacyStart;
|
||||
setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
|
||||
uiSettings: IUiSettingsClient;
|
||||
}
|
||||
|
||||
export const renderApp = ({ appBasePath, element, kibanaLegacy, ...deps }: GraphDependencies) => {
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -110,6 +110,7 @@ export class GraphPlugin
|
|||
indexPatterns: pluginsStart.data!.indexPatterns,
|
||||
overlays: coreStart.overlays,
|
||||
savedObjects: pluginsStart.savedObjects,
|
||||
uiSettings: core.uiSettings,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
|
|||
10
yarn.lock
10
yarn.lock
|
|
@ -1617,11 +1617,6 @@
|
|||
history "^4.9.0"
|
||||
qs "^6.7.0"
|
||||
|
||||
"@elastic/ui-ace@0.2.3":
|
||||
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"
|
||||
|
|
@ -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==
|
||||
|
||||
angular-ui-ace@0.2.3:
|
||||
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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue