Skip to content

Commit

Permalink
Enable workflow updates and document ingest (#166)
Browse files Browse the repository at this point in the history 
Signed-off-by: Tyler Ohlsen <[email protected]>
  • Loading branch information
@ohltyler
ohltyler authored Jun 6, 2024
1 parent 691c3b8 commit 2eb0bb9
Show file tree
Hide file tree
Showing 4 changed files with 179 additions and 153 deletions.
23 changes: 9 additions & 14 deletions public/pages/workflow_detail/resizable_workspace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
setIsWorkflowInputsPanelOpen(!isWorkflowInputsPanelOpen);
};

// ingest state
const [ingestResponse, setIngestResponse] = useState<string>('');

// Tools side panel state
const [isToolsPanelOpen, setIsToolsPanelOpen] = useState<boolean>(true);
const collapseFnVertical = useRef(
Expand Down Expand Up @@ -160,6 +163,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
workflow={props.workflow}
formikProps={formikProps}
onFormChange={onFormChange}
setIngestResponse={setIngestResponse}
/>
</EuiResizablePanel>
<EuiResizableButton />
Expand Down Expand Up @@ -231,21 +235,12 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
onToggleCollapsedInternal={() =>
onToggleToolsChange()
}
style={{ marginBottom: '-24px' }}
style={{ marginBottom: '-16px' }}
>
<EuiFlexGroup
direction="column"
gutterSize="s"
style={{
height: '100%',
}}
>
<EuiFlexItem>
<EuiPanel paddingSize="m">
<Tools workflow={workflow} />
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
<Tools
workflow={workflow}
ingestResponse={ingestResponse}
/>
</EuiResizablePanel>
</>
);
Expand Down
114 changes: 69 additions & 45 deletions public/pages/workflow_detail/tools/tools.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@

import React, { useState } from 'react';
import {
EuiCodeEditor,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
EuiPanel,
EuiTab,
EuiTabs,
EuiText,
Expand All @@ -18,6 +19,7 @@ import { Resources } from './resources';

interface ToolsProps {
workflow?: Workflow;
ingestResponse: string;
}

enum TAB_ID {
Expand Down Expand Up @@ -55,51 +57,73 @@ const inputTabs = [
*/
export function Tools(props: ToolsProps) {
const [selectedTabId, setSelectedTabId] = useState<string>(TAB_ID.INGEST);

return (
<>
<EuiTitle>
<h2>Tools</h2>
</EuiTitle>
<EuiSpacer size="m" />
<>
<EuiTabs size="m" expand={false}>
{inputTabs.map((tab, idx) => {
return (
<EuiTab
onClick={() => setSelectedTabId(tab.id)}
isSelected={tab.id === selectedTabId}
disabled={tab.disabled}
key={idx}
>
{tab.name}
</EuiTab>
);
})}
</EuiTabs>
<EuiSpacer size="m" />
<EuiFlexGroup direction="column">
{selectedTabId === TAB_ID.INGEST && (
<EuiFlexItem>
<EuiText>TODO: Run ingestion placeholder</EuiText>
</EuiFlexItem>
)}
{selectedTabId === TAB_ID.QUERY && (
<EuiFlexItem>
<EuiText>TODO: Run queries placeholder</EuiText>
</EuiFlexItem>
)}
{selectedTabId === TAB_ID.ERRORS && (
<EuiFlexItem>
<EuiText>TODO: View errors placeholder</EuiText>
</EuiFlexItem>
)}
{selectedTabId === TAB_ID.RESOURCES && (
<EuiFlexItem>
<Resources workflow={props.workflow} />
<EuiPanel paddingSize="m" grow={true} style={{ height: '100%' }}>
<EuiFlexGroup
direction="column"
style={{
height: '100%',
}}
>
<EuiFlexItem grow={false}>
<EuiTitle>
<h2>Tools</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTabs size="m" expand={false}>
{inputTabs.map((tab, idx) => {
return (
<EuiTab
onClick={() => setSelectedTabId(tab.id)}
isSelected={tab.id === selectedTabId}
disabled={tab.disabled}
key={idx}
>
{tab.name}
</EuiTab>
);
})}
</EuiTabs>
</EuiFlexItem>
<EuiFlexItem grow={true}>
<EuiFlexGroup direction="column">
<EuiFlexItem grow={true}>
<>
{selectedTabId === TAB_ID.INGEST && (
// TODO: known issue with the editor where resizing the resizablecontainer does not
// trigger vertical scroll updates. Updating the window, or reloading the component
// by switching tabs etc. will refresh it correctly.
<EuiCodeEditor
mode="json"
theme="textmate"
width="100%"
height="100%"
value={props.ingestResponse}
onChange={(input) => {}}
readOnly={true}
setOptions={{
fontSize: '12px',
autoScrollEditorIntoView: true,
}}
tabSize={2}
/>
)}
{selectedTabId === TAB_ID.QUERY && (
<EuiText>TODO: Run queries placeholder</EuiText>
)}
{selectedTabId === TAB_ID.ERRORS && (
<EuiText>TODO: View errors placeholder</EuiText>
)}
{selectedTabId === TAB_ID.RESOURCES && (
<Resources workflow={props.workflow} />
)}
</>
</EuiFlexItem>
)}
</EuiFlexGroup>
</>
</>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
}
49 changes: 7 additions & 42 deletions public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,36 +18,10 @@ interface IngestDataProps {
onFormChange: () => void;
}

enum OPTION {
NEW = 'new',
EXISTING = 'existing',
}

const options = [
{
id: OPTION.NEW,
label: 'Create a new index',
},
{
id: OPTION.EXISTING,
label: 'Choose existing index',
},
];

/**
* Input component for configuring the data ingest (the OpenSearch index)
*/
export function IngestData(props: IngestDataProps) {
const [selectedOption, setSelectedOption] = useState<OPTION>(OPTION.NEW);

useEffect(() => {
const indexName =
props.workflow.ui_metadata?.config?.ingest?.index?.name?.value;
if (indexName) {
setSelectedOption(OPTION.EXISTING);
}
}, [props.workflow.ui_metadata?.config?.ingest?.index]);

return (
<EuiFlexGroup direction="column">
<EuiFlexItem grow={false}>
Expand All @@ -56,24 +30,15 @@ export function IngestData(props: IngestDataProps) {
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiRadioGroup
options={options}
idSelected={selectedOption}
onChange={(optionId) => setSelectedOption(optionId as OPTION)}
<TextField
field={
props.workflow.ui_metadata?.config?.ingest?.index
?.name as IConfigField
}
fieldPath={'ingest.index.name'}
onFormChange={props.onFormChange}
/>
</EuiFlexItem>
<EuiFlexItem>
{selectedOption === OPTION.NEW ? (
<TextField
field={
props.workflow.ui_metadata?.config?.ingest?.index
?.name as IConfigField
}
fieldPath={'ingest.index.name'}
onFormChange={props.onFormChange}
/>
) : null}
</EuiFlexItem>
</EuiFlexGroup>
);
}
Loading

0 comments on commit 2eb0bb9

Please sign in to comment.