nit styling updates

netobserv · Mar 20, 2023 · 7293f45 · 7293f45
1 parent b7d39a5
commit 7293f45
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 6 deletions.
diff --git a/web/locales/en/plugin__netobserv-plugin.json b/web/locales/en/plugin__netobserv-plugin.json
@@ -138,6 +138,7 @@
   "Zoom buttons": "Zoom buttons",
   "Arrow buttons": "Arrow buttons",
   "Page buttons": "Page buttons",
+  "Number of logs over time": "Number of logs over time",
   "No datapoints found in the selected time range": "No datapoints found in the selected time range",
   "Reset time range and try again.": "Reset time range and try again.",
   "Reset time range": "Reset time range",

diff --git a/web/src/components/metrics/histogram.css b/web/src/components/metrics/histogram.css
@@ -6,6 +6,7 @@
   right: 1.5rem;
   justify-content: center;
   margin: 0;
+  padding: 0.25rem 0.5rem 0 0.5rem;
   z-index: 999;
 }
 

diff --git a/web/src/components/metrics/histogram.tsx b/web/src/components/metrics/histogram.tsx
@@ -82,7 +82,7 @@ export const Histogram: React.FC<{
     animationWhitelist: ['data', 'domain']
   };
 
-  const [dimensions, setDimensions] = React.useState<Dimensions>({ width: 3000, height: 130 });
+  const [dimensions, setDimensions] = React.useState<Dimensions>({ width: 3000, height: 150 });
   React.useEffect(() => {
     observe(containerRef, dimensions, setDimensions);
   }, [containerRef, dimensions]);
@@ -241,7 +241,9 @@ export const Histogram: React.FC<{
       onKeyDown={e => onKeyDown(e.key)}
     >
       <Flex className="histogram-range-container" direction={{ default: 'row' }}>
-        <FlexItem flex={{ default: 'flex_1' }} />
+        <FlexItem flex={{ default: 'flex_1' }}>
+          <Text>{t('Number of logs over time')}</Text>
+        </FlexItem>
         <FlexItem>
           <Tooltip
             content={arrowButtonTips()}
@@ -395,9 +397,9 @@ export const Histogram: React.FC<{
         width={dimensions.width}
         height={dimensions.height}
         padding={{
-          top: 30,
+          top: 45,
           right: 25,
-          bottom: 35,
+          bottom: 40,
           left: 60
         }}
       >

diff --git a/web/src/components/netflow-table/netflow-table-header.tsx b/web/src/components/netflow-table/netflow-table-header.tsx
@@ -229,7 +229,11 @@ export const NetflowTableHeader: React.FC<{
   }, [columns]);
 
   return (
-    <Thead data-test="thead" hasNestedHeader={headersState.useNested}>
+    <Thead
+      className={`${isDark ? 'dark' : 'light'}-bottom-shadow`}
+      data-test="thead"
+      hasNestedHeader={headersState.useNested}
+    >
       {headersState.useNested && <Tr>{headersState.nestedHeaders.map(nh => getNestedTableHeader(nh))}</Tr>}
       <Tr data-test="thead-tr">{headersState.headers.map(c => getTableHeader(c))}</Tr>
     </Thead>

diff --git a/web/src/components/netflow-traffic.css b/web/src/components/netflow-traffic.css
@@ -133,7 +133,7 @@ span.pf-c-button__icon.pf-m-start {
 
 /* histogram is maximum 2x standard toolbar height */
 #histogram-toolbar {
-    max-height: 130px;
+    max-height: 150px;
 }
 
 #histogram-toolbar,
@@ -204,10 +204,28 @@ span.pf-c-button__icon.pf-m-start {
     margin: 0;
 }
 
+/* outside bottom border */
 .light-bottom-border {
+    margin: 0 !important;
+    align-self: flex-end;
     border-bottom: 1px #d2d2d2 solid;
 }
 
 .dark-bottom-border {
+    margin: 0 !important;
+    align-self: flex-end;
     border-bottom: 1px #444548 solid;
+}
+
+/* inside bottom border */
+.light-bottom-shadow {
+    -webkit-box-shadow: inset 0 -1px 0 0 #d2d2d2;
+    -moz-box-shadow: inset 0 -1px 0 0 #d2d2d2;
+    box-shadow: inset 0 -1px 0 0 #d2d2d2;
+}
+
+.dark-bottom-shadow {
+    -webkit-box-shadow: inset 0 -1px 0 0 #444548;
+    -moz-box-shadow: inset 0 -1px 0 0 #444548;
+    box-shadow: inset 0 -1px 0 0 #444548;
 }