[Search Sessions] added an info flyout to session management

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 { InfoButton } from './info_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.INFO:
+      return {
+        iconType: 'document',
+        textColor: 'default',
+        label: <InfoButton searchSession={uiSession} />,
+      };
+
     case ACTION.DELETE:
       return {
         iconType: 'crossInACircleFilled',

x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/info_button.scss

@@ -0,0 +1,6 @@
+.searchSessionsFlyout .euiFlyoutBody__overflowContent {
+  height: 100%;
+  > div {
+    height: 100%;
+  }
+}

x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/info_button.tsx

@@ -0,0 +1,133 @@
+/*
+ * 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 './info_button.scss';
+
+interface Props {
+  searchSession: UISession;
+}
+
+interface State {
+  isLoading: boolean;
+  isFlyoutVisible: boolean;
+  calloutTitle: string;
+}
+
+export class InfoButton extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      isLoading: false,
+      isFlyoutVisible: false,
+      calloutTitle: 'Search Session Info',
+    };
+
+    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">{this.state.calloutTitle}</h2>
+              </EuiTitle>
+            </EuiFlyoutHeader>
+            <EuiFlyoutBody>
+              <EuiText>
+                <EuiText size="xs">
+                  <p>
+                    <FormattedMessage
+                      id="xpack.data.sessions.management.flyoutText"
+                      defaultMessage="Original configuration used to create the search session:"
+                    />
+                  </p>
+                </EuiText>
+                <EuiSpacer />
+                {this.renderInfo()}
+              </EuiText>
+            </EuiFlyoutBody>
+          </EuiFlyout>
+        </EuiPortal>
+      );
+    }
+
+    return (
+      <Fragment>
+        <TableText onClick={this.showFlyout}>
+          <FormattedMessage
+            id="xpack.data.mgmt.searchSessions.actionInfo"
+            aria-label="Show search session info"
+            defaultMessage="Info"
+          />
+        </TableText>
+        {flyout}
+      </Fragment>
+    );
+  }
+
+  private closeFlyout = () => {
+    this.setState({
+      isFlyoutVisible: false,
+    });
+  };
+
+  private showFlyout = () => {
+    this.setState({ isFlyoutVisible: true });
+  };
+}

x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/actions/types.ts

@@ -8,6 +8,7 @@
 export type OnActionComplete = () => void;
 
 export enum ACTION {
+  INFO = 'info',
   EXTEND = 'extend',
   DELETE = 'delete',
 }

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: {},
     };
   });
 

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 [
+              "info",
               "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",
           },

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.INFO);
   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,
   };
 };
 

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: {},
     };
   });
 

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>;
 }