-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added drill-down details for workflow-created resources (#462)
* Added drill-down details for workflow-created resources Signed-off-by: saimedhi <[email protected]> * Added drill-down details for workflow-created resources Signed-off-by: saimedhi <[email protected]> * Added drill-down details for workflow-created resources Signed-off-by: saimedhi <[email protected]> * Added drill-down details for workflow-created resources Signed-off-by: saimedhi <[email protected]> * Moved fetchResourceData in public/utils Signed-off-by: saimedhi <[email protected]> * Added drill-down details for workflow-created resources Signed-off-by: saimedhi <[email protected]> * Added drill-down details for workflow-created resources Signed-off-by: saimedhi <[email protected]> * Fixing unit tests Signed-off-by: saimedhi <[email protected]> * Fixing error message Signed-off-by: saimedhi <[email protected]> * defined getSearchPipeline path in clusterserver/cluster Signed-off-by: saimedhi <[email protected]> * small fix Signed-off-by: saimedhi <[email protected]> * Added drill-down details for workflow-created resources Signed-off-by: saimedhi <[email protected]> * Added drill-down details for workflow-created resources Signed-off-by: saimedhi <[email protected]> * Removed callback Signed-off-by: saimedhi <[email protected]> --------- Signed-off-by: saimedhi <[email protected]>
- Loading branch information
Showing
16 changed files
with
954 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
219 changes: 219 additions & 0 deletions
219
public/pages/workflow_detail/tools/resources/resource_list_with_flyout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,219 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import React, { useState, useEffect } from 'react'; | ||
| import { | ||
| Direction, | ||
| EuiCodeBlock, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiFlyout, | ||
| EuiFlyoutBody, | ||
| EuiFlyoutHeader, | ||
| EuiInMemoryTable, | ||
| EuiTitle, | ||
| EuiIcon, | ||
| EuiText, | ||
| EuiEmptyPrompt, | ||
| EuiLoadingSpinner, | ||
| } from '@elastic/eui'; | ||
| import { | ||
| Workflow, | ||
| WorkflowResource, | ||
| customStringify, | ||
| } from '../../../../../common'; | ||
| import { | ||
| AppState, | ||
| useAppDispatch, | ||
| getIndex, | ||
| getIngestPipeline, | ||
| getSearchPipeline, | ||
| } from '../../../../store'; | ||
| import { | ||
| extractIdsByStepType, | ||
| getDataSourceId, | ||
| getErrorMessageForStepType, | ||
| } from '../../../../utils'; | ||
| import { columns } from './columns'; | ||
| import { useSelector } from 'react-redux'; | ||
|
|
||
| interface ResourceListFlyoutProps { | ||
| workflow?: Workflow; | ||
| } | ||
|
|
||
| /** | ||
| * The searchable list of resources for a particular workflow. | ||
| */ | ||
| export function ResourceListWithFlyout(props: ResourceListFlyoutProps) { | ||
| const [allResources, setAllResources] = useState<WorkflowResource[]>([]); | ||
| const dispatch = useAppDispatch(); | ||
| const dataSourceId = getDataSourceId(); | ||
| const [resourceDetails, setResourceDetails] = useState<string | null>(null); | ||
| const [rowErrorMessage, setRowErrorMessage] = useState<string | null>(null); | ||
| const { | ||
| loading, | ||
| getIndexErrorMessage, | ||
| getIngestPipelineErrorMessage, | ||
| getSearchPipelineErrorMessage, | ||
| indexDetails, | ||
| ingestPipelineDetails, | ||
| searchPipelineDetails, | ||
| } = useSelector((state: AppState) => state.opensearch); | ||
|
|
||
| // Hook to initialize all resources. Reduce to unique IDs, since | ||
| // the backend resources may include the same resource multiple times | ||
| // (e.g., register and deploy steps persist the same model ID resource) | ||
| useEffect(() => { | ||
| if (props.workflow?.resourcesCreated) { | ||
| const resourcesMap = {} as { [id: string]: WorkflowResource }; | ||
| props.workflow.resourcesCreated.forEach((resource) => { | ||
| resourcesMap[resource.id] = resource; | ||
| }); | ||
| setAllResources(Object.values(resourcesMap)); | ||
| } | ||
| }, [props.workflow?.resourcesCreated]); | ||
|
|
||
| useEffect(() => { | ||
| const { | ||
| indexIds, | ||
| ingestPipelineIds, | ||
| searchPipelineIds, | ||
| } = extractIdsByStepType(allResources); | ||
|
|
||
| if (indexIds) { | ||
| try { | ||
| dispatch(getIndex({ index: indexIds, dataSourceId })); | ||
| } catch {} | ||
| } | ||
|
|
||
| if (ingestPipelineIds) { | ||
| try { | ||
| dispatch( | ||
| getIngestPipeline({ pipelineId: ingestPipelineIds, dataSourceId }) | ||
| ); | ||
| } catch {} | ||
| } | ||
|
|
||
| if (searchPipelineIds) { | ||
| try { | ||
| dispatch( | ||
| getSearchPipeline({ pipelineId: searchPipelineIds, dataSourceId }) | ||
| ); | ||
| } catch {} | ||
| } | ||
| }, [allResources]); | ||
|
|
||
| const sorting = { | ||
| sort: { | ||
| field: 'id', | ||
| direction: 'asc' as Direction, | ||
| }, | ||
| }; | ||
|
|
||
| const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); | ||
| const [selectedRowData, setSelectedRowData] = useState< | ||
| WorkflowResource | undefined | ||
| >(undefined); | ||
|
|
||
| // Opens the flyout and fetches resource details for the selected row. | ||
| const openFlyout = async (row: WorkflowResource) => { | ||
| setSelectedRowData(row); | ||
| setIsFlyoutVisible(true); | ||
| const value = | ||
| indexDetails[row.id] ?? | ||
| ingestPipelineDetails[row.id] ?? | ||
| searchPipelineDetails[row.id] ?? | ||
| ''; | ||
| setResourceDetails(customStringify({ [row.id]: value })); | ||
| const resourceDetailsErrorMessage = getErrorMessageForStepType( | ||
| row.stepType, | ||
| getIndexErrorMessage, | ||
| getIngestPipelineErrorMessage, | ||
| getSearchPipelineErrorMessage | ||
| ); | ||
| setRowErrorMessage(resourceDetailsErrorMessage); | ||
| }; | ||
|
|
||
| // Closes the flyout and resets the selected resource data. | ||
| const closeFlyout = () => { | ||
| setIsFlyoutVisible(false); | ||
| setSelectedRowData(undefined); | ||
| setResourceDetails(null); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <EuiFlexGroup direction="column"> | ||
| <EuiFlexItem> | ||
| <EuiInMemoryTable<WorkflowResource> | ||
| items={allResources} | ||
| rowHeader="id" | ||
| columns={[ | ||
| ...columns, | ||
| { | ||
| name: 'Actions', | ||
| width: '20%', | ||
|
|
||
| render: (row: WorkflowResource) => ( | ||
| <EuiIcon | ||
| onClick={() => openFlyout(row)} | ||
| type="inspect" | ||
| size="m" | ||
| style={{ cursor: 'pointer' }} | ||
| /> | ||
| ), | ||
| }, | ||
| ]} | ||
| sorting={sorting} | ||
| pagination={true} | ||
| message={'No existing resources found'} | ||
| /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| {isFlyoutVisible && ( | ||
| <EuiFlyout onClose={closeFlyout}> | ||
| <EuiFlyoutHeader> | ||
| <EuiTitle> | ||
| <h2>{selectedRowData?.id}</h2> | ||
| </EuiTitle> | ||
| </EuiFlyoutHeader> | ||
| <EuiFlyoutBody> | ||
| <EuiFlexGroup direction="column" gutterSize="xs"> | ||
| <EuiFlexItem grow={true}> | ||
| <EuiText size="m"> | ||
| <h4>Resource details</h4> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={true}> | ||
| {!rowErrorMessage && !loading ? ( | ||
| <EuiCodeBlock | ||
| language="json" | ||
| fontSize="m" | ||
| isCopyable={true} | ||
| overflowHeight={600} | ||
| > | ||
| {resourceDetails} | ||
| </EuiCodeBlock> | ||
| ) : loading ? ( | ||
| <EuiEmptyPrompt | ||
| icon={<EuiLoadingSpinner size="xl" />} | ||
| title={<h2>Loading</h2>} | ||
| /> | ||
| ) : ( | ||
| <EuiEmptyPrompt | ||
| iconType="alert" | ||
| iconColor="danger" | ||
| title={<h2>Error loading resource details</h2>} | ||
| body={<p>{rowErrorMessage}</p>} | ||
| /> | ||
| )} | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiFlyoutBody> | ||
| </EuiFlyout> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.