Skip to content

Commit 9a75401

Browse files
ohltylerohltyler
committed
More refactoring; set up multi-resource flyout
Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
1 parent 4641403 commit 9a75401

File tree

5 files changed

+217
-79
lines changed

5 files changed

+217
-79
lines changed

‎public/pages/workflow_detail/tools/resources/resource_flyout.tsx

+8-58
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,13 @@
55

66
import React from 'react';
77
import {
8-
EuiCodeBlock,
9-
EuiFlexGroup,
10-
EuiFlexItem,
118
EuiFlyout,
129
EuiFlyoutBody,
1310
EuiFlyoutHeader,
1411
EuiTitle,
15-
EuiText,
16-
EuiEmptyPrompt,
17-
EuiHealth,
18-
EuiSpacer,
1912
} from '@elastic/eui';
20-
import { WORKFLOW_STEP_TYPE, WorkflowResource } from '../../../../../common';
13+
import { WorkflowResource } from '../../../../../common';
14+
import { ResourceFlyoutContent } from './resource_flyout_content';
2115

2216
interface ResourceFlyoutProps {
2317
resource: WorkflowResource;
@@ -27,7 +21,7 @@ interface ResourceFlyoutProps {
2721
}
2822

2923
/**
30-
* The searchable list of resources for a particular workflow.
24+
* A simple flyout to display details for a particular workflow resource.
3125
*/
3226
export function ResourceFlyout(props: ResourceFlyoutProps) {
3327
return (
@@ -38,55 +32,11 @@ export function ResourceFlyout(props: ResourceFlyoutProps) {
3832
</EuiTitle>
3933
</EuiFlyoutHeader>
4034
<EuiFlyoutBody>
41-
<EuiFlexGroup direction="column" gutterSize="xs">
42-
<EuiFlexItem grow={false}>
43-
<EuiTitle size="s">
44-
<h4>Name</h4>
45-
</EuiTitle>
46-
</EuiFlexItem>
47-
<EuiFlexItem grow={false}>
48-
<EuiText>{props.resource?.id || ''}</EuiText>
49-
</EuiFlexItem>
50-
<EuiSpacer size="s" />
51-
<EuiFlexItem grow={false}>
52-
<EuiTitle size="s">
53-
<h4>Status</h4>
54-
</EuiTitle>
55-
</EuiFlexItem>
56-
<EuiFlexItem grow={false}>
57-
<EuiHealth color="success">Active</EuiHealth>
58-
</EuiFlexItem>
59-
<EuiSpacer size="s" />
60-
<EuiFlexItem grow={false}>
61-
<EuiTitle size="s">
62-
<h4>
63-
{props.resource?.stepType ===
64-
WORKFLOW_STEP_TYPE.CREATE_INDEX_STEP_TYPE
65-
? 'Configuration'
66-
: 'Pipeline configuration'}
67-
</h4>
68-
</EuiTitle>
69-
</EuiFlexItem>
70-
<EuiFlexItem grow={true}>
71-
{!props.errorMessage ? (
72-
<EuiCodeBlock
73-
language="json"
74-
fontSize="m"
75-
isCopyable={true}
76-
overflowHeight={600}
77-
>
78-
{props.resourceDetails}
79-
</EuiCodeBlock>
80-
) : (
81-
<EuiEmptyPrompt
82-
iconType="alert"
83-
iconColor="danger"
84-
title={<h2>Error loading resource details</h2>}
85-
body={<p>{props.errorMessage}</p>}
86-
/>
87-
)}
88-
</EuiFlexItem>
89-
</EuiFlexGroup>
35+
<ResourceFlyoutContent
36+
resource={props.resource}
37+
resourceDetails={props.resourceDetails}
38+
errorMessage={props.errorMessage}
39+
/>
9040
</EuiFlyoutBody>
9141
</EuiFlyout>
9242
);

‎public/pages/workflow_detail/tools/resources/resource_flyout_content.tsx

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/*
2+
* Copyright OpenSearch Contributors
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
import React from 'react';
7+
import {
8+
EuiCodeBlock,
9+
EuiFlexGroup,
10+
EuiFlexItem,
11+
EuiTitle,
12+
EuiText,
13+
EuiEmptyPrompt,
14+
EuiHealth,
15+
EuiSpacer,
16+
} from '@elastic/eui';
17+
import { WORKFLOW_STEP_TYPE, WorkflowResource } from '../../../../../common';
18+
19+
interface ResourceFlyoutContentProps {
20+
resource: WorkflowResource;
21+
resourceDetails: string;
22+
errorMessage?: string;
23+
}
24+
25+
/**
26+
* The static flyout content for a particular workflow resource.
27+
*/
28+
export function ResourceFlyoutContent(props: ResourceFlyoutContentProps) {
29+
return (
30+
<EuiFlexGroup direction="column" gutterSize="xs">
31+
<EuiFlexItem grow={false}>
32+
<EuiTitle size="s">
33+
<h4>Name</h4>
34+
</EuiTitle>
35+
</EuiFlexItem>
36+
<EuiFlexItem grow={false}>
37+
<EuiText>{props.resource?.id || ''}</EuiText>
38+
</EuiFlexItem>
39+
<EuiSpacer size="s" />
40+
<EuiFlexItem grow={false}>
41+
<EuiTitle size="s">
42+
<h4>Status</h4>
43+
</EuiTitle>
44+
</EuiFlexItem>
45+
<EuiFlexItem grow={false}>
46+
<EuiHealth color="success">Active</EuiHealth>
47+
</EuiFlexItem>
48+
<EuiSpacer size="s" />
49+
<EuiFlexItem grow={false}>
50+
<EuiTitle size="s">
51+
<h4>
52+
{props.resource?.stepType ===
53+
WORKFLOW_STEP_TYPE.CREATE_INDEX_STEP_TYPE
54+
? 'Configuration'
55+
: 'Pipeline configuration'}
56+
</h4>
57+
</EuiTitle>
58+
</EuiFlexItem>
59+
<EuiFlexItem grow={true}>
60+
{!props.errorMessage ? (
61+
<EuiCodeBlock
62+
language="json"
63+
fontSize="m"
64+
isCopyable={true}
65+
overflowHeight={600}
66+
>
67+
{props.resourceDetails}
68+
</EuiCodeBlock>
69+
) : (
70+
<EuiEmptyPrompt
71+
iconType="alert"
72+
iconColor="danger"
73+
title={<h2>Error loading resource details</h2>}
74+
body={<p>{props.errorMessage}</p>}
75+
/>
76+
)}
77+
</EuiFlexItem>
78+
</EuiFlexGroup>
79+
);
80+
}

‎public/pages/workflow_detail/tools/resources/resource_list_with_flyout.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ interface ResourceListFlyoutProps {
3737
}
3838

3939
/**
40-
* The searchable list of resources for a particular workflow.
40+
* The searchable list of resources for a particular workflow. Each resource has an "inspect"
41+
* action to view more details within a flyout.
4142
*/
4243
export function ResourceListWithFlyout(props: ResourceListFlyoutProps) {
4344
const [allResources, setAllResources] = useState<WorkflowResource[]>([]);

‎public/pages/workflow_detail/tools/resources/resources_flyout.tsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/*
2+
* Copyright OpenSearch Contributors
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
import React, { useState } from 'react';
7+
import {
8+
EuiFlexItem,
9+
EuiFlyout,
10+
EuiFlyoutBody,
11+
EuiFlyoutHeader,
12+
EuiTab,
13+
EuiTabs,
14+
EuiTitle,
15+
} from '@elastic/eui';
16+
import {
17+
WORKFLOW_RESOURCE_TYPE,
18+
WorkflowResource,
19+
} from '../../../../../common';
20+
import { ResourceFlyoutContent } from './resource_flyout_content';
21+
import { get } from 'lodash';
22+
23+
interface ResourcesFlyoutProps {
24+
resources: WorkflowResource[];
25+
resourceDetails: string[];
26+
onClose: () => void;
27+
errorMessage?: string;
28+
}
29+
30+
/**
31+
* A simple flyout to display details for multiple workflow resources nested
32+
* under tabs.
33+
*/
34+
export function ResourcesFlyout(props: ResourcesFlyoutProps) {
35+
const [selectedResourceIdx, setSelectedResourceIdx] = useState<number>(0);
36+
const [selectedTabId, setSelectedTabId] = useState<string>(
37+
get(props, `resources.${selectedResourceIdx}.id`)
38+
);
39+
const selectedResource = get(
40+
props,
41+
`resources.${selectedResourceIdx}`,
42+
undefined
43+
) as WorkflowResource | undefined;
44+
const selectedResourceDetails = get(
45+
props,
46+
`resourceDetails.${selectedResourceIdx}`,
47+
undefined
48+
) as string | undefined;
49+
50+
return (
51+
<EuiFlyout onClose={props.onClose}>
52+
<EuiFlyoutHeader>
53+
<EuiTitle>
54+
<h2>Resource details</h2>
55+
</EuiTitle>
56+
</EuiFlyoutHeader>
57+
<EuiFlyoutBody>
58+
<EuiFlexItem grow={false}>
59+
<EuiTabs size="s" expand={false}>
60+
{props.resources?.map((tab, idx) => {
61+
return (
62+
<EuiTab
63+
onClick={() => {
64+
setSelectedTabId(tab.id);
65+
setSelectedResourceIdx(idx);
66+
}}
67+
isSelected={tab.id === selectedTabId}
68+
disabled={false}
69+
key={idx}
70+
>
71+
{tab?.type === WORKFLOW_RESOURCE_TYPE.INDEX_NAME
72+
? 'Index'
73+
: 'Pipeline'}
74+
</EuiTab>
75+
);
76+
})}
77+
</EuiTabs>
78+
</EuiFlexItem>
79+
{selectedResource !== undefined &&
80+
selectedResourceDetails !== undefined && (
81+
<ResourceFlyoutContent
82+
resource={selectedResource}
83+
resourceDetails={selectedResourceDetails}
84+
errorMessage={props.errorMessage}
85+
/>
86+
)}
87+
</EuiFlyoutBody>
88+
</EuiFlyout>
89+
);
90+
}

‎public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx

+37-20
Original file line numberDiff line numberDiff line change
@@ -703,26 +703,43 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
703703
<h2>{onIngest ? 'Ingest flow' : 'Search flow'}</h2>
704704
</EuiText>
705705
</EuiFlexItem>
706-
{onIngestAndUnprovisioned && (
707-
<EuiFlexItem grow={false} style={{ marginTop: '20px' }}>
708-
<BooleanField
709-
fieldPath="ingest.enabled"
710-
label="Enable ingest flow"
711-
type="Switch"
712-
/>
713-
</EuiFlexItem>
714-
)}
715-
{(ingestProvisioned || searchProvisioned) && (
716-
<EuiFlexItem grow={false} style={{ marginTop: '20px' }}>
717-
<EuiButtonEmpty
718-
iconSide="left"
719-
iconType="play"
720-
onClick={() => props.displaySearchPanel()}
721-
>
722-
Test flow
723-
</EuiButtonEmpty>
724-
</EuiFlexItem>
725-
)}
706+
<EuiFlexItem grow={false}>
707+
<EuiFlexGroup direction="row" gutterSize="s">
708+
{onIngestAndUnprovisioned && (
709+
<EuiFlexItem grow={false} style={{ marginTop: '20px' }}>
710+
<BooleanField
711+
fieldPath="ingest.enabled"
712+
label="Enable ingest flow"
713+
type="Switch"
714+
/>
715+
</EuiFlexItem>
716+
)}
717+
{(ingestProvisioned || searchProvisioned) && (
718+
<EuiFlexItem grow={false} style={{ marginTop: '20px' }}>
719+
<EuiButtonEmpty
720+
iconSide="left"
721+
iconType="play"
722+
onClick={() => props.displaySearchPanel()}
723+
>
724+
Test flow
725+
</EuiButtonEmpty>
726+
</EuiFlexItem>
727+
)}
728+
{onIngest && ingestProvisioned && (
729+
<EuiFlexItem grow={false} style={{ marginTop: '20px' }}>
730+
<EuiButtonEmpty
731+
iconSide="left"
732+
iconType="inspect"
733+
onClick={() => {
734+
console.log('clicking details...');
735+
}}
736+
>
737+
Details
738+
</EuiButtonEmpty>
739+
</EuiFlexItem>
740+
)}
741+
</EuiFlexGroup>
742+
</EuiFlexItem>
726743
</EuiFlexGroup>
727744
</EuiFlexItem>
728745
<EuiFlexItem

0 commit comments

Comments
 (0)