Skip to content

Commit 77352fe

Browse files
lizozomkibanamachine
authored and
Liza K
committed
[Search Sessions] added an info flyout to session management (#90559)
* 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 <42973632+kibanamachine@users.noreply.github.com>
1 parent bd81ff9 commit 77352fe

10 files changed

Lines changed: 171 additions & 3 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const ExtendConfirm = ({
3838
defaultMessage: 'Extend search session expiration',
3939
});
4040
const confirm = i18n.translate('xpack.data.mgmt.searchSessions.extendModal.extendButton', {
41-
defaultMessage: 'Extend',
41+
defaultMessage: 'Extend expiration',
4242
});
4343
const extend = i18n.translate('xpack.data.mgmt.searchSessions.extendModal.dontExtendButton', {
4444
defaultMessage: 'Cancel',

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,24 @@ import { SearchSessionsMgmtAPI } from '../../lib/api';
1212
import { UISession } from '../../types';
1313
import { DeleteButton } from './delete_button';
1414
import { ExtendButton } from './extend_button';
15+
import { InspectButton } from './inspect_button';
1516
import { ACTION, OnActionComplete } from './types';
1617

1718
export const getAction = (
1819
api: SearchSessionsMgmtAPI,
1920
actionType: string,
20-
{ id, name, expires }: UISession,
21+
uiSession: UISession,
2122
onActionComplete: OnActionComplete
2223
): IClickActionDescriptor | null => {
24+
const { id, name, expires } = uiSession;
2325
switch (actionType) {
26+
case ACTION.INSPECT:
27+
return {
28+
iconType: 'document',
29+
textColor: 'default',
30+
label: <InspectButton searchSession={uiSession} />,
31+
};
32+
2433
case ACTION.DELETE:
2534
return {
2635
iconType: 'crossInACircleFilled',

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.searchSessionsFlyout .euiFlyoutBody__overflowContent {
2+
height: 100%;
3+
> div {
4+
height: 100%;
5+
}
6+
}

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

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import {
9+
EuiFlyout,
10+
EuiFlyoutBody,
11+
EuiFlyoutHeader,
12+
EuiPortal,
13+
EuiSpacer,
14+
EuiText,
15+
EuiTitle,
16+
} from '@elastic/eui';
17+
import { FormattedMessage } from '@kbn/i18n/react';
18+
import React, { Component, Fragment } from 'react';
19+
import { UISession } from '../../types';
20+
import { TableText } from '..';
21+
import { CodeEditor } from '../../../../../../../../src/plugins/kibana_react/public';
22+
import './inspect_button.scss';
23+
24+
interface Props {
25+
searchSession: UISession;
26+
}
27+
28+
interface State {
29+
isFlyoutVisible: boolean;
30+
}
31+
32+
export class InspectButton extends Component<Props, State> {
33+
constructor(props: Props) {
34+
super(props);
35+
36+
this.state = {
37+
isFlyoutVisible: false,
38+
};
39+
40+
this.closeFlyout = this.closeFlyout.bind(this);
41+
this.showFlyout = this.showFlyout.bind(this);
42+
}
43+
44+
public renderInfo() {
45+
return (
46+
<Fragment>
47+
<CodeEditor
48+
languageId="json"
49+
value={JSON.stringify(this.props.searchSession.initialState, null, 2)}
50+
onChange={() => {}}
51+
options={{
52+
readOnly: true,
53+
lineNumbers: 'off',
54+
fontSize: 12,
55+
minimap: {
56+
enabled: false,
57+
},
58+
scrollBeyondLastLine: false,
59+
wordWrap: 'on',
60+
wrappingIndent: 'indent',
61+
automaticLayout: true,
62+
}}
63+
/>
64+
</Fragment>
65+
);
66+
}
67+
68+
public render() {
69+
let flyout;
70+
71+
if (this.state.isFlyoutVisible) {
72+
flyout = (
73+
<EuiPortal>
74+
<EuiFlyout
75+
ownFocus
76+
onClose={this.closeFlyout}
77+
size="s"
78+
aria-labelledby="flyoutTitle"
79+
data-test-subj="searchSessionsFlyout"
80+
className="searchSessionsFlyout"
81+
>
82+
<EuiFlyoutHeader hasBorder>
83+
<EuiTitle size="m">
84+
<h2 id="flyoutTitle">
85+
<FormattedMessage
86+
id="xpack.data.sessions.management.flyoutTitle"
87+
defaultMessage="Inspect search session"
88+
/>
89+
</h2>
90+
</EuiTitle>
91+
</EuiFlyoutHeader>
92+
<EuiFlyoutBody>
93+
<EuiText>
94+
<EuiText size="xs">
95+
<p>
96+
<FormattedMessage
97+
id="xpack.data.sessions.management.flyoutText"
98+
defaultMessage="Configuration for this search session"
99+
/>
100+
</p>
101+
</EuiText>
102+
<EuiSpacer />
103+
{this.renderInfo()}
104+
</EuiText>
105+
</EuiFlyoutBody>
106+
</EuiFlyout>
107+
</EuiPortal>
108+
);
109+
}
110+
111+
return (
112+
<Fragment>
113+
<TableText onClick={this.showFlyout}>
114+
<FormattedMessage
115+
id="xpack.data.mgmt.searchSessions.flyoutTitle"
116+
aria-label="Inspect"
117+
defaultMessage="Inspect"
118+
/>
119+
</TableText>
120+
{flyout}
121+
</Fragment>
122+
);
123+
}
124+
125+
private closeFlyout = () => {
126+
this.setState({
127+
isFlyoutVisible: false,
128+
});
129+
};
130+
131+
private showFlyout = () => {
132+
this.setState({ isFlyoutVisible: true });
133+
};
134+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
export type OnActionComplete = () => void;
99

1010
export enum ACTION {
11+
INSPECT = 'inspect',
1112
EXTEND = 'extend',
1213
DELETE = 'delete',
1314
}

‎x-pack/plugins/data_enhanced/public/search/sessions_mgmt/components/status.test.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ describe('Background Search Session management status labels', () => {
3131
status: SearchSessionStatus.IN_PROGRESS,
3232
created: '2020-12-02T00:19:32Z',
3333
expires: '2020-12-07T00:19:32Z',
34+
initialState: {},
35+
restoreState: {},
3436
};
3537
});
3638

‎x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.test.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,13 @@ describe('Search Sessions Management API', () => {
4646
saved_objects: [
4747
{
4848
id: 'hello-pizza-123',
49-
attributes: { name: 'Veggie', appId: 'pizza', status: 'complete' },
49+
attributes: {
50+
name: 'Veggie',
51+
appId: 'pizza',
52+
status: 'complete',
53+
initialState: {},
54+
restoreState: {},
55+
},
5056
},
5157
],
5258
} as SavedObjectsFindResponse;
@@ -61,15 +67,18 @@ describe('Search Sessions Management API', () => {
6167
Array [
6268
Object {
6369
"actions": Array [
70+
"inspect",
6471
"extend",
6572
"delete",
6673
],
6774
"appId": "pizza",
6875
"created": undefined,
6976
"expires": undefined,
7077
"id": "hello-pizza-123",
78+
"initialState": Object {},
7179
"name": "Veggie",
7280
"reloadUrl": "hello-cool-undefined-url",
81+
"restoreState": Object {},
7382
"restoreUrl": "hello-cool-undefined-url",
7483
"status": "complete",
7584
},

‎x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/api.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ type UrlGeneratorsStart = SharePluginStart['urlGenerators'];
2121

2222
function getActions(status: SearchSessionStatus) {
2323
const actions: ACTION[] = [];
24+
actions.push(ACTION.INSPECT);
2425
if (status === SearchSessionStatus.IN_PROGRESS || status === SearchSessionStatus.COMPLETE) {
2526
actions.push(ACTION.EXTEND);
2627
actions.push(ACTION.DELETE);
@@ -78,6 +79,8 @@ const mapToUISession = (urls: UrlGeneratorsStart, config: SessionsConfigSchema)
7879
actions,
7980
restoreUrl,
8081
reloadUrl,
82+
initialState,
83+
restoreState,
8184
};
8285
};
8386

‎x-pack/plugins/data_enhanced/public/search/sessions_mgmt/lib/get_columns.test.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ describe('Search Sessions Management table column factory', () => {
6666
status: SearchSessionStatus.IN_PROGRESS,
6767
created: '2020-12-02T00:19:32Z',
6868
expires: '2020-12-07T00:19:32Z',
69+
initialState: {},
70+
restoreState: {},
6971
};
7072
});
7173

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,6 @@ export interface UISession {
3232
actions?: ACTION[];
3333
reloadUrl: string;
3434
restoreUrl: string;
35+
initialState: Record<string, unknown>;
36+
restoreState: Record<string, unknown>;
3537
}

0 commit comments

Comments
 (0)