[Search Sessions] added an info flyout to session management (#90559) (…

…#90943) * added an info flyout to session management * better filter serialization * Fix jest tests * jest * display the originalState as a json object * code review * Text improvements Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Feb 10, 2021 · 09e80b0 · 09e80b0
1 parent fe77025
commit 09e80b0
Show file tree

Hide file tree

Showing 10 changed files with 171 additions and 3 deletions.
diff --git a/...ck/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/extend_button.tsx b/...ck/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/extend_button.tsx
@@ -38,7 +38,7 @@ const ExtendConfirm = ({
     defaultMessage: 'Extend search session expiration',
   });
   const confirm = i18n.translate('xpack.data.mgmt.searchSessions.extendModal.extendButton', {
-    defaultMessage: 'Extend',
+    defaultMessage: 'Extend expiration',
   });
   const extend = i18n.translate('xpack.data.mgmt.searchSessions.extendModal.dontExtendButton', {
     defaultMessage: 'Cancel',

diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/get_action.tsx b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/get_action.tsx
@@ -12,15 +12,24 @@ import { SearchSessionsMgmtAPI } from '../../lib/api';
 import { UISession } from '../../types';
 import { DeleteButton } from './delete_button';
 import { ExtendButton } from './extend_button';
+import { InspectButton } from './inspect_button';
 import { ACTION, OnActionComplete } from './types';
 
 export const getAction = (
   api: SearchSessionsMgmtAPI,
   actionType: string,
-  { id, name, expires }: UISession,
+  uiSession: UISession,
   onActionComplete: OnActionComplete
 ): IClickActionDescriptor | null => {
+  const { id, name, expires } = uiSession;
   switch (actionType) {
+    case ACTION.INSPECT:
+      return {
+        iconType: 'document',
+        textColor: 'default',
+        label: <InspectButton searchSession={uiSession} />,
+      };
+
     case ACTION.DELETE:
       return {
         iconType: 'crossInACircleFilled',

diff --git a/.../plugins/data_enhanced/public/search/sessions_mgmt/components/actions/inspect_button.scss b/.../plugins/data_enhanced/public/search/sessions_mgmt/components/actions/inspect_button.scss
@@ -0,0 +1,6 @@
+.searchSessionsFlyout .euiFlyoutBody__overflowContent {
+  height: 100%;
+  > div {
+    height: 100%;
+  }
+}
diff --git a/...k/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/inspect_button.tsx b/...k/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/inspect_button.tsx
@@ -0,0 +1,134 @@
+/*
+ * 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 {
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiPortal,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { Component, Fragment } from 'react';
+import { UISession } from '../../types';
+import { TableText } from '..';
+import { CodeEditor } from '../../../../../../../../src/plugins/kibana_react/public';
+import './inspect_button.scss';
+
+interface Props {
+  searchSession: UISession;
+}
+
+interface State {
+  isFlyoutVisible: boolean;
+}
+
+export class InspectButton extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      isFlyoutVisible: false,
+    };
+
+    this.closeFlyout = this.closeFlyout.bind(this);
+    this.showFlyout = this.showFlyout.bind(this);
+  }
+
+  public renderInfo() {
+    return (
+      <Fragment>
+        <CodeEditor
+          languageId="json"
+          value={JSON.stringify(this.props.searchSession.initialState, null, 2)}
+          onChange={() => {}}
+          options={{
+            readOnly: true,
+            lineNumbers: 'off',
+            fontSize: 12,
+            minimap: {
+              enabled: false,
+            },
+            scrollBeyondLastLine: false,
+            wordWrap: 'on',
+            wrappingIndent: 'indent',
+            automaticLayout: true,
+          }}
+        />
+      </Fragment>
+    );
+  }
+
+  public render() {
+    let flyout;
+
+    if (this.state.isFlyoutVisible) {
+      flyout = (
+        <EuiPortal>
+          <EuiFlyout
+            ownFocus
+            onClose={this.closeFlyout}
+            size="s"
+            aria-labelledby="flyoutTitle"
+            data-test-subj="searchSessionsFlyout"
+            className="searchSessionsFlyout"
+          >
+            <EuiFlyoutHeader hasBorder>
+              <EuiTitle size="m">
+                <h2 id="flyoutTitle">
+                  <FormattedMessage
+                    id="xpack.data.sessions.management.flyoutTitle"
+                    defaultMessage="Inspect search session"
+                  />
+                </h2>
+              </EuiTitle>
+            </EuiFlyoutHeader>
+            <EuiFlyoutBody>
+              <EuiText>
+                <EuiText size="xs">
+                  <p>
+                    <FormattedMessage
+                      id="xpack.data.sessions.management.flyoutText"
+                      defaultMessage="Configuration for this search session"
+                    />
+                  </p>
+                </EuiText>
+                <EuiSpacer />
+                {this.renderInfo()}
+              </EuiText>
+            </EuiFlyoutBody>
+          </EuiFlyout>
+        </EuiPortal>
+      );
+    }
+
+    return (
+      <Fragment>
+        <TableText onClick={this.showFlyout}>
+          <FormattedMessage
+            id="xpack.data.mgmt.searchSessions.flyoutTitle"
+            aria-label="Inspect"
+            defaultMessage="Inspect"
+          />
+        </TableText>
+        {flyout}
+      </Fragment>
+    );
+  }
+
+  private closeFlyout = () => {
+    this.setState({
+      isFlyoutVisible: false,
+    });
+  };
+
+  private showFlyout = () => {
+    this.setState({ isFlyoutVisible: true });
+  };
+}
diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/types.ts b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/types.ts
@@ -8,6 +8,7 @@
 export type OnActionComplete = () => void;
 
 export enum ACTION {
+  INSPECT = 'inspect',
   EXTEND = 'extend',
   DELETE = 'delete',
 }
diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/status.test.tsx b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/status.test.tsx
@@ -31,6 +31,8 @@ describe('Background Search Session management status labels', () => {
       status: SearchSessionStatus.IN_PROGRESS,
       created: '2020-12-02T00:19:32Z',
       expires: '2020-12-07T00:19:32Z',
+      initialState: {},
+      restoreState: {},
     };
   });
 

diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.test.ts b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.test.ts
@@ -46,7 +46,13 @@ describe('Search Sessions Management API', () => {
           saved_objects: [
             {
               id: 'hello-pizza-123',
-              attributes: { name: 'Veggie', appId: 'pizza', status: 'complete' },
+              attributes: {
+                name: 'Veggie',
+                appId: 'pizza',
+                status: 'complete',
+                initialState: {},
+                restoreState: {},
+              },
             },
           ],
         } as SavedObjectsFindResponse;
@@ -61,15 +67,18 @@ describe('Search Sessions Management API', () => {
         Array [
           Object {
             "actions": Array [
+              "inspect",
               "extend",
               "delete",
             ],
             "appId": "pizza",
             "created": undefined,
             "expires": undefined,
             "id": "hello-pizza-123",
+            "initialState": Object {},
             "name": "Veggie",
             "reloadUrl": "hello-cool-undefined-url",
+            "restoreState": Object {},
             "restoreUrl": "hello-cool-undefined-url",
             "status": "complete",
           },

diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.ts b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.ts
@@ -21,6 +21,7 @@ type UrlGeneratorsStart = SharePluginStart['urlGenerators'];
 
 function getActions(status: SearchSessionStatus) {
   const actions: ACTION[] = [];
+  actions.push(ACTION.INSPECT);
   if (status === SearchSessionStatus.IN_PROGRESS || status === SearchSessionStatus.COMPLETE) {
     actions.push(ACTION.EXTEND);
     actions.push(ACTION.DELETE);
@@ -78,6 +79,8 @@ const mapToUISession = (urls: UrlGeneratorsStart, config: SessionsConfigSchema)
     actions,
     restoreUrl,
     reloadUrl,
+    initialState,
+    restoreState,
   };
 };
 

diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/get_columns.test.tsx b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/get_columns.test.tsx
@@ -66,6 +66,8 @@ describe('Search Sessions Management table column factory', () => {
       status: SearchSessionStatus.IN_PROGRESS,
       created: '2020-12-02T00:19:32Z',
       expires: '2020-12-07T00:19:32Z',
+      initialState: {},
+      restoreState: {},
     };
   });
 

diff --git a/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/types.ts b/x-pack/plugins/data_enhanced/public/search/sessions_mgmt/types.ts
@@ -32,4 +32,6 @@ export interface UISession {
   actions?: ACTION[];
   reloadUrl: string;
   restoreUrl: string;
+  initialState: Record<string, unknown>;
+  restoreState: Record<string, unknown>;
 }