Main Page: added side panel for target nodes.

kluctl · Jun 9, 2023 · f17ee24 · f17ee24
1 parent 776729c
commit f17ee24
Show file tree

Hide file tree

Showing 11 changed files with 200 additions and 75 deletions.
diff --git a/pkg/webui/ui/src/components/LeftDrawer.tsx b/pkg/webui/ui/src/components/LeftDrawer.tsx
@@ -19,7 +19,6 @@ import { Typography } from '@mui/material';
 
 const drawerWidthOpen = 224;
 const drawerWidthClosed = 96;
-const appBarHeight = 106;
 
 const openedMixin = (theme: Theme): CSSObject => ({
     width: drawerWidthOpen,
@@ -40,7 +39,7 @@ const closedMixin = (theme: Theme): CSSObject => ({
 });
 
 const DrawerHeader = styled('div')(({ theme }) => ({
-    height: appBarHeight,
+    height: theme.consts.appBarHeight,
     padding: '31px 23px 0 23px',
     // necessary for content to be below app bar
     ...theme.mixins.toolbar,
@@ -53,7 +52,7 @@ interface AppBarProps extends MuiAppBarProps {
 const AppBar = styled(MuiAppBar, {
     shouldForwardProp: (prop) => prop !== 'open',
 })<AppBarProps>(({ theme, open }) => ({
-    height: appBarHeight,
+    height: theme.consts.appBarHeight,
     border: 'none',
     boxShadow: 'none',
     background: 'transparent',
@@ -138,7 +137,7 @@ export default function LeftDrawer(props: { content: React.ReactNode, context: A
         <Box display='flex' height='100%'>
             <AppBar position='fixed' open={open}>
                 <Box display='flex' justifyContent='space-between'>
-                    <Typography variant='h1' fontSize='32px' fontWeight='bold' lineHeight='40px'>
+                    <Typography variant='h1'>
                         Dashboard
                     </Typography>
                     <Box
@@ -169,7 +168,6 @@ export default function LeftDrawer(props: { content: React.ReactNode, context: A
                         </IconButton>
                     </Box>
                 </Box>
-                <Divider />
             </AppBar>
             <ThemeProvider theme={dark}>
                 <Drawer variant="permanent" open={open}>
@@ -192,7 +190,8 @@ export default function LeftDrawer(props: { content: React.ReactNode, context: A
             </ThemeProvider>
             <Box component="main" sx={{ flexGrow: 1, height: '100%', overflow: 'hidden' }} minWidth={0}>
                 <DrawerHeader />
-                <Box width='100%' height={`calc(100% - ${appBarHeight}px)`} overflow='auto'>
+                <Divider sx={{ margin: '0 40px' }}/>
+                <Box width='100%' height={`calc(100% - ${theme.consts.appBarHeight}px)`} overflow='auto'>
                     {props.content}
                 </Box>
             </Box>

diff --git a/pkg/webui/ui/src/components/PropertiesTable.tsx b/pkg/webui/ui/src/components/PropertiesTable.tsx
@@ -9,7 +9,7 @@ import Paper from '@mui/material/Paper';
 
 export function PropertiesTable(props: {properties: {name: string, value: React.ReactNode}[]}) {
     return (
-        <TableContainer component={Paper}>
+        <TableContainer component={Paper} sx={{ padding: '10px 0' }}>
             <Table>
                 <TableHead>
                     <TableRow>

diff --git a/pkg/webui/ui/src/components/result-view/SidePanel.tsx b/pkg/webui/ui/src/components/result-view/SidePanel.tsx
@@ -1,6 +1,8 @@
-import { Box, Tab, Typography } from "@mui/material";
+import { Box, Divider, IconButton, Tab, ThemeProvider, Typography, useTheme } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
+import { CloseIcon } from "../../icons/Icons";
+import { light } from "../theme";
 
 export interface SidePanelTab {
     label: string
@@ -14,10 +16,12 @@ export interface SidePanelProvider {
 
 export interface SidePanelProps {
     provider?: SidePanelProvider;
+    onClose?: () => void;
 }
 
 export const SidePanel = (props: SidePanelProps) => {
-    let [selectedTab, setSelectedTab] = useState<string>();
+    const [selectedTab, setSelectedTab] = useState<string>();
+    const theme = useTheme();
 
     function handleTabChange(_e: React.SyntheticEvent, value: string) {
         setSelectedTab(value);
@@ -55,24 +59,39 @@ export const SidePanel = (props: SidePanelProps) => {
         return <></>
     }
 
-    return <Box width={"100%"} height={"100%"} display="flex" flexDirection="column" p={3}>
-        <Typography variant="h4" mb={1} component="div">
-            {props.provider.buildSidePanelTitle()}
-        </Typography>
-
+    return <Box width={"100%"} height={"100%"} display="flex" flexDirection="column">
         <TabContext value={selectedTab}>
-            <Box flex="0 0 auto" sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                <TabList onChange={handleTabChange}>
-                    {tabs.map((tab, i) => {
-                        return <Tab label={tab.label} value={tab.label} key={tab.label}/>
-                    })}
-                </TabList>
+            <Box height={theme.consts.appBarHeight} display='flex' flexDirection='column' flex='0 0 auto' justifyContent='space-between'>
+                <Box flex='1 1 auto' display='flex' justifyContent='space-between'>
+                    <Box flex='1 1 auto' pt='25px' pl='35px'>
+                        <Typography variant="h4">
+                            {props.provider.buildSidePanelTitle()}
+                        </Typography>
+                    </Box>
+                    <Box flex='0 0 auto' pt='10px' pr='10px'>
+                        <IconButton onClick={props.onClose}>
+                            <CloseIcon />
+                        </IconButton>
+                    </Box>
+                </Box>
+                <Box height='36px' flex='0 0 auto' p='0 30px'>
+                    <TabList onChange={handleTabChange}>
+                        {tabs.map((tab, i) => {
+                            return <Tab label={tab.label} value={tab.label} key={tab.label} />
+                        })}
+                    </TabList>
+                </Box>
+            </Box>
+            <Divider sx={{ margin: 0 }} />
+            <Box>
+                {tabs.map((tab, index) => {
+                    return <ThemeProvider theme={light}>
+                        <TabPanel value={tab.label} key={index} sx={{ overflowY: "auto", padding: '30px' }}>
+                            {tab.content}
+                        </TabPanel>
+                    </ThemeProvider>
+                })}
             </Box>
-            {tabs.map((tab, index) => {
-                return <TabPanel value={tab.label} key={index} sx={{ overflowY: "auto" }}>
-                    {tab.content}
-                </TabPanel>
-            })}
         </TabContext>
     </Box>
 }
diff --git a/pkg/webui/ui/src/components/targets-view/CommandResultItem.tsx b/pkg/webui/ui/src/components/targets-view/CommandResultItem.tsx
@@ -75,10 +75,7 @@ export const CommandResultItem = (props: { ps: ProjectSummary, ts: TargetSummary
                         textAlign='left'
                         textOverflow='ellipsis'
                         overflow='hidden'
-                        lineHeight='27.28px'
                         flexGrow={1}
-                        fontSize='20px'
-                        fontWeight={800}
                     >
                         {props.rs.commandInfo?.command}
                     </Typography>

diff --git a/pkg/webui/ui/src/components/targets-view/Projects.tsx b/pkg/webui/ui/src/components/targets-view/Projects.tsx
@@ -38,10 +38,7 @@ export const ProjectItem = (props: { ps: ProjectSummary }) => {
                                 textAlign='left'
                                 textOverflow='ellipsis'
                                 overflow='hidden'
-                                lineHeight={1.2}
                                 flexGrow={1}
-                                fontSize='20px'
-                                fontWeight={800}
                             >
                                 {name}
                             </Typography>

diff --git a/pkg/webui/ui/src/components/targets-view/TargetDetailsDrawer.tsx b/pkg/webui/ui/src/components/targets-view/TargetDetailsDrawer.tsx
@@ -1,11 +1,12 @@
 import { TargetSummary } from "../../models";
-import { Box, Drawer } from "@mui/material";
+import { Box, Drawer, ThemeProvider } from "@mui/material";
 import { SidePanel, SidePanelProvider, SidePanelTab } from "../result-view/SidePanel";
 import React from "react";
 import { PropertiesTable } from "../PropertiesTable";
 import { DiffStatus } from "../result-view/nodes/NodeData";
 import { ChangesTable } from "../result-view/ChangesTable";
 import { ErrorsTable } from "../ErrorsTable";
+import { dark } from "../theme";
 
 class MyProvider implements SidePanelProvider {
     private ts?: TargetSummary;
@@ -26,27 +27,27 @@ class MyProvider implements SidePanelProvider {
         }
 
         const tabs = [
-            {label: "Summary", content: this.buildSummaryTab()}
+            { label: "Summary", content: this.buildSummaryTab() }
         ]
 
         if (this.ts.target)
 
-        if (this.diffStatus.changedObjects.length) {
-            tabs.push({
-                label: "Drift",
-                content: <ChangesTable diffStatus={this.diffStatus}/>
-            })
-        }
+            if (this.diffStatus.changedObjects.length) {
+                tabs.push({
+                    label: "Drift",
+                    content: <ChangesTable diffStatus={this.diffStatus} />
+                })
+            }
         if (this.ts.lastValidateResult?.errors?.length) {
             tabs.push({
                 label: "Errors",
-                content: <ErrorsTable errors={this.ts.lastValidateResult.errors}/>
+                content: <ErrorsTable errors={this.ts.lastValidateResult.errors} />
             })
         }
         if (this.ts.lastValidateResult?.warnings?.length) {
             tabs.push({
                 label: "Warnings",
-                content: <ErrorsTable errors={this.ts.lastValidateResult.warnings}/>
+                content: <ErrorsTable errors={this.ts.lastValidateResult.warnings} />
             })
         }
 
@@ -55,25 +56,25 @@ class MyProvider implements SidePanelProvider {
 
     buildSummaryTab(): React.ReactNode {
         const props = [
-            {name: "Target Name", value: this.getTargetName()},
-            {name: "Discriminator", value: this.ts?.target.discriminator},
+            { name: "Target Name", value: this.getTargetName() },
+            { name: "Discriminator", value: this.ts?.target.discriminator },
         ]
 
         if (this.ts?.lastValidateResult) {
-            props.push({name: "Ready", value: this.ts.lastValidateResult.ready + ""})
+            props.push({ name: "Ready", value: this.ts.lastValidateResult.ready + "" })
         }
         if (this.ts?.lastValidateResult?.errors?.length) {
-            props.push({name: "Errors", value: this.ts.lastValidateResult.errors.length + ""})
+            props.push({ name: "Errors", value: this.ts.lastValidateResult.errors.length + "" })
         }
         if (this.ts?.lastValidateResult?.warnings?.length) {
-            props.push({name: "Warnings", value: this.ts.lastValidateResult.warnings.length + ""})
+            props.push({ name: "Warnings", value: this.ts.lastValidateResult.warnings.length + "" })
         }
         if (this.ts?.lastValidateResult?.drift?.length) {
-            props.push({name: "Drifted Objects", value: this.ts.lastValidateResult.drift.length + ""})
+            props.push({ name: "Drifted Objects", value: this.ts.lastValidateResult.drift.length + "" })
         }
 
         return <>
-            <PropertiesTable properties={props}/>
+            <PropertiesTable properties={props} />
         </>
     }
 
@@ -95,14 +96,17 @@ class MyProvider implements SidePanelProvider {
 }
 
 export const TargetDetailsDrawer = (props: { ts?: TargetSummary, onClose: () => void }) => {
-    return <Drawer
-        sx={{ zIndex: 1300 }}
-        anchor={"right"}
-        open={props.ts !== undefined}
-        onClose={() => props.onClose()}
-    >
-        <Box width={"800px"} height={"100%"}>
-            <SidePanel provider={new MyProvider(props.ts)}/>
-        </Box>
-    </Drawer>
+    return <ThemeProvider theme={dark}>
+        <Drawer
+            sx={{ zIndex: 1300 }}
+            anchor={"right"}
+            open={props.ts !== undefined}
+            onClose={props.onClose}
+            ModalProps={{ BackdropProps: { invisible: true }}}
+        >
+            <Box width={"382px"} height={"100%"}>
+                <SidePanel provider={new MyProvider(props.ts)} onClose={props.onClose}/>
+            </Box>
+        </Drawer>
+    </ThemeProvider>;
 }
diff --git a/pkg/webui/ui/src/components/targets-view/Targets.tsx b/pkg/webui/ui/src/components/targets-view/Targets.tsx
@@ -112,10 +112,7 @@ export const TargetItem = (props: { ps: ProjectSummary, ts: TargetSummary, onSel
                         textAlign='left'
                         textOverflow='ellipsis'
                         overflow='hidden'
-                        lineHeight='27.28px'
                         flexGrow={1}
-                        fontSize='20px'
-                        fontWeight={800}
                     >
                         {targetName}
                     </Typography>

diff --git a/pkg/webui/ui/src/components/targets-view/TargetsView.tsx b/pkg/webui/ui/src/components/targets-view/TargetsView.tsx
@@ -39,7 +39,7 @@ function ColHeader({ children }: { children: React.ReactNode }) {
             }
         }}
     >
-        <Typography variant={"h6"} textAlign='left' fontSize='20px' fontWeight={700}>{children}</Typography>
+        <Typography variant='h2' textAlign='left'>{children}</Typography>
     </Box>
 }
 
@@ -79,9 +79,9 @@ const RelationTree = React.memo(({ targetCount }: { targetCount: number }): JSX.
     const rootCenterY = height / 2;
 
     return <svg
-        width='169'
+        width={width}
         height={height}
-        viewBox={`0 0 169 ${height}`}
+        viewBox={`0 0 ${width} ${height}`}
         fill='none'
     >
         {targetsCenterYs.map((cy, i) => {