FE: Fix statistics timer, update theming (#228)

Author: Haarolean

frontend/src/components/Topics/Topic/Statistics/Metrics.tsx

@@ -21,6 +21,7 @@ import * as S from './Statistics.styles';
 import Total from './Indicators/Total';
 import SizeStats from './Indicators/SizeStats';
 import PartitionTable from './PartitionTable';
+import { LabelValue } from './Statistics.styles';
 
 const Metrics: React.FC = () => {
   const params = useAppParams<RouteParamsClusterTopic>();
@@ -67,21 +68,23 @@ const Metrics: React.FC = () => {
         </ActionButton>
         <List>
           <Label>Started at</Label>
-          <span>
+          <LabelValue>
             {formatTimestamp(data.progress.startedAt, {
               hour: 'numeric',
               minute: 'numeric',
               second: 'numeric',
             })}
-          </span>
+          </LabelValue>
           <Label>Passed since start</Label>
-          <span>{calculateTimer(data.progress.startedAt as number)}</span>
+          <LabelValue>
+            {calculateTimer(data.progress.startedAt as number)}
+          </LabelValue>
           <Label>Scanned messages</Label>
-          <span>{data.progress.msgsScanned}</span>
+          <LabelValue>{data.progress.msgsScanned}</LabelValue>
           <Label>Scanned size</Label>
-          <span>
+          <LabelValue>
             <BytesFormatted value={data.progress.bytesScanned} />
-          </span>
+          </LabelValue>
         </List>
       </S.ProgressContainer>
     );

frontend/src/components/Topics/Topic/Statistics/PartitionInfoRow.tsx

@@ -51,7 +51,7 @@ const PartitionInfoRow: React.FC<{ row: Row<TopicAnalysisStats> }> = ({
       <div>
         <Heading level={4}>Keys sizes</Heading>
         <List>
-          <Label>Total keys size</Label>
+          <Label>Total key size</Label>
           <BytesFormatted value={keySize?.sum} />
           <Label>Min key size</Label>
           <BytesFormatted value={keySize?.min} />
@@ -74,7 +74,7 @@ const PartitionInfoRow: React.FC<{ row: Row<TopicAnalysisStats> }> = ({
       <div>
         <Heading level={4}>Values sizes</Heading>
         <List>
-          <Label>Total keys size</Label>
+          <Label>Total key size</Label>
           <BytesFormatted value={valueSize?.sum} />
           <Label>Min key size</Label>
           <BytesFormatted value={valueSize?.min} />

frontend/src/components/Topics/Topic/Statistics/Statistics.styles.ts

@@ -27,7 +27,7 @@ export const ActionsBar = styled.div`
 export const CreatedAt = styled.div`
   font-size: 12px;
   line-height: 1.5;
-  color: ${({ theme }) => theme.statictics.createdAtColor};
+  color: ${({ theme }) => theme.statistics.createdAtColor};
 `;
 
 export const PartitionInfo = styled.div`
@@ -47,5 +47,9 @@ export const ProgressPct = styled.span`
   font-size: 15px;
   font-weight: bold;
   line-height: 1.5;
-  color: ${({ theme }) => theme.statictics.progressPctColor};
+  color: ${({ theme }) => theme.statistics.progressPctColor};
+`;
+
+export const LabelValue = styled.span`
+  color: ${({ theme }) => theme.statistics.createdAtColor};
 `;

frontend/src/lib/dateTimeHelpers.ts

@@ -43,11 +43,15 @@ export const formatMilliseconds = (input = 0) => {
 export const passedTime = (value: number) => (value < 10 ? `0${value}` : value);
 
 export const calculateTimer = (startedAt: number) => {
-  const nowDate = new Date();
-  const now = nowDate.getTime();
-  const newDate = now - startedAt;
-  const minutes = nowDate.getMinutes();
-  const second = nowDate.getSeconds();
+  const now = new Date().getTime();
+  const elapsedMillis = now - startedAt;
 
-  return newDate > 0 ? `${passedTime(minutes)}:${passedTime(second)}` : '00:00';
+  if (elapsedMillis < 0) {
+    return '00:00';
+  }
+
+  const seconds = Math.floor(elapsedMillis / 1000) % 60;
+  const minutes = Math.floor(elapsedMillis / 60000);
+
+  return `${passedTime(minutes)}:${passedTime(seconds)}`;
 };

frontend/src/theme/theme.ts

@@ -263,17 +263,17 @@ const baseTheme = {
     color: Colors.neutral[90],
   },
   switch: {
-    unchecked: Colors.neutral[20],
+    unchecked: Colors.brand[30],
     hover: Colors.neutral[40],
-    checked: Colors.brand[50],
+    checked: Colors.brand[90],
     circle: Colors.neutral[0],
-    disabled: Colors.neutral[10],
+    disabled: Colors.brand[10],
     checkedIcon: {
       backgroundColor: Colors.neutral[10],
     },
   },
   pageLoader: {
-    borderColor: Colors.brand[50],
+    borderColor: Colors.brand[90],
     borderBottomColor: Colors.neutral[0],
   },
   topicFormLabel: {
@@ -304,7 +304,7 @@ const baseTheme = {
       active: Colors.neutral[10],
     },
   },
-  statictics: {
+  statistics: {
     createdAtColor: Colors.neutral[50],
     progressPctColor: Colors.neutral[100],
   },
@@ -1044,6 +1044,16 @@ export const darkTheme: ThemeType = {
       active: Colors.neutral[0],
     },
   },
+  switch: {
+    unchecked: Colors.brand[30],
+    hover: Colors.neutral[40],
+    checked: Colors.brand[70],
+    circle: Colors.neutral[0],
+    disabled: Colors.brand[10],
+    checkedIcon: {
+      backgroundColor: Colors.neutral[10],
+    },
+  },
   select: {
     backgroundColor: {
       normal: Colors.neutral[85],