Sidebar Inspector

apps/zui/pages/detail.tsx

@@ -8,7 +8,7 @@ import initialize from "src/js/initializers/initialize"
 import TabHistories from "src/js/state/TabHistories"
 import Tabs from "src/js/state/Tabs"
 import {getPersistedWindowState} from "src/js/state/stores/get-persistable"
-import DetailPane from "src/views/detail-pane/Pane"
+import {DetailPane} from "src/views/detail-pane"
 
 export default function DetailPage() {
   const [app, setApp] = useState(null)
@@ -34,7 +34,7 @@ export default function DetailPage() {
   return (
     <AppProvider store={app.store} api={app.api}>
       <AppWindowRouter>
-        <div className="scroll-y">
+        <div className="detail-window scroll-y w-full h-full overflow-hidden">
           <DetailPane />
         </div>
         <Modals />

apps/zui/src/components/empty-text.tsx

@@ -0,0 +1,7 @@
+export function EmptyText({children}) {
+  return (
+    <p className="h-full w-full flex-center text-center text-less box">
+      {children}
+    </p>
+  )
+}

apps/zui/src/components/icon/icon-names.ts

@@ -55,6 +55,7 @@ export const iconNames = {
   layout_leftbar_open: "layout_leftbar_open",
   layout_leftbar_close: "layout_leftbar_close",
   file_upload: "file_upload",
+  external_link: "external_link",
 }
 
 export const customIconNames = {

apps/zui/src/css/_detail-window.scss

@@ -0,0 +1,3 @@
+.detail-window header {
+  display: none;
+}

apps/zui/src/css/_layouts.scss

@@ -1,139 +1,88 @@
-[class^="cluster"] {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--s1);
-    justify-content: flex-start;
-    align-items: center;
-}
-
-.cluster--4 {
-    gap: var(--s-4);
-}
-
-.cluster--3 {
-    gap: var(--s-3);
-}
-
-.cluster--2 {
-    gap: var(--s-2);
-}
-
-.cluster--1 {
-    gap: var(--s-1);
-}
-
-.cluster-0 {
-    gap: var(--s0);
-}
-
-.cluster-1 {
-    gap: var(--s1);
-}
-
-.cluster-2 {
-    gap: var(--s2);
-}
-
-.cluster-3 {
-    gap: var(--s3);
-}
-
-.cluster-4 {
-    gap: var(--s4);
-}
-
-.cluster-5 {
-    gap: var(--s5);
-}
-
-
-
-
 [class^="stack"] {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
 }
 
-[class^="stack"]>* {
-    margin-block: 0;
+[class^="stack"] > * {
+  margin-block: 0;
 }
 
-.stack--5>*+* {
-    margin-block-start: var(--s-5);
+.stack--5 > * + * {
+  margin-block-start: var(--s-5);
 }
 
-.stack--4>*+* {
-    margin-block-start: var(--s-4);
+.stack--4 > * + * {
+  margin-block-start: var(--s-4);
 }
 
-.stack--3>*+* {
-    margin-block-start: var(--s-3);
+.stack--3 > * + * {
+  margin-block-start: var(--s-3);
 }
 
-.stack--2>*+* {
-    margin-block-start: var(--s-2);
+.stack--2 > * + * {
+  margin-block-start: var(--s-2);
 }
 
-.stack--1>*+* {
-    margin-block-start: var(--s-1);
+.stack--1 > * + * {
+  margin-block-start: var(--s-1);
 }
 
-.stack-0>*+* {
-    margin-block-start: var(--s0);
+.stack-0 > * + * {
+  margin-block-start: var(--s0);
 }
 
-.stack-1>*+* {
-    margin-block-start: var(--s1);
+.stack-1 > * + * {
+  margin-block-start: var(--s1);
 }
 
-.stack-2>*+* {
-    margin-block-start: var(--s2);
+.stack-2 > * + * {
+  margin-block-start: var(--s2);
 }
 
-.stack-3>*+* {
-    margin-block-start: var(--s3);
+.stack-3 > * + * {
+  margin-block-start: var(--s3);
 }
 
-.stack-4>*+* {
-    margin-block-start: var(--s4);
+.stack-4 > * + * {
+  margin-block-start: var(--s4);
 }
 
-.stack-5>*+* {
-    margin-block-start: var(--s5);
+.stack-5 > * + * {
+  margin-block-start: var(--s5);
 }
 
-.stack-6>*+* {
-    margin-block-start: var(--s6);
+.stack-6 > * + * {
+  margin-block-start: var(--s6);
 }
 
-.stack-7>*+* {
-    margin-block-start: var(--s7);
+.stack-7 > * + * {
+  margin-block-start: var(--s7);
 }
 
-.stack-8>*+* {
-    margin-block-start: var(--s8);
+.stack-8 > * + * {
+  margin-block-start: var(--s8);
 }
 
 .box-s {
-    padding: var(--s1);
+  padding: var(--s1);
 }
 
 .box-1 {
-    padding: var(--s1);
+  padding: var(--s1);
 }
 
 .center {
-    margin-inline: auto;
+  margin-inline: auto;
 }
 
 .flex {
-    display: flex;
+  display: flex;
 }
 
 .with-popover {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding-block-start: 10vh;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-block-start: 10vh;
 }

apps/zui/src/css/_utilities.scss

@@ -150,7 +150,8 @@
   font-family: var(--mono-font);
 }
 
-.color\:fg-less {
+.color\:fg-less,
+.text-less {
   color: var(--fg-color-less);
 }
 
@@ -243,6 +244,18 @@
   width: 100%;
 }
 
+.w-fit {
+  width: fit-content;
+}
+
 .h-full {
   height: 100%;
 }
+
+.debug-red {
+  outline: 1px dashed red;
+}
+
+.debug-blue {
+  outline: 1px dashed blue;
+}

apps/zui/src/css/compositions/_cluster.scss

@@ -0,0 +1,5 @@
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}

apps/zui/src/css/compositions/_flex-center.scss

@@ -0,0 +1,5 @@
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

apps/zui/src/css/compositions/_panels.scss

@@ -0,0 +1,30 @@
+.panels {
+  display: flex;
+  overflow: hidden;
+
+  block-size: 100%;
+
+  & > *:not(.principle) {
+    flex-shrink: 0;
+  }
+
+  & > .principle {
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  &.vertical {
+    flex-direction: column;
+    block-size: 100%;
+    &.principle {
+      min-block-size: 0;
+    }
+  }
+
+  &.horizontal {
+    inline-size: 100%;
+    &.prinicple {
+      min-inline-size: 0;
+    }
+  }
+}

apps/zui/src/css/main.scss

@@ -33,6 +33,9 @@
 @import "compositions/repel";
 @import "compositions/stack";
 @import "compositions/switcher";
+@import "compositions/panels";
+@import "compositions/cluster";
+@import "compositions/flex-center";
 
 /* Blocks */
 @import "buttons";
@@ -77,7 +80,7 @@
 @import "about-window";
 @import "tab-search-loading";
 @import "ingest-warnings-modal";
-@import "log-detail-window";
+@import "detail-window";
 @import "sidebar";
 @import "history-buttons";
 @import "x-button";

apps/zui/src/css/utilities/_flex.scss

@@ -22,3 +22,7 @@
   flex-shrink: 0;
   flex-grow: 0;
 }
+
+.direction-column {
+  flex-direction: column;
+}

apps/zui/src/views/columns-pane/columns-tree.tsx

@@ -4,7 +4,7 @@ import {ListItem} from "src/components/list-item"
 import {NodeRendererProps, Tree} from "react-arborist"
 import {FillFlexParent} from "src/components/fill-flex-parent"
 import classNames from "classnames"
-import {EmptyText} from "src/views/right-pane/common"
+import {EmptyText} from "src/components/empty-text"
 import {useSelector} from "react-redux"
 import Table from "src/js/state/Table"
 import {TableColumn} from "src/js/state/Table/selectors"

apps/zui/src/views/correlations-pane/index.tsx

@@ -10,7 +10,7 @@ import {Correlation} from "src/ppl/detail/models/Correlation"
 import {SuricataEvent} from "src/ppl/detail/models/SuricataEvent"
 import {ZeekEvent} from "src/ppl/detail/models/ZeekEvent"
 import {SecurityEvent} from "src/ppl/detail/models/security-event"
-import {EmptyText} from "../right-pane/common"
+import {EmptyText} from "src/components/empty-text"
 
 export function CorrelationsPane() {
   const record = useSelector(LogDetails.build)