Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enable workflow updates and document ingest #166

Merged
merged 4 commits into from
Jun 6, 2024
Merged

Enable workflow updates and document ingest #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
17effb6
Implement deprovision/update/provision fn for preparing ingest execution
ohltyler Jun 5, 2024
bfe1712
Implement ingest; persist ingest state to tools ingest tab
ohltyler Jun 6, 2024
6dc177d
Get base tools body working with dynamic height
ohltyler Jun 6, 2024
c0b0934
Formatting cleanup
ohltyler Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 9 additions & 14 deletions public/pages/workflow_detail/resizable_workspace.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading