diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx index 8afad9b3..c71a34be 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx @@ -9,6 +9,8 @@ import { Tab, TabTitleText, Title, + TabContentBody, + TabContent, } from '@patternfly/react-core'; import { Workspace } from '~/shared/types'; import { WorkspaceDetailsOverview } from '~/app/pages/Workspaces/Details/WorkspaceDetailsOverview'; @@ -37,7 +39,7 @@ export const WorkspaceDetails: React.FunctionComponent = }; return ( - + {workspace.name} @@ -48,20 +50,30 @@ export const WorkspaceDetails: React.FunctionComponent = Overview} aria-label="Overview"> - + + + + + Activity} aria-label="Activity"> - Activity + + Activity + Logs} aria-label="Logs"> - Logs + + Logs + Pod template} aria-label="Pod template" > - Pod template + + Pod template + diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx index 67e7f037..7456b981 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx @@ -4,6 +4,7 @@ import { DescriptionListTerm, DescriptionListGroup, DescriptionListDescription, + Divider, } from '@patternfly/react-core'; import { Workspace } from '~/shared/types'; @@ -14,24 +15,28 @@ type WorkspaceDetailsOverviewProps = { export const WorkspaceDetailsOverview: React.FunctionComponent = ({ workspace, }) => ( - + Name {workspace.name} + Kind {workspace.kind} + Labels {workspace.podTemplate.podMetadata.labels.join(', ')} + Pod config {workspace.options.podConfig} + ); diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx index 6312a52f..3b3d9aef 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx @@ -375,7 +375,7 @@ export const Workspaces: React.FunctionComponent = () => { ); return ( - + diff --git a/workspaces/frontend/src/shared/style/MUI-theme.scss b/workspaces/frontend/src/shared/style/MUI-theme.scss index 96f24c23..d4c1c003 100644 --- a/workspaces/frontend/src/shared/style/MUI-theme.scss +++ b/workspaces/frontend/src/shared/style/MUI-theme.scss @@ -23,6 +23,9 @@ --mui-button--LineHeight: 1.75; --mui-link-underlineColor: rgba(33, 150, 243, 0.4); + // Drawer + --mui-drawer-BorderLeft: var(--mui-palette-grey-300); + // Menu item --mui-menu__item--PaddingBlockStart: 6px; --mui-menu__item--PaddingBlockEnd: 6px; @@ -175,10 +178,24 @@ --pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04); } +.mui-theme .pf-v6-c-description-list { + --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--compact); +} + +.mui-theme .pf-v6-c-description-list__term { + font: var(--mui-font-subtitle2); +} + .mui-theme .pf-v6-c-description-list__text .pf-v6-l-split__item.pf-m-fill { align-content: center; } + + +.mui-theme .pf-v6-c-drawer { + --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--mui-drawer-BorderLeft); +} + .mui-theme .pf-v6-c-form__group { position: relative; } @@ -669,6 +686,13 @@ --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg); } +.pf-v6-c-tab-content__body.pf-m-padding { + --pf-v6-c-tab-content__body--PaddingInlineStart: 0px; + --pf-v6-c-tab-content__body--PaddingInlineEnd: 0px; + --pf-v6-c-tab-content__body--PaddingBlockStart: var(--mui-spacing-8px); + --pf-v6-c-tab-content__body--PaddingBlockEnd: var(--mui-spacing-8px); +} + .mui-theme .pf-v6-c-tabs { --pf-v6-c-tabs__link--hover--BackgroundColor: var(--mui-tabs__link--hover--BackgroundColor); --pf-v6-c-tabs__item--PaddingBlockStart: var(--mui-tabs__item--PaddingBlockStart); @@ -760,6 +784,7 @@ } .mui-theme .pf-v6-c-page__main-container { + --pf-v6-c-page__main-container--BorderWidth: 0px; --pf-v6-c-page__main-container--BorderRadius: var(--mui-shape-borderRadius); box-shadow: var(--mui-shadows-1); }