Skip to content

Commit

Permalink
Get base tools body working with dynamic height
Browse files Browse the repository at this point in the history 
Signed-off-by: Tyler Ohlsen <[email protected]>
  • Loading branch information
@ohltyler
ohltyler committed Jun 6, 2024
1 parent bfe1712 commit 6dc177d
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 83 deletions.
22 changes: 5 additions & 17 deletions public/pages/workflow_detail/resizable_workspace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,24 +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}
ingestResponse={ingestResponse}
/>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
<Tools
workflow={workflow}
ingestResponse={ingestResponse}
/>
</EuiResizablePanel>
</>
);
Expand Down
158 changes: 93 additions & 65 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,11 @@

import React, { useState } from 'react';
import {
EuiCodeBlock,
EuiCodeEditor,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiTab,
EuiTabs,
Expand Down Expand Up @@ -57,76 +59,102 @@ const inputTabs = [
*/
export function Tools(props: ToolsProps) {
const [selectedTabId, setSelectedTabId] = useState<string>(TAB_ID.INGEST);

console.log('ingestresponse in tools: ', props.ingestResponse);
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"
justifyContent="spaceBetween"
style={{
height: '80%',
}}
<EuiPanel paddingSize="m" grow={true} style={{ height: '100%' }}>
<EuiFlexGroup
direction="column"
//justifyContent="spaceBetween"
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}
style={
{
// overflowY: 'scroll',
// overflowX: 'hidden',
}
}
>
{selectedTabId === TAB_ID.INGEST && (
<EuiFlexGroup direction="column">
<EuiFlexItem
grow={true}
style={{
overflowY: 'scroll',
overflowX: 'hidden',
}}
// style={{
// overflowY: 'scroll',
// overflowX: 'hidden',
// }}
>
<EuiCodeEditor
mode="json"
theme="textmate"
width="100%"
height="100%"
value={props.ingestResponse}
onChange={(input) => {}}
readOnly={true}
setOptions={{
fontSize: '14px',
}}
aria-label="Code Editor"
tabSize={2}
/>
</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} />
<>
{selectedTabId === TAB_ID.INGEST && (
//TODO: investigate existing editor more
<EuiCodeEditor
mode="json"
theme="textmate"
width="100%"
height="100%"
onScroll={(event) => {
console.log('scroll event fired!');
}}
value={props.ingestResponse}
onChange={(input) => {}}
readOnly={true}
setOptions={{
fontSize: '14px',
}}
aria-label="Code Editor"
tabSize={2}
/>
// <EuiCodeBlock
// language="json"
// fontSize="m"
// paddingSize="m"
// // TODO: dynamically fetch the available space to determine the overflow height.
// overflowHeight={100}
// // style={{
// // height: '100%',
// // }}
// >
// {props.ingestResponse}
// </EuiCodeBlock>
)}
{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>
);
}
2 changes: 1 addition & 1 deletion public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
dispatch(ingest({ index: indexName, doc }))
.unwrap()
.then(async (resp) => {
props.setIngestResponse(JSON.stringify(resp));
props.setIngestResponse(JSON.stringify(resp, undefined, 2));
})
.catch((error: any) => {
getCore().notifications.toasts.addDanger(error);
Expand Down

0 comments on commit 6dc177d

Please sign in to comment.