diff --git a/frontend/src/components/Topics/Topic/Statistics/Metrics.tsx b/frontend/src/components/Topics/Topic/Statistics/Metrics.tsx index 69da71c31..f24d6bf5e 100644 --- a/frontend/src/components/Topics/Topic/Statistics/Metrics.tsx +++ b/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(); @@ -67,21 +68,23 @@ const Metrics: React.FC = () => { - + {formatTimestamp(data.progress.startedAt, { hour: 'numeric', minute: 'numeric', second: 'numeric', })} - + - {calculateTimer(data.progress.startedAt as number)} + + {calculateTimer(data.progress.startedAt as number)} + - {data.progress.msgsScanned} + {data.progress.msgsScanned} - + - + ); diff --git a/frontend/src/components/Topics/Topic/Statistics/PartitionInfoRow.tsx b/frontend/src/components/Topics/Topic/Statistics/PartitionInfoRow.tsx index 51c1f85c2..0646f02e0 100644 --- a/frontend/src/components/Topics/Topic/Statistics/PartitionInfoRow.tsx +++ b/frontend/src/components/Topics/Topic/Statistics/PartitionInfoRow.tsx @@ -51,7 +51,7 @@ const PartitionInfoRow: React.FC<{ row: Row }> = ({
Keys sizes - + @@ -74,7 +74,7 @@ const PartitionInfoRow: React.FC<{ row: Row }> = ({
Values sizes - + diff --git a/frontend/src/components/Topics/Topic/Statistics/Statistics.styles.ts b/frontend/src/components/Topics/Topic/Statistics/Statistics.styles.ts index ca98cdcbf..ad387cb8d 100644 --- a/frontend/src/components/Topics/Topic/Statistics/Statistics.styles.ts +++ b/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}; `; diff --git a/frontend/src/lib/dateTimeHelpers.ts b/frontend/src/lib/dateTimeHelpers.ts index 148a70d2a..ee082fdd1 100644 --- a/frontend/src/lib/dateTimeHelpers.ts +++ b/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)}`; }; diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts index ba1cc357f..53293da32 100644 --- a/frontend/src/theme/theme.ts +++ b/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],