[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: 'iInCircle',
+        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.tsx

@@ -0,0 +1,160 @@
+/*
+ * 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 {
+  EuiDescriptionList,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiPortal,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import moment from 'moment';
+import React, { Component, Fragment } from 'react';
+import { Filter, Query, TimeRange } from 'src/plugins/data/public';
+import { UISession } from '../../types';
+import { TableText } from '../';
+
+interface Props {
+  searchSession: UISession;
+}
+
+interface State {
+  isLoading: boolean;
+  isFlyoutVisible: boolean;
+  calloutTitle: string;
+  error: Error | null;
+}
+
+export class InfoButton extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      isLoading: false,
+      isFlyoutVisible: false,
+      calloutTitle: 'Search Session Info',
+      error: null,
+    };
+
+    this.closeFlyout = this.closeFlyout.bind(this);
+    this.showFlyout = this.showFlyout.bind(this);
+  }
+
+  public renderInfo() {
+    const { error: err } = this.state;
+    if (err) {
+      return err.message;
+    }
+
+    const { created, id, initialState, restoreState } = this.props.searchSession;
+
+    const sessionInfo = [
+      {
+        title: 'Search Session Id',
+        description: id,
+      },
+      {
+        title: 'Created at',
+        description: moment(created).toLocaleString(),
+      },
+    ];
+
+    if (initialState.timeRange) {
+      const initialTimerange = initialState.timeRange as TimeRange;
+      sessionInfo.push({
+        title: 'Initial time range',
+        description: `${initialTimerange.from} - ${initialTimerange.to}`,
+      });
+    }
+
+    if (restoreState.timeRange) {
+      const restoreTimerange = restoreState.timeRange as TimeRange;
+      sessionInfo.push({
+        title: 'Actual time range',
+        description: `${restoreTimerange.from} - ${restoreTimerange.to}`,
+      });
+    }
+
+    if (restoreState.query) {
+      const query = restoreState.query as Query;
+      sessionInfo.push({
+        title: 'Query',
+        description: query.query ? `${query.query} (${query.language})` : 'N/A',
+      });
+    }
+
+    if (restoreState.filters) {
+      const filters = restoreState.filters as Filter[];
+      const filterText = filters.map((filter) => JSON.stringify(filter.query)).join('\n');
+      sessionInfo.push({
+        title: 'Filters',
+        description: filters && filters.length ? filterText : 'N/A',
+      });
+    }
+
+    return (
+      <Fragment>
+        <EuiDescriptionList listItems={sessionInfo} type="column" align="center" compressed />
+        <EuiSpacer size="s" />
+      </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"
+          >
+            <EuiFlyoutHeader hasBorder>
+              <EuiTitle size="m">
+                <h2 id="flyoutTitle">{this.state.calloutTitle}</h2>
+              </EuiTitle>
+            </EuiFlyoutHeader>
+            <EuiFlyoutBody>
+              <EuiText>{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>;
 }