chore(ui): add scrolling support to sidebar (#229)

shini4i · Dec 7, 2023 · d5d8b5e · d5d8b5e
1 parent 68bd376
commit d5d8b5e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/Makefile b/Makefile
@@ -31,6 +31,8 @@ build: docs ## Build the binaries
 kind-upload:
 	@echo "===> Building [$(CYAN)dev$(RESET)] version of [$(CYAN)argo-watcher$(RESET)] binary"
 	@CGO_ENABLED=0 GOARCH=arm64 GOOS=linux go build -ldflags="-s -w -X main.version=dev" -o argo-watcher ./cmd/argo-watcher
+	@echo "===> Building web UI"
+	@cd web && npm run build
 	@echo "===> Building [$(CYAN)argo-watcher$(RESET)] docker image"
 	@docker build -t ghcr.io/shini4i/argo-watcher:dev .
 	@echo "===> Loading [$(CYAN)argo-watcher$(RESET)] docker image into [$(CYAN)kind$(RESET)] cluster"

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -12,7 +12,7 @@ services:
     ports:
       - "5432:5432"
   backend:
-    image: golang:1.20-alpine3.16
+    image: golang:1.21-alpine3.18
     volumes:
       - .:/app
     working_dir: /app

diff --git a/web/src/Components/Sidebar.js b/web/src/Components/Sidebar.js
@@ -37,9 +37,17 @@ function Sidebar({ open, onClose }) {
         if (key === 'argo_cd_url' && value && typeof value === 'object' && value.constructor === Object) {
             return `${value.Scheme}://${value.Host}${value.Path}`;
         } else if (value && typeof value === 'object' && value.constructor === Object) {
-            return JSON.stringify(value, null, 2);
+            return (
+                <Box sx={{ maxHeight: '100px', overflow: 'auto', whiteSpace: 'nowrap' }}>
+                    {JSON.stringify(value, null, 2)}
+                </Box>
+            );
         }
-        return value.toString();
+        return (
+            <Box sx={{ maxHeight: '100px', overflow: 'auto', whiteSpace: 'nowrap' }}>
+                {value.toString()}
+            </Box>
+        );
     };
 
     const renderContent = () => {
@@ -59,8 +67,8 @@ function Sidebar({ open, onClose }) {
                         <Table aria-label="config table">
                             <TableHead>
                                 <TableRow>
-                                    <TableCell>Config Key</TableCell>
-                                    <TableCell>Config Value</TableCell>
+                                    <TableCell>Key</TableCell>
+                                    <TableCell>Value</TableCell>
                                 </TableRow>
                             </TableHead>
                             <TableBody>
@@ -91,12 +99,17 @@ function Sidebar({ open, onClose }) {
 
     return (
         <Drawer anchor="right" open={open} onClose={onClose} sx={{ '& .MuiDrawer-paper': { width: '350px' } }}>
-            <Box p={2}>
-                <Typography variant="h6" gutterBottom>
+            <Box p={2} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: '1 1 auto' }}>
+                <Typography variant="h5" gutterBottom>
                     Config Data
                 </Typography>
                 {renderContent()}
             </Box>
+            <Box p={2} sx={{ borderTop: '1px solid gray' }}>
+                <Typography variant="body2" color="textSecondary" align="center">
+                    © {new Date().getFullYear()} Vadim Gedz
+                </Typography>
+            </Box>
         </Drawer>
     );
 }