Skip to content

Commit

Permalink
UX fit-n-finish updates XI (#613)
Browse files Browse the repository at this point in the history
Signed-off-by: saimedhi <saimedhi@amazon.com>
  • Loading branch information
saimedhi authored Feb 11, 2025
1 parent 37788e7 commit c3a9eb8
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 95 deletions.
237 changes: 142 additions & 95 deletions public/pages/workflows/workflows.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,16 @@ import {
EuiSmallButton,
EuiText,
EuiFlexItem,
EuiEmptyPrompt,
EuiButton,
} from '@elastic/eui';
import queryString from 'query-string';
import { useSelector } from 'react-redux';
import { BREADCRUMBS, USE_NEW_HOME_PAGE } from '../../utils/constants';
import {
BREADCRUMBS,
USE_NEW_HOME_PAGE,
getAppBasePath,
} from '../../utils/constants';
import { getApplication, getCore, getNavigationUI } from '../../services';
import { WorkflowList } from './workflow_list';
import { NewWorkflow } from './new_workflow';
Expand Down Expand Up @@ -257,103 +263,144 @@ export function Workflows(props: WorkflowsProps) {
<EuiPageBody>
<EuiPageHeader
pageTitle={pageTitleAndDescription}
tabs={[
{
id: WORKFLOWS_TAB.MANAGE,
label: 'Manage workflows',
isSelected: selectedTabId === WORKFLOWS_TAB.MANAGE,
onClick: () => {
setSelectedTabId(WORKFLOWS_TAB.MANAGE);
replaceActiveTab(WORKFLOWS_TAB.MANAGE, props, dataSourceId);
},
},
{
id: WORKFLOWS_TAB.CREATE,
label: 'New workflow',
isSelected: selectedTabId === WORKFLOWS_TAB.CREATE,
onClick: () => {
setSelectedTabId(WORKFLOWS_TAB.CREATE);
replaceActiveTab(WORKFLOWS_TAB.CREATE, props, dataSourceId);
},
},
]}
bottomBorder={true}
bottomBorder={false}
/>
{dataSourceEnabled && (dataSourceId === undefined) ? (
<EuiPageContent grow={true}>
<EuiEmptyPrompt
title={<h2>Incompatible data source</h2>}
body={
<p>
No compatible data source available. Add a compatible data
source.
</p>
}
actions={
<EuiButton
color="primary"
fill
href={`${getAppBasePath()}/app/management/opensearch-dashboards/dataSources`}
>
Manage data sources
</EuiButton>
}
/>
</EuiPageContent>
) : (
<>
<EuiPageHeader
tabs={[
{
id: WORKFLOWS_TAB.MANAGE,
label: 'Manage workflows',
isSelected: selectedTabId === WORKFLOWS_TAB.MANAGE,
onClick: () => {
setSelectedTabId(WORKFLOWS_TAB.MANAGE);
replaceActiveTab(
WORKFLOWS_TAB.MANAGE,
props,
dataSourceId
);
},
},
{
id: WORKFLOWS_TAB.CREATE,
label: 'New workflow',
isSelected: selectedTabId === WORKFLOWS_TAB.CREATE,
onClick: () => {
setSelectedTabId(WORKFLOWS_TAB.CREATE);
replaceActiveTab(
WORKFLOWS_TAB.CREATE,
props,
dataSourceId
);
},
},
]}
bottomBorder={true}
style={{ paddingBottom: '0px' }}
/>

<EuiPageContent grow={false}>
<EuiPageHeader
style={{ marginTop: '-8px' }}
pageTitle={
<EuiText size="s">
<h2>
{selectedTabId === WORKFLOWS_TAB.MANAGE
? 'Workflows'
: 'Create a workflow using a template'}
</h2>
</EuiText>
}
rightSideItems={
selectedTabId === WORKFLOWS_TAB.MANAGE
? [
<EuiSmallButton
style={{ marginTop: '8px' }}
fill={true}
onClick={() => {
setSelectedTabId(WORKFLOWS_TAB.CREATE);
replaceActiveTab(
WORKFLOWS_TAB.CREATE,
props,
dataSourceId
);
}}
iconType="plus"
data-testid="createWorkflowButton"
>
Create workflow
</EuiSmallButton>,
<EuiSmallButton
style={{ marginTop: '8px' }}
onClick={() => {
setIsImportModalOpen(true);
}}
data-testid="importWorkflowButton"
>
Import workflow
</EuiSmallButton>,
]
: [
<EuiSmallButton
style={{ marginTop: '8px' }}
onClick={() => {
setIsImportModalOpen(true);
}}
data-testid="importWorkflowButton"
>
Import workflow
</EuiSmallButton>,
]
}
bottomBorder={false}
/>
{selectedTabId === WORKFLOWS_TAB.MANAGE ? (
<WorkflowList setSelectedTabId={setSelectedTabId} />
) : (
<>
<EuiSpacer size="s" />
<NewWorkflow />
</>
)}
{selectedTabId === WORKFLOWS_TAB.MANAGE &&
Object.keys(workflows || {}).length === 0 &&
!loading && (
<EmptyListMessage
onClickNewWorkflow={() => {
setSelectedTabId(WORKFLOWS_TAB.CREATE);
replaceActiveTab(WORKFLOWS_TAB.CREATE, props, dataSourceId);
}}
<EuiPageContent grow={false}>
<EuiPageHeader
style={{ marginTop: '-8px' }}
pageTitle={
<EuiText size="s">
<h2>
{selectedTabId === WORKFLOWS_TAB.MANAGE
? 'Workflows'
: 'Create a workflow using a template'}
</h2>
</EuiText>
}
rightSideItems={
selectedTabId === WORKFLOWS_TAB.MANAGE
? [
<EuiSmallButton
style={{ marginTop: '8px' }}
fill={true}
onClick={() => {
setSelectedTabId(WORKFLOWS_TAB.CREATE);
replaceActiveTab(
WORKFLOWS_TAB.CREATE,
props,
dataSourceId
);
}}
iconType="plus"
data-testid="createWorkflowButton"
>
Create workflow
</EuiSmallButton>,
<EuiSmallButton
style={{ marginTop: '8px' }}
onClick={() => {
setIsImportModalOpen(true);
}}
data-testid="importWorkflowButton"
>
Import workflow
</EuiSmallButton>,
]
: [
<EuiSmallButton
style={{ marginTop: '8px' }}
onClick={() => {
setIsImportModalOpen(true);
}}
data-testid="importWorkflowButton"
>
Import workflow
</EuiSmallButton>,
]
}
bottomBorder={false}
/>
)}
</EuiPageContent>
{selectedTabId === WORKFLOWS_TAB.MANAGE ? (
<WorkflowList setSelectedTabId={setSelectedTabId} />
) : (
<>
<EuiSpacer size="s" />
<NewWorkflow />
</>
)}
{selectedTabId === WORKFLOWS_TAB.MANAGE &&
Object.keys(workflows || {}).length === 0 &&
!loading && (
<EmptyListMessage
onClickNewWorkflow={() => {
setSelectedTabId(WORKFLOWS_TAB.CREATE);
replaceActiveTab(
WORKFLOWS_TAB.CREATE,
props,
dataSourceId
);
}}
/>
)}
</EuiPageContent>
</>
)}
</EuiPageBody>
</EuiPage>
</>
Expand Down
5 changes: 5 additions & 0 deletions public/utils/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,8 @@ export const BREADCRUMBS = Object.freeze({
});

export const USE_NEW_HOME_PAGE = getUISettings().get('home:useNewHomePage');

export const getAppBasePath = () => {
const currentPath = window.location.pathname;
return currentPath.substring(0, currentPath.indexOf('/app/'));
};
9 changes: 9 additions & 0 deletions public/utils/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import {
Connector,
IngestPipelineErrors,
InputMapEntry,
MapFormValue,
MDSQueryParams,
ModelInputMap,
ModelOutputMap,
Expand Down Expand Up @@ -731,6 +732,10 @@ export function getEmbeddingField(
): string | undefined {
let embeddingField = getEmbeddingFieldFromConnector(connector);
const outputMap = processorConfig?.output_map as OutputMapFormValue;
// legacy text_embedding / text_image_embedding processors store vector fields
// in different configs
const fieldMap = processorConfig?.field_map as MapFormValue; // text embedding processor
const embedding = processorConfig?.embedding; // text/image embedding processor
if (
outputMap !== undefined &&
outputMap[0] !== undefined &&
Expand Down Expand Up @@ -759,6 +764,10 @@ export function getEmbeddingField(
break;
}
}
} else if (embedding !== undefined) {
embeddingField = embedding
} else if (fieldMap !== undefined) {
embeddingField = get(fieldMap, '0.value', embeddingField)
}
return embeddingField;
}
Expand Down

0 comments on commit c3a9eb8

Please sign in to comment.