diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx index 8792423ff8f29..4855806fb4997 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx @@ -38,6 +38,7 @@ import checklist from '../icon-svgs/checklist.svg'; import chevron_left from '../icon-svgs/chevron_left.svg'; import chevron_right from '../icon-svgs/chevron_right.svg'; import close from '../icon-svgs/close.svg'; +import collapse_arrows from '../icon-svgs/collapse_arrows.svg'; import concept_book from '../icon-svgs/concept-book.svg'; import console_icon from '../icon-svgs/console.svg'; import content_copy from '../icon-svgs/content_copy.svg'; @@ -55,6 +56,7 @@ import error from '../icon-svgs/error.svg'; import error_outline from '../icon-svgs/error_outline.svg'; import execute from '../icon-svgs/execute.svg'; import expand from '../icon-svgs/expand.svg'; +import expand_arrows from '../icon-svgs/expand_arrows.svg'; import expand_less from '../icon-svgs/expand_less.svg'; import expand_more from '../icon-svgs/expand_more.svg'; import filter_alt from '../icon-svgs/filter_alt.svg'; @@ -246,6 +248,7 @@ export const Icons = { close, console: console_icon, content_copy, + collapse_arrows, delete: deleteSVG, done, dot, @@ -257,6 +260,7 @@ export const Icons = { error, error_outline, expand, + expand_arrows, expand_less, expand_more, filter_alt, diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/SplitPanelContainer.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/SplitPanelContainer.tsx index 00388d70d1d5b..e8002370a0d82 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/SplitPanelContainer.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/SplitPanelContainer.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import styled from 'styled-components'; import {Button} from './Button'; -import {ButtonGroup} from './ButtonGroup'; import {Colors} from './Colors'; import {Icon} from './Icon'; @@ -45,6 +44,10 @@ export class SplitPanelContainer extends React.Component< window.localStorage.setItem(this.state.key, `${size}`); }; + getSize = () => { + return this.state.size; + }; + render() { const {firstMinSize, first, second} = this.props; const {size: _size, resizing} = this.state; @@ -137,41 +140,6 @@ interface PanelToggleProps { container: React.RefObject; } -export const FirstOrSecondPanelToggle = ({container, axis}: PanelToggleProps) => { - const onClick = (id: string) => { - let size = 50; - if (id === 'first-pane') { - size = 100; - } else if (id === 'second-pane') { - size = 0; - } - container.current?.onChangeSize(size); - }; - - return ( - - ); -}; - // Todo: This component attempts to sync itself with the container, but it can't // observe the container's width without a React context or adding a listener, etc. // If we keep making components that manipulate panel state we may want to move it diff --git a/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/collapse_arrows.svg b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/collapse_arrows.svg new file mode 100644 index 0000000000000..d235f8f078e03 --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/collapse_arrows.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/expand_arrows.svg b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/expand_arrows.svg new file mode 100644 index 0000000000000..6b2eca5cab4cd --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/expand_arrows.svg @@ -0,0 +1,3 @@ + + + diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsToolbar.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsToolbar.tsx index 3ff76e0e2e4be..00bef96c81690 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/LogsToolbar.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/LogsToolbar.tsx @@ -8,6 +8,7 @@ import { Tooltip, Suggest, ExternalAnchorButton, + Button, } from '@dagster-io/ui-components'; import * as React from 'react'; import styled from 'styled-components'; @@ -45,10 +46,15 @@ interface ILogsToolbarProps { children?: React.ReactNode; } +interface WithExpandCollapseProps extends ILogsToolbarProps { + isSectionExpanded: boolean; + toggleExpanded: () => void; +} + const logQueryToString = (logQuery: LogFilterValue[]) => logQuery.map(({token, value}) => (token ? `${token}:${value}` : value)).join(' '); -export const LogsToolbar: React.FC = (props) => { +export const LogsToolbar: React.FC = (props) => { const { steps, metadata, @@ -62,6 +68,13 @@ export const LogsToolbar: React.FC = (props) => { computeLogUrl, children, } = props; + let isSectionExpanded; + let toggleExpanded; + + if ('isSectionExpanded' in props) { + isSectionExpanded = props.isSectionExpanded; + toggleExpanded = props.toggleExpanded; + } const activeItems = React.useMemo(() => new Set([logType]), [logType]); @@ -95,6 +108,14 @@ export const LogsToolbar: React.FC = (props) => { /> )} {children} + {toggleExpanded ? ( + +