chore: react-virtuoso LogViewer companion (#8862)

determined-ai · Mar 7, 2024 · f8f860d · f8f860d
1 parent bf21896
commit f8f860d
Show file tree

Hide file tree

Showing 13 changed files with 32 additions and 391 deletions.
diff --git a/webui/react/package-lock.json b/webui/react/package-lock.json
diff --git a/webui/react/package.json b/webui/react/package.json
@@ -46,7 +46,7 @@
     "fp-ts": "^2.16.1",
     "fuse.js": "^7.0.0",
     "hermes-parallel-coordinates": "^0.6.17",
-    "hew": "npm:@hpe.com/hew@^0.6.31",
+    "hew": "npm:@hpe.com/hew@^0.6.32",
     "humanize-duration": "^3.28.0",
     "immutable": "^4.3.0",
     "io-ts": "^2.2.20",

diff --git a/webui/react/src/components/ModelRegistry.module.scss b/webui/react/src/components/ModelRegistry.module.scss
@@ -27,7 +27,6 @@
 }
 .options {
   display: flex;
-  flex-grow: 1;
   justify-content: flex-end;
   padding-bottom: 16px;
 }
diff --git a/webui/react/src/components/Page.module.scss b/webui/react/src/components/Page.module.scss
@@ -10,7 +10,7 @@
     padding: 16px;
   }
   .body {
-    align-items: center;
+    flex-grow: 1;
     flex-shrink: 0;
     height: max-content;
     min-height: 0;
@@ -28,7 +28,6 @@
 
     .body {
       overflow: auto;
-      padding-bottom: 0;
     }
   }
   &.noScroll {

diff --git a/webui/react/src/components/PageHeader/PageHeader.module.scss b/webui/react/src/components/PageHeader/PageHeader.module.scss
@@ -25,7 +25,10 @@
   }
 }
 .sticky {
-  background-color: var(--theme-colors-monochrome-17);
-  border-bottom: solid var(--theme-stroke-width) var(--theme-colors-monochrome-12);
+  background-color: var(--theme-background);
+  border-bottom: solid var(--theme-stroke-width) var(--theme-float-border);
   padding: 16px;
+  position: sticky;
+  top: 0;
+  z-index: 20;
 }
diff --git a/webui/react/src/components/TaskList.module.scss b/webui/react/src/components/TaskList.module.scss
@@ -9,7 +9,6 @@
 }
 .options {
   display: flex;
-  flex-grow: 1;
   justify-content: flex-end;
   padding-bottom: 16px;
 }

diff --git a/webui/react/src/pages/Cluster.module.scss b/webui/react/src/pages/Cluster.module.scss
@@ -1,4 +1,8 @@
 .pivoter {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
   [role='tablist'] > div {
     &:global(.ant-tabs-nav-wrap)::before {
       box-shadow: none;

diff --git a/webui/react/src/pages/ClusterLogs.tsx b/webui/react/src/pages/ClusterLogs.tsx
@@ -30,15 +30,13 @@ const ClusterLogs: React.FC = () => {
   }, []);
 
   return (
-    <div>
-      <LogViewer
-        decoder={jsonToClusterLog}
-        serverAddress={serverAddress}
-        sortKey="id"
-        onError={handleError}
-        onFetch={handleFetch}
-      />
-    </div>
+    <LogViewer
+      decoder={jsonToClusterLog}
+      serverAddress={serverAddress}
+      sortKey="id"
+      onError={handleError}
+      onFetch={handleFetch}
+    />
   );
 };
 

diff --git a/webui/react/src/pages/ExperimentDetails/ExperimentSingleTrialTabs.module.scss b/webui/react/src/pages/ExperimentDetails/ExperimentSingleTrialTabs.module.scss
@@ -1,4 +1,6 @@
 .pivoter {
+  height: 100%;
+
   [role='tablist'] > div {
     &:global(.ant-tabs-nav-wrap)::before {
       box-shadow: none;

diff --git a/webui/react/src/pages/TaskLogs.module.scss b/webui/react/src/pages/TaskLogs.module.scss
@@ -1,3 +1,3 @@
 .filters {
-  padding: 8px 0 0 8px;
+  padding-left: var(--spacing-md);
 }