Skip to content

Commit ac35b00

Browse files
author
Trey Ivy
committed
number format cleanuo
1 parent 43d0ef6 commit ac35b00

File tree

12 files changed

+113
-64
lines changed

12 files changed

+113
-64
lines changed

‎frontend/src/app/trends/page.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,11 @@ const Page: React.FC = () => {
8080
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
8181
<PortalCard
8282
icon={<LineChartOutlined />}
83-
titleBits={[<span key="title">Trends</span>]}
84-
>
85-
<PortalCard icon={<ClockCircleFilled />} titleBits={[<span>Invocation Durations <Badge count={data?.findBazelInvocations.totalCount} /> </span>]}>
83+
titleBits={[<span key="title">Trends</span>]}>
84+
<PortalCard
85+
type='inner'
86+
icon={<ClockCircleFilled />}
87+
titleBits={[<span>Invocation Durations <Badge count={data?.findBazelInvocations.totalCount} /> </span>]}>
8688
<Row>
8789
<Space size="large">
8890
<Statistic title="Average" value={avg} formatter={formatter} valueStyle={{ color: "#82ca9d" }} />

‎frontend/src/components/ActionCacheMetrics/index.tsx

+17-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useCallback, useState } from "react";
22
import { PieChart, Pie, Cell, Legend, BarChart, Bar, LabelList } from 'recharts';
3-
import { Table, Row, Col, Statistic, Tooltip, Space, Typography } from 'antd';
3+
import { Table, Row, Col, Statistic, Tooltip, Space } from 'antd';
44
import type { StatisticProps, TableColumnsType } from "antd/lib";
55
import CountUp from 'react-countup';
66
import { ActionCacheStatistics, ActionSummary, MissDetail } from "@/graphql/__generated__/graphql";
@@ -10,6 +10,7 @@ import { renderActiveShape } from "../Utilities/renderShape"
1010
import { nullPercent } from "../Utilities/nullPercent";
1111
import "./index.module.css"
1212
import MissDetailTag, { MissDetailEnum } from "./ActionCacheMissTag";
13+
import styles from "../../theme/theme.module.css"
1314
interface MissDetailDisplayDataType {
1415
key: React.Key;
1516
name: string;
@@ -23,13 +24,13 @@ const formatter: StatisticProps['formatter'] = (value) => (
2324

2425
var ac_colors =
2526
[
26-
"grey", //unknown
27-
"blue", //different action key
28-
"pink", //different deps
29-
"purple", //different env
30-
"cyan", //diff files
31-
"orange", //corrupted cache entry
32-
"red"] //not cached
27+
"grey", //unknown
28+
"blue", //different action key
29+
"pink", //different deps
30+
"purple", //different env
31+
"cyan", //diff files
32+
"orange", //corrupted cache entry
33+
"red"] //not cached
3334

3435
const ac_columns: TableColumnsType<MissDetailDisplayDataType> = [
3536
{
@@ -41,11 +42,16 @@ const ac_columns: TableColumnsType<MissDetailDisplayDataType> = [
4142
{
4243
title: "Count",
4344
dataIndex: "value",
45+
align: "right",
46+
defaultSortOrder: "descend",
47+
render: (_, record) => <span className={styles.numberFormat}>{record.value}</span>,
4448
sorter: (a, b) => a.value - b.value,
4549
},
4650
{
4751
title: "Rate (%)",
4852
dataIndex: "rate",
53+
align: "right",
54+
render: (_, record) => <span className={styles.numberFormat}>{record.rate}</span>,
4955
sorter: (a, b) => parseFloat(a.rate) - parseFloat(b.rate),
5056
}
5157
]
@@ -94,7 +100,7 @@ const AcMetrics: React.FC<{ acMetrics: ActionSummary | undefined; }> = ({ acMetr
94100

95101
return (
96102
<Space direction="vertical" size="middle" style={{ display: 'flex' }} >
97-
<PortalCard icon={<DashboardOutlined />} titleBits={acTitle} >
103+
<PortalCard type="inner" icon={<DashboardOutlined />} titleBits={acTitle} >
98104
<Row>
99105
<Space size="large">
100106
<BarChart width={170} height={150} data={hits_data} margin={{ top: 0, left: 10, bottom: 10, right: 10 }}>
@@ -117,7 +123,7 @@ const AcMetrics: React.FC<{ acMetrics: ActionSummary | undefined; }> = ({ acMetr
117123
</Row>
118124
<Row justify="space-around" align="top" >
119125
<Col span="12">
120-
<PortalCard icon={<PieChartOutlined />} titleBits={["Miss Detail Breakdown"]}>
126+
<PortalCard type="inner" icon={<PieChartOutlined />} titleBits={["Miss Detail Breakdown"]}>
121127
<PieChart width={600} height={500}>
122128

123129
<Pie
@@ -143,7 +149,7 @@ const AcMetrics: React.FC<{ acMetrics: ActionSummary | undefined; }> = ({ acMetr
143149

144150
</Col>
145151
<Col span="12">
146-
<PortalCard icon={<HddOutlined />} titleBits={["Miss Detail Data"]}>
152+
<PortalCard type="inner" icon={<HddOutlined />} titleBits={["Miss Detail Data"]}>
147153
<Table
148154
columns={ac_columns}
149155
dataSource={ac_data}

‎frontend/src/components/ActionDataMetrics/index.tsx

+19-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import CountUp from 'react-countup';
77
import { ActionSummary, ActionData } from "@/graphql/__generated__/graphql";
88
import PortalCard from "../PortalCard";
99
import { renderActiveShape, newColorFind } from "../Utilities/renderShape"
10+
import styles from "../../theme/theme.module.css"
11+
import PortalDuration from "../PortalDuration";
1012
interface ActionDataGraphDisplayType {
1113
key: React.Key;
1214
name: string;
@@ -37,31 +39,43 @@ const ad_columns: TableColumnsType<ActionDataColumnType> = [
3739
{
3840
title: "Actions Executed",
3941
dataIndex: "actionsExecuted",
42+
align: "right",
43+
render: (_, record) => <span className={styles.numberFormat}>{record.actionsExecuted}</span>,
4044
sorter: (a, b) => (a.actionsExecuted ?? 0) - (b.actionsExecuted ?? 0),
4145
},
4246
{
4347
title: "Actions Created",
4448
dataIndex: "actionsCreated",
49+
align: "right",
50+
render: (_, record) => <span className={styles.numberFormat}>{record.actionsCreated}</span>,
4551
sorter: (a, b) => (a.actionsCreated ?? 0) - (b.actionsCreated ?? 0),
4652
},
4753
{
4854
title: "First Started(ms)",
4955
dataIndex: "firstStartedMs",
56+
align: "right",
57+
render: (_, record) => <span className={styles.numberFormat}>{record.firstStartedMs}</span>,
5058
sorter: (a, b) => (a.firstStartedMs ?? 0) - (b.firstStartedMs ?? 0),
5159
},
5260
{
5361
title: "Last Ended(ms)",
5462
dataIndex: "lastEndedMs",
63+
align: "right",
64+
render: (_, record) => <span className={styles.numberFormat}>{record.lastEndedMs}</span>,
5565
sorter: (a, b) => (a.lastEndedMs ?? 0) - (b.lastEndedMs ?? 0),
5666
},
5767
{
5868
title: "System Time(ms)",
5969
dataIndex: "systemTime",
70+
align: "right",
71+
render: (_, record) => <span className={styles.numberFormat}>{record.systemTime}</span>,
6072
sorter: (a, b) => (a.systemTime ?? 0) - (b.systemTime ?? 0),
6173
},
6274
{
6375
title: "User Time(ms)",
6476
dataIndex: "userTime",
77+
align: "right",
78+
render: (_, record) => <span className={styles.numberFormat}>{record.userTime}</span>,
6579
sorter: (a, b) => (a.userTime ?? 0) - (b.userTime ?? 0),
6680
},
6781
]
@@ -104,7 +118,7 @@ const ActionDataMetrics: React.FC<{ acMetrics: ActionSummary | undefined; }> = (
104118

105119
return (
106120
<Space direction="vertical" size="middle" style={{ display: 'flex' }} >
107-
<PortalCard icon={<PieChart />} titleBits={["Actions"]}>
121+
<PortalCard icon={<PieChart />} type="inner" titleBits={["Actions"]}>
108122
<Row>
109123
<Space size={"large"}>
110124
<Statistic title="Actions Executed" value={totalActionsExecuted} formatter={formatter} />
@@ -115,16 +129,17 @@ const ActionDataMetrics: React.FC<{ acMetrics: ActionSummary | undefined; }> = (
115129
</Row>
116130
<Row justify="space-around" align="top">
117131
<Col span="14">
118-
<PortalCard icon={<BuildOutlined />} titleBits={["Actions Data"]}>
132+
<PortalCard type="inner" icon={<BuildOutlined />} titleBits={["Actions Data"]}>
119133
<Table
120134
columns={ad_columns}
121135
dataSource={actions_data}
122136
showSorterTooltip={{ target: 'sorter-icon' }}
123137
/>
124138
</PortalCard>
125139
</Col>
126-
<Col span="10">
127-
<PortalCard icon={<PieChartOutlined />} titleBits={["User Time(ms)"]}>
140+
<Col span="1" />
141+
<Col span="9">
142+
<PortalCard type="inner" icon={<PieChartOutlined />} titleBits={["User Time(ms)"]}>
128143
<PieChart width={600} height={556}>
129144
<Pie
130145
activeIndex={activeIndexRunner}

‎frontend/src/components/Artifacts/index.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import { Table, Row, Col, Space } from 'antd';
33
import type { TableColumnsType } from "antd/lib";
44
import { ArtifactMetrics } from "@/graphql/__generated__/graphql";
55
import PortalCard from "../PortalCard";
6-
import {
7-
RadiusUprightOutlined
8-
9-
} from "@ant-design/icons";
6+
import { RadiusUprightOutlined } from "@ant-design/icons";
7+
import styles from "../../theme/theme.module.css"
8+
import { record } from "zod";
109

1110

1211
const artifacts_columns: TableColumnsType<ArtifactMetricsTableData> = [
@@ -17,11 +16,15 @@ const artifacts_columns: TableColumnsType<ArtifactMetricsTableData> = [
1716
{
1817
title: "Size (bytes)",
1918
dataIndex: "sizeInBytes",
19+
align: "right",
20+
render: (_, record) => <span className={styles.numberFormat} >{record.sizeInBytes}</span>,
2021
sorter: (a, b) => (a.sizeInBytes ?? 0) - (b.sizeInBytes ?? 0),
2122
},
2223
{
2324
title: "Count",
2425
dataIndex: "count",
26+
align: "right",
27+
render: (_, record) => <span className={styles.numberFormat} >{record.count}</span>,
2528
sorter: (a, b) => (a.count ?? 0) - (b.count ?? 0),
2629
},
2730
]
@@ -64,7 +67,7 @@ const ArtifactsDataMetrics: React.FC<{ artifactMetrics: ArtifactMetrics | undefi
6467

6568
return (
6669
<Space direction="vertical" size="middle" style={{ display: 'flex' }} >
67-
<PortalCard icon={<RadiusUprightOutlined />} titleBits={actionsTitle}>
70+
<PortalCard type="inner" icon={<RadiusUprightOutlined />} titleBits={actionsTitle}>
6871
<Row justify="space-around" align="middle">
6972
<Col span="18">
7073
<Table

‎frontend/src/components/MemoryMetrics/index.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { MemoryMetrics, GarbageMetrics } from "@/graphql/__generated__/graphql";
77
import PortalCard from "../PortalCard";
88
import { PieChartOutlined, HddOutlined } from "@ant-design/icons";
99
import { renderActiveShape, newColorFind } from "../Utilities/renderShape";
10+
import styles from "../../theme/theme.module.css"
1011

1112
interface GarbageMetricDetailDisplayType {
1213
key: React.Key;
@@ -29,6 +30,8 @@ const garbage_columns: TableColumnsType<GarbageMetricDetailDisplayType> = [
2930
title: "Garbage Collected",
3031
dataIndex: "value",
3132
sorter: (a, b) => a.value - b.value,
33+
align: "right",
34+
render: (_, record) => <span className={styles.numberFormat}>{record.value}</span>
3235
},
3336
]
3437

@@ -55,7 +58,7 @@ const MemoryMetricsDisplay: React.FC<{ memoryMetrics: MemoryMetrics | undefined;
5558

5659
return (
5760
<Space direction="vertical" size="middle" style={{ display: 'flex' }} >
58-
<PortalCard icon={<PieChartOutlined />} titleBits={["Memory Metrics"]} >
61+
<PortalCard type="inner" icon={<PieChartOutlined />} titleBits={["Memory Metrics"]} >
5962
<Row>
6063
<Space size="large">
6164
<Statistic title="Peak Post GC Heap Size" value={memoryMetrics?.peakPostGcHeapSize ?? 0} formatter={formatter} />
@@ -65,7 +68,7 @@ const MemoryMetricsDisplay: React.FC<{ memoryMetrics: MemoryMetrics | undefined;
6568
</Row>
6669
<Row justify="space-around" align="top">
6770
<Col span="12">
68-
<PortalCard icon={<PieChartOutlined />} titleBits={["Garbage Collection Breakdown"]}>
71+
<PortalCard type="inner" icon={<PieChartOutlined />} titleBits={["Garbage Collection Breakdown"]}>
6972
<PieChart width={500} height={500}>
7073

7174
<Pie
@@ -90,7 +93,7 @@ const MemoryMetricsDisplay: React.FC<{ memoryMetrics: MemoryMetrics | undefined;
9093
</PortalCard>
9194
</Col>
9295
<Col span="12">
93-
<PortalCard icon={<HddOutlined />} titleBits={["Gargage Collection Data"]}>
96+
<PortalCard type="inner" icon={<HddOutlined />} titleBits={["Gargage Collection Data"]}>
9497
<Table
9598
columns={garbage_columns}
9699
dataSource={garbage_data}

‎frontend/src/components/RunnerMetrics/index.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { renderActiveShape } from "../Utilities/renderShape";
88
import { nullPercent } from "../Utilities/nullPercent";
99
import PortalCard from "../PortalCard";
1010
import { BaseType } from "antd/es/typography/Base";
11+
import styles from "../../theme/theme.module.css"
1112

1213
interface RunnerDataType {
1314
key: React.Key;
@@ -45,11 +46,15 @@ const runner_columns: TableColumnsType<RunnerDataType> = [
4546
{
4647
title: 'Count',
4748
dataIndex: 'value',
49+
align: "right",
50+
render: (_, record) => <span className={styles.numberFormat} >{record.value}</span>,
4851
sorter: (a, b) => a.value - b.value,
4952
},
5053
{
5154
title: 'Rate (%)',
5255
dataIndex: 'rate',
56+
align: "right",
57+
render: (_, record) => <span className={styles.numberFormat} >{record.rate}</span>,
5358
sorter: (a, b) => parseFloat(a.rate) - parseFloat(b.rate),
5459
},
5560
];
@@ -116,7 +121,7 @@ const RunnerMetrics: React.FC<{ runnerMetrics: RunnerCount[]; }> = ({ runnerMetr
116121

117122
<Row justify="space-around" align="top">
118123
<Col span="10">
119-
<PortalCard icon={<PieChartOutlined />} titleBits={["Action Runners Breakdown"]}>
124+
<PortalCard type="inner" icon={<PieChartOutlined />} titleBits={["Action Runners Breakdown"]}>
120125
<PieChart width={500} height={500}>
121126
<Pie
122127
activeIndex={activeIndexRunner}
@@ -140,7 +145,7 @@ const RunnerMetrics: React.FC<{ runnerMetrics: RunnerCount[]; }> = ({ runnerMetr
140145
</PortalCard>
141146
</Col>
142147
<Col span="12">
143-
<PortalCard icon={<PlayCircleOutlined />} titleBits={["Action Runner Data"]}>
148+
<PortalCard type="inner" icon={<PlayCircleOutlined />} titleBits={["Action Runner Data"]}>
144149
<Table
145150
columns={runner_columns}
146151
dataSource={runner_data}

‎frontend/src/components/TargetMetrics/index.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import PortalCard from "../PortalCard";
88
import { SearchFilterIcon, SearchWidget } from '@/components/SearchWidgets';
99
import NullBooleanTag from "../NullableBooleanTag";
1010
import TargetAbortReasonTag, { AbortReasonsEnum } from "./targetAbortReasonTag";
11+
import styles from "../../theme/theme.module.css"
1112

1213
interface TargetDataType {
1314
key: React.Key;
@@ -78,8 +79,10 @@ const TargetMetricsDisplay: React.FC<{
7879
onFilter: (value, record) => (record.name.includes(value.toString()) ? true : false)
7980
},
8081
{
81-
title: "Duration(ms)",
82+
title: "Duration",
8283
dataIndex: "value",
84+
align: "right",
85+
render: (_, record) => <span className={styles.numberFormat}>{record.value}</span>,
8386
sorter: (a, b) => a.value - b.value,
8487
},
8588
{
@@ -168,7 +171,7 @@ const TargetMetricsDisplay: React.FC<{
168171

169172
return (
170173
<Space direction="vertical" size="middle" style={{ display: 'flex' }} >
171-
<PortalCard icon={<DeploymentUnitOutlined />} titleBits={["Targets"]}>
174+
<PortalCard type="inner" icon={<DeploymentUnitOutlined />} titleBits={["Targets"]}>
172175
<Row>
173176
<Space size="large">
174177
<Statistic title="Targets Analyzed" value={targets_analyzed} formatter={formatter} />

‎frontend/src/components/TestGrid/index.tsx

+8-20
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,12 @@ import { GetTestsWithOffsetQueryVariables } from '@/graphql/__generated__/graphq
1414
import TestGridRow from '../TestGridRow';
1515
import PortalAlert from '../PortalAlert';
1616
import Link from 'next/link';
17-
import styles from "../PortalDuration/index.module.css"
18-
17+
import styles from "../../theme/theme.module.css"
18+
import { millisecondsToTime } from '../Utilities/time';
1919
interface Props {
2020
//labelData: GetTestsWithOffsetQuery | undefined
2121
}
2222

23-
function millisecondsToTime(milliseconds: number): string {
24-
const totalSeconds = Math.floor(milliseconds / 1000);
25-
const hours = Math.floor(totalSeconds / 3600);
26-
const minutes = Math.floor((totalSeconds % 3600) / 60);
27-
const seconds = totalSeconds % 60;
28-
const remainingMilliseconds = Math.floor(milliseconds % 1000);
29-
30-
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}:${pad(remainingMilliseconds, 3)}`;
31-
}
32-
33-
function pad(num: number, size: number = 2): string {
34-
return num.toString().padStart(size, '0');
35-
}
3623
const formatter: StatisticProps['formatter'] = (value) => (
3724
<CountUp end={value as number} separator="," />
3825
);
@@ -70,31 +57,32 @@ const columns: TableColumnsType<TestGridRowDataType> = [
7057
title: "Average Duration",
7158
dataIndex: "average_duration",
7259
//sorter: (a, b) => a.average_duration - b.average_duration,
73-
render: (_, record) => <span className={styles.duration}>{millisecondsToTime(record.average_duration)}</span>
60+
render: (_, record) => <span className={styles.numberFormat}>{millisecondsToTime(record.average_duration)}</span>
7461
},
7562
{
7663
title: "Min Duration",
7764
dataIndex: "min_duration",
7865
//sorter: (a, b) => a.average_duration - b.average_duration,
79-
render: (_, record) => <span className={styles.duration}>{millisecondsToTime(record.min_duration)}</span>
66+
render: (_, record) => <span className={styles.numberFormat}>{millisecondsToTime(record.min_duration)}</span>
8067
},
8168
{
8269
title: "Max Duration",
8370
dataIndex: "max_duration",
8471
//sorter: (a, b) => a.average_duration - b.average_duration,
85-
render: (_, record) => <span className={styles.duration}>{millisecondsToTime(record.max_duration)}</span>
72+
render: (_, record) => <span className={styles.numberFormat}>{millisecondsToTime(record.max_duration)}</span>
8673
},
8774
{
8875
title: "# Runs",
8976
dataIndex: "total_count",
90-
align: "center"
77+
align: "right",
78+
render: (_, record) => <span className={styles.numberFormat}>{record.total_count}</span>,
9179
//sorter: (a, b) => a.total_count - b.total_count,
9280
},
9381
{
9482
title: "Pass Rate",
9583
dataIndex: "pass_rate",
9684
//sorter: (a, b) => a.pass_rate - b.pass_rate,
97-
render: (_, record) => (record.pass_rate * 100).toFixed(2) + "%"
85+
render: (_, record) => <span className={styles.numberFormat}> {(record.pass_rate * 100).toFixed(2)}%</span>
9886
}
9987
]
10088

0 commit comments

Comments
 (0)