Skip to content

Commit fe5f2bf

Browse files
isakstenstromoscar-meroton
isakstenstrom
and
oscar-meroton
committed
Remove number animations in the frontend
Co-authored-by: Oscar Falk <oscar@meroton.com>
1 parent e490dd6 commit fe5f2bf

File tree

15 files changed

+53
-134
lines changed

15 files changed

+53
-134
lines changed

‎frontend/package-lock.json

-19
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
"next-runtime-env": "^3.2.2",
2929
"rc-menu": "^9.13.0",
3030
"react": "^18.3.1",
31-
"react-countup": "^6.5.3",
3231
"react-dom": "^18.3.1",
3332
"recharts": "^2.12.7",
3433
"uuid": "^9.0.1",

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

+5-10
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { useQuery } from '@apollo/client';
1010
import FIND_BUILD_DURATIONS from './index.graphql';
1111
import { AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Area } from 'recharts';
1212
import type { StatisticProps } from "antd/lib";
13-
import CountUp from 'react-countup';
1413

1514
const Page: React.FC = () => {
1615

@@ -59,10 +58,6 @@ const Page: React.FC = () => {
5958
}
6059
});
6160

62-
const formatter: StatisticProps['formatter'] = (value) => (
63-
<CountUp end={value as number} separator="," />
64-
);
65-
6661
var avg: number = dataPoints.reduce((sum, item) => sum + item.duration, 0) / dataPoints.length;
6762
var medianVals = dataPoints.map(x => x.duration).sort((a, b) => a - b);
6863
var medianMid = Math.floor(dataPoints.length / 2);
@@ -91,11 +86,11 @@ const Page: React.FC = () => {
9186
titleBits={[<span>Invocation Durations</span>]}>
9287
<Row>
9388
<Space size="large">
94-
<Statistic title="Total" value={data?.findBazelInvocations.totalCount} formatter={formatter} valueStyle={{ color: "#82ca9d" }} />
95-
<Statistic title="Average" value={avg} formatter={formatter} valueStyle={{ color: "#82ca9d" }} />
96-
<Statistic title="Median" value={median} formatter={formatter} valueStyle={{ color: "#8884d8" }} />
97-
<Statistic title="Max" value={max} formatter={formatter} />
98-
<Statistic title="Min" value={min} formatter={formatter} />
89+
<Statistic title="Total" value={data?.findBazelInvocations.totalCount} valueStyle={{ color: "#82ca9d" }} />
90+
<Statistic title="Average" value={avg} valueStyle={{ color: "#82ca9d" }} />
91+
<Statistic title="Median" value={median} valueStyle={{ color: "#8884d8" }} />
92+
<Statistic title="Max" value={max} />
93+
<Statistic title="Min" value={min} />
9994
</Space>
10095
</Row>
10196
<Row>

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

+5-10
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useCallback, useState } from "react";
22
import { PieChart, Pie, Cell, Legend, BarChart, Bar, LabelList } from 'recharts';
33
import { Table, Row, Col, Statistic, Tooltip, Space } from 'antd';
44
import type { StatisticProps, TableColumnsType } from "antd/lib";
5-
import CountUp from 'react-countup';
65
import { ActionCacheStatistics, ActionSummary, MissDetail } from "@/graphql/__generated__/graphql";
76
import PortalCard from "../PortalCard";
87
import { PieChartOutlined, DashboardOutlined, HddOutlined } from "@ant-design/icons";
@@ -18,10 +17,6 @@ interface MissDetailDisplayDataType {
1817
rate: string;
1918
}
2019

21-
const formatter: StatisticProps['formatter'] = (value) => (
22-
<CountUp end={value as number} separator="," />
23-
);
24-
2520
var ac_colors =
2621
[
2722
"grey", //unknown
@@ -114,11 +109,11 @@ const AcMetrics: React.FC<{ acMetrics: ActionSummary | undefined; }> = ({ acMetr
114109
<Tooltip />
115110
<Legend />
116111
</BarChart>
117-
<Statistic title="Hits" value={acMetricsData?.hits ?? 0} formatter={formatter} valueStyle={{ color: "#82ca9d" }} />
118-
<Statistic title="Misses" value={acMetricsData?.misses ?? 0} formatter={formatter} valueStyle={{ color: "#8884d8" }} />
119-
<Statistic title="Size (bytes)" value={acMetricsData?.sizeInBytes ?? 0} formatter={formatter} />
120-
<Statistic title="Save Time(ms)" value={acMetricsData?.saveTimeInMs ?? 0} formatter={formatter} />
121-
<Statistic title="Load Time(ms)" value={acMetricsData?.loadTimeInMs ?? 0} formatter={formatter} />
112+
<Statistic title="Hits" value={acMetricsData?.hits ?? 0} valueStyle={{ color: "#82ca9d" }} />
113+
<Statistic title="Misses" value={acMetricsData?.misses ?? 0} valueStyle={{ color: "#8884d8" }} />
114+
<Statistic title="Size (bytes)" value={acMetricsData?.sizeInBytes ?? 0} />
115+
<Statistic title="Save Time(ms)" value={acMetricsData?.saveTimeInMs ?? 0} />
116+
<Statistic title="Load Time(ms)" value={acMetricsData?.loadTimeInMs ?? 0} />
122117

123118
</Space>
124119
</Row>

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

+4-9
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { PieChart, Pie, Cell } from 'recharts';
33
import { Table, Row, Col, Space, Statistic } from 'antd';
44
import { BuildOutlined, PieChartOutlined } from "@ant-design/icons";
55
import type { StatisticProps, TableColumnsType } from "antd/lib";
6-
import CountUp from 'react-countup';
76
import { ActionSummary, ActionData } from "@/graphql/__generated__/graphql";
87
import PortalCard from "../PortalCard";
98
import { renderActiveShape, newColorFind } from "../Utilities/renderShape"
@@ -16,10 +15,6 @@ interface ActionDataGraphDisplayType {
1615
color: string;
1716
}
1817

19-
const formatter: StatisticProps['formatter'] = (value) => (
20-
<CountUp end={value as number} separator="," />
21-
);
22-
2318
interface ActionDataColumnType {
2419
key: React.Key;
2520
mnemonic: string;
@@ -107,10 +102,10 @@ const ActionDataMetrics: React.FC<{ acMetrics: ActionSummary | undefined; }> = (
107102
<PortalCard icon={<PieChart />} type="inner" titleBits={["Actions"]}>
108103
<Row>
109104
<Space size={"large"}>
110-
<Statistic title="Actions Executed" value={totalActionsExecuted} formatter={formatter} />
111-
<Statistic title="Actions Created" value={totalActionsCreated} formatter={formatter} />
112-
<Statistic title="Total User Time(ms)" value={totalUserTime} formatter={formatter} />
113-
<Statistic title="Total System Time(ms)" value={totalSystemTime} formatter={formatter} />
105+
<Statistic title="Actions Executed" value={totalActionsExecuted} />
106+
<Statistic title="Actions Created" value={totalActionsCreated} />
107+
<Statistic title="Total User Time(ms)" value={totalUserTime} />
108+
<Statistic title="Total System Time(ms)" value={totalSystemTime} />
114109
</Space>
115110
</Row>
116111
<Row justify="space-around" align="top">

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

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from "react";
22
import { Space, Table, Row, Col, Statistic, List } from 'antd';
33
import { CodeOutlined, DeploymentUnitOutlined, SearchOutlined } from '@ant-design/icons';
44
import type { StatisticProps, TableColumnsType } from "antd/lib";
5-
import CountUp from 'react-countup';
65
import { BazelCommand, TargetMetrics, TargetPair } from "@/graphql/__generated__/graphql";
76
import PortalCard from "../PortalCard";
87
import { SearchFilterIcon, SearchWidget } from '@/components/SearchWidgets';

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

-8
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useCallback, useState } from "react";
22
import { PieChart, Pie, Cell, Legend } from "recharts";
33
import { Table, Row, Col, Statistic, Space } from "antd";
44
import type { StatisticProps, TableColumnsType } from "antd/lib";
5-
import CountUp from "react-countup";
65
import { MemoryMetrics, GarbageMetrics } from "@/graphql/__generated__/graphql";
76
import PortalCard from "../PortalCard";
87
import { PieChartOutlined, HddOutlined } from "@ant-design/icons";
@@ -16,10 +15,6 @@ interface GarbageMetricDetailDisplayType {
1615
color: string;
1716
}
1817

19-
const formatter: StatisticProps["formatter"] = (value) => (
20-
<CountUp end={value as number} separator="," />
21-
);
22-
2318
const garbage_columns: TableColumnsType<GarbageMetricDetailDisplayType> = [
2419
{
2520
title: "Type",
@@ -70,17 +65,14 @@ const MemoryMetricsDisplay: React.FC<{
7065
<Statistic
7166
title="Peak Post GC Heap Size"
7267
value={memoryMetrics?.peakPostGcHeapSize ?? 0}
73-
formatter={formatter}
7468
/>
7569
<Statistic
7670
title="Peak Post TC Tenured Space Heap Size"
7771
value={memoryMetrics?.peakPostGcTenuredSpaceHeapSize ?? 0}
78-
formatter={formatter}
7972
/>
8073
<Statistic
8174
title="Used Heap Size Post Build"
8275
value={memoryMetrics?.usedHeapSizePostBuild ?? 0}
83-
formatter={formatter}
8476
/>
8577
</Space>
8678
</Row>

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

+8-13
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,9 @@ import React from "react";
22
import { Statistic, Space, Row } from 'antd';
33
import { FieldTimeOutlined } from "@ant-design/icons";
44
import type { StatisticProps } from "antd/lib";
5-
import CountUp from 'react-countup';
65
import { NetworkMetrics, SystemNetworkStats } from "@/graphql/__generated__/graphql";
76
import PortalCard from "../PortalCard";
87

9-
const formatter: StatisticProps['formatter'] = (value) => (
10-
<CountUp end={value as number} separator="," />
11-
);
12-
138
const NetworkMetricsDisplay: React.FC<{ networkMetrics: NetworkMetrics | undefined }> = ({
149
networkMetrics: networkMetrics
1510
}) => {
@@ -19,14 +14,14 @@ const NetworkMetricsDisplay: React.FC<{ networkMetrics: NetworkMetrics | undefin
1914
<PortalCard titleBits={["System Network Metrics"]} icon={<FieldTimeOutlined />}>
2015
<Row>
2116
<Space size="large">
22-
<Statistic title="Bytes Recieved" value={systemNetworkStats?.bytesRecv ?? 0} formatter={formatter} />
23-
<Statistic title="Bytes Sent" value={systemNetworkStats?.bytesSent ?? 0} formatter={formatter} />
24-
<Statistic title="Packets Recieved" value={systemNetworkStats?.packetsRecv ?? 0} formatter={formatter} />
25-
<Statistic title="Packets Sent" value={systemNetworkStats?.packetsSent ?? 0} formatter={formatter} />
26-
<Statistic title="Peak Bytes Recieved(/s)" value={systemNetworkStats?.peakBytesRecvPerSec ?? 0} formatter={formatter} />
27-
<Statistic title="Peak Bytes Sent(/s)" value={systemNetworkStats?.peakBytesSentPerSec ?? 0} formatter={formatter} />
28-
<Statistic title="Peak Packets Recieved(/s)" value={systemNetworkStats?.peakPacketsRecvPerSec ?? 0} formatter={formatter} />
29-
<Statistic title="Peak Packets Sent(/s)" value={systemNetworkStats?.peakPacketsSentPerSec ?? 0} formatter={formatter} />
17+
<Statistic title="Bytes Recieved" value={systemNetworkStats?.bytesRecv ?? 0} />
18+
<Statistic title="Bytes Sent" value={systemNetworkStats?.bytesSent ?? 0} />
19+
<Statistic title="Packets Recieved" value={systemNetworkStats?.packetsRecv ?? 0} />
20+
<Statistic title="Packets Sent" value={systemNetworkStats?.packetsSent ?? 0} />
21+
<Statistic title="Peak Bytes Recieved(/s)" value={systemNetworkStats?.peakBytesRecvPerSec ?? 0} />
22+
<Statistic title="Peak Bytes Sent(/s)" value={systemNetworkStats?.peakBytesSentPerSec ?? 0} />
23+
<Statistic title="Peak Packets Recieved(/s)" value={systemNetworkStats?.peakPacketsRecvPerSec ?? 0} />
24+
<Statistic title="Peak Packets Sent(/s)" value={systemNetworkStats?.peakPacketsSentPerSec ?? 0} />
3025
</Space>
3126
</Row>
3227
</PortalCard>

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

+5-10
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from "react";
22
import { Space, Table, Row, Col, Statistic } from 'antd';
33
import { DeploymentUnitOutlined, SearchOutlined } from '@ant-design/icons';
44
import type { StatisticProps, TableColumnsType } from "antd/lib";
5-
import CountUp from 'react-countup';
65
import { TargetMetrics, TargetPair } from "@/graphql/__generated__/graphql";
76
import PortalCard from "../PortalCard";
87
import { SearchFilterIcon, SearchWidget } from '@/components/SearchWidgets';
@@ -20,10 +19,6 @@ interface TargetDataType {
2019
failure_reason: string //failure reason if any
2120
}
2221

23-
const formatter: StatisticProps['formatter'] = (value) => (
24-
<CountUp end={value as number} separator="," />
25-
);
26-
2722
const TargetMetricsDisplay: React.FC<{
2823
targetMetrics: TargetMetrics | undefined | null,
2924
targetData: TargetPair[] | undefined | null,
@@ -176,11 +171,11 @@ const TargetMetricsDisplay: React.FC<{
176171
<PortalCard type="inner" icon={<DeploymentUnitOutlined />} titleBits={["Targets"]}>
177172
<Row>
178173
<Space size="large">
179-
<Statistic title="Targets Analyzed" value={targets_analyzed} formatter={formatter} />
180-
<Statistic title="Targets Built Successfully" value={targets_built_successfully} formatter={formatter} valueStyle={{ color: "green" }} />
181-
<Statistic title="Targets Skipped" value={targets_skipped} formatter={formatter} valueStyle={{ color: "purple" }} />
182-
<Statistic title="Targets Configured" value={targetMetrics?.targetsConfigured ?? 0} formatter={formatter} />
183-
<Statistic title="Targets Configured Not Including Aspects" value={targetMetrics?.targetsConfiguredNotIncludingAspects ?? 0} formatter={formatter} />
174+
<Statistic title="Targets Analyzed" value={targets_analyzed} />
175+
<Statistic title="Targets Built Successfully" value={targets_built_successfully} valueStyle={{ color: "green" }} />
176+
<Statistic title="Targets Skipped" value={targets_skipped} valueStyle={{ color: "purple" }} />
177+
<Statistic title="Targets Configured" value={targetMetrics?.targetsConfigured ?? 0} />
178+
<Statistic title="Targets Configured Not Including Aspects" value={targetMetrics?.targetsConfiguredNotIncludingAspects ?? 0} />
184179
</Space>
185180
</Row>
186181
<Row justify="space-around" align="middle">

‎frontend/src/components/Targets/TargetDetails/index.tsx

+2-7
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
22
import { Space, Row, Statistic, TableColumnsType, Table } from 'antd';
33
import { TestStatusEnum } from '../../TestStatusTag';
44
import type { StatisticProps } from "antd/lib";
5-
import CountUp from 'react-countup';
65
import { useQuery } from '@apollo/client';
76
import { FindTargetsQueryVariables } from '@/graphql/__generated__/graphql';
87
import PortalAlert from '../../PortalAlert';
@@ -20,10 +19,6 @@ interface Props {
2019
label: string
2120
}
2221

23-
const formatter: StatisticProps['formatter'] = (value) => (
24-
<CountUp end={value as number} separator="," />
25-
);
26-
2722
export interface TargetStatusType {
2823
label: string
2924
invocationId: string,
@@ -90,8 +85,8 @@ const TestDetails: React.FC<Props> = ({ label }) => {
9085
<h1>{label}</h1>
9186
<Row>
9287
<Space size="large">
93-
<Statistic title="Average Duration" value={total_duration / totalCnt} formatter={formatter} />
94-
<Statistic title="Total Runs" value={totalCnt} formatter={formatter} />
88+
<Statistic title="Average Duration" value={total_duration / totalCnt} />
89+
<Statistic title="Total Runs" value={totalCnt} />
9590
</Space>
9691
</Row>
9792
<PortalCard icon={<FieldTimeOutlined />} titleBits={["Target Duration Over Time"]} >

‎frontend/src/components/Targets/TargetGrid/index.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { TableColumnsType } from "antd/lib"
33
import { Space, Row, Statistic, Table, TableProps, TablePaginationConfig, Pagination, Alert } from 'antd';
44
import { TestStatusEnum } from '../../TestStatusTag';
55
import type { StatisticProps } from "antd/lib";
6-
import CountUp from 'react-countup';
76
import { SearchFilterIcon, SearchWidget } from '@/components/SearchWidgets';
87
import { SearchOutlined } from '@ant-design/icons';
98
import { useQuery } from '@apollo/client';
@@ -30,9 +29,7 @@ interface TargetGridRowDataType {
3029
key: React.Key;
3130
label: string;
3231
}
33-
const formatter: StatisticProps['formatter'] = (value) => (
34-
<CountUp end={value as number} separator="," />
35-
);
32+
3633
const PAGE_SIZE = 20
3734
const columns: TableColumnsType<TargetGridRowDataType> = [
3835
{

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

+4-9
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
22
import { Space, Row, Statistic, TableColumnsType, Table } from 'antd';
33
import TestStatusTag, { TestStatusEnum } from '../TestStatusTag';
44
import type { StatisticProps } from "antd/lib";
5-
import CountUp from 'react-countup';
65
import { useQuery } from '@apollo/client';
76
import { FindTestsQueryVariables, TestCollectionOverallStatus } from '@/graphql/__generated__/graphql';
87
import TestGridRow from '../TestGridRow';
@@ -20,10 +19,6 @@ interface Props {
2019
label: string
2120
}
2221

23-
const formatter: StatisticProps['formatter'] = (value) => (
24-
<CountUp end={value as number} separator="," />
25-
);
26-
2722
export interface TestStatusType {
2823
label: string
2924
invocationId: string,
@@ -113,10 +108,10 @@ const TestDetails: React.FC<Props> = ({ label }) => {
113108
<h1>{label}</h1>
114109
<Row>
115110
<Space size="large">
116-
<Statistic title="Average Duration" value={total_duration / totalCnt} formatter={formatter} />
117-
<Statistic title="Total Runs" value={totalCnt} formatter={formatter} />
118-
<Statistic title="Cached Locally" value={local_cached} formatter={formatter} />
119-
<Statistic title="Cached Remotely" value={remote_cached} formatter={formatter} valueStyle={{ color: "#82ca9d" }} />
111+
<Statistic title="Average Duration" value={total_duration / totalCnt} />
112+
<Statistic title="Total Runs" value={totalCnt} />
113+
<Statistic title="Cached Locally" value={local_cached} />
114+
<Statistic title="Cached Remotely" value={remote_cached} valueStyle={{ color: "#82ca9d" }} />
120115
</Space>
121116
</Row>
122117
<PortalCard icon={<FieldTimeOutlined />} titleBits={["Test Duration Over Time"]} >

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

-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { TableColumnsType } from "antd/lib"
33
import { Space, Row, Statistic, Table, TableProps, TablePaginationConfig, Pagination } from 'antd';
44
import { TestStatusEnum } from '../TestStatusTag';
55
import type { StatisticProps } from "antd/lib";
6-
import CountUp from 'react-countup';
76
import { SearchFilterIcon, SearchWidget } from '@/components/SearchWidgets';
87
import { SearchOutlined } from '@ant-design/icons';
98
import { useQuery } from '@apollo/client';
@@ -19,9 +18,6 @@ import { millisecondsToTime } from '../Utilities/time';
1918
import { GET_TEST_LABELS } from './graphql';
2019
interface Props {}
2120

22-
const formatter: StatisticProps['formatter'] = (value) => (
23-
<CountUp end={value as number} separator="," />
24-
);
2521
export interface TestStatusType {
2622
label: string
2723
invocationId: string,

0 commit comments

Comments
 (0)