mirror of
https://github.com/garethgeorge/backrest.git
synced 2026-08-27 19:36:29 +00:00
fix: rebase stats panel onto a better chart library
This commit is contained in:
garethgeorge
Generated
+164
-757
File diff suppressed because it is too large
Load Diff
+3
-6
@@ -17,9 +17,6 @@
|
||||
"@bufbuild/protobuf": "^1.6.0",
|
||||
"@connectrpc/connect": "^1.2.0",
|
||||
"@connectrpc/connect-web": "^1.2.0",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@mui/material": "^5.15.11",
|
||||
"@mui/x-charts": "^6.19.5",
|
||||
"@types/lodash": "^4.14.202",
|
||||
"@types/node": "^20.9.0",
|
||||
"@types/react": "^18.2.37",
|
||||
@@ -32,13 +29,13 @@
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-js-cron": "^5.0.1",
|
||||
"typescript": "^5.2.2"
|
||||
"typescript": "^5.2.2",
|
||||
"recharts": "^2.12.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@parcel/transformer-sass": "^2.10.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"events": "^3.3.0",
|
||||
"rimraf": "^5.0.5",
|
||||
"stream-browserify": "^3.0.0"
|
||||
"rimraf": "^5.0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { LineChart } from "@mui/x-charts/LineChart";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
import { formatBytes, formatDate } from "../lib/formatting";
|
||||
import { Col, Empty, Row } from "antd";
|
||||
import {
|
||||
@@ -55,13 +64,13 @@ const StatsPanel = ({ repoId }: { repoId: string }) => {
|
||||
|
||||
if (operations.length === 0) {
|
||||
return (
|
||||
<Empty description="No stats available. Have you run a prune operation yet?" />
|
||||
<Empty description="No stats available. Have you run a stats operation yet?" />
|
||||
);
|
||||
}
|
||||
|
||||
const dataset: {
|
||||
time: number;
|
||||
totalSizeMb: number;
|
||||
totalSizeBytes: number;
|
||||
compressionRatio: number;
|
||||
snapshotCount: number;
|
||||
totalBlobCount: number;
|
||||
@@ -69,7 +78,7 @@ const StatsPanel = ({ repoId }: { repoId: string }) => {
|
||||
const stats = (op.op.value! as OperationStats).stats!;
|
||||
return {
|
||||
time: Number(op.unixTimeEndMs!),
|
||||
totalSizeMb: Number(stats.totalSize) / 1000000,
|
||||
totalSizeBytes: Number(stats.totalSize),
|
||||
compressionRatio: Number(stats.compressionRatio),
|
||||
snapshotCount: Number(stats.snapshotCount),
|
||||
totalBlobCount: Number(stats.totalBlobCount),
|
||||
@@ -83,85 +92,103 @@ const StatsPanel = ({ repoId }: { repoId: string }) => {
|
||||
<>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<LineChart
|
||||
xAxis={[
|
||||
{
|
||||
dataKey: "time",
|
||||
valueFormatter: (v) => formatDate(v as number),
|
||||
min: minTime,
|
||||
max: maxTime,
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
dataKey: "totalSizeMb",
|
||||
label: "Total Size",
|
||||
valueFormatter: (v: any) =>
|
||||
formatBytes((v * 1000000) as number),
|
||||
},
|
||||
]}
|
||||
height={300}
|
||||
width={600}
|
||||
dataset={dataset}
|
||||
/>
|
||||
|
||||
<LineChart
|
||||
xAxis={[
|
||||
{
|
||||
dataKey: "time",
|
||||
valueFormatter: (v) => formatDate(v as number),
|
||||
min: minTime,
|
||||
max: maxTime,
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
dataKey: "compressionRatio",
|
||||
label: "Compression Ratio",
|
||||
},
|
||||
]}
|
||||
height={300}
|
||||
dataset={dataset}
|
||||
/>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart width={600} height={300} data={dataset}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
type="number"
|
||||
domain={["dataMin", "dataMax"]}
|
||||
tickFormatter={(v) => formatDate(v as number)}
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId="left"
|
||||
type="number"
|
||||
dataKey="totalSizeBytes"
|
||||
tickFormatter={(v) => formatBytes(v)}
|
||||
/>
|
||||
<Tooltip labelFormatter={(v) => formatDate(v as number)} />
|
||||
<Legend />
|
||||
<Line
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey="totalSizeBytes"
|
||||
stroke="#8884d8"
|
||||
name="Total Size"
|
||||
></Line>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<LineChart
|
||||
xAxis={[
|
||||
{
|
||||
dataKey: "time",
|
||||
valueFormatter: (v) => formatDate(v as number),
|
||||
min: minTime,
|
||||
max: maxTime,
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
dataKey: "snapshotCount",
|
||||
label: "Snapshot Count",
|
||||
},
|
||||
]}
|
||||
height={300}
|
||||
dataset={dataset}
|
||||
/>
|
||||
|
||||
<LineChart
|
||||
xAxis={[
|
||||
{
|
||||
dataKey: "time",
|
||||
valueFormatter: (v) => formatDate(v as number),
|
||||
min: minTime,
|
||||
max: maxTime,
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
dataKey: "totalBlobCount",
|
||||
label: "Blob Count",
|
||||
},
|
||||
]}
|
||||
height={300}
|
||||
dataset={dataset}
|
||||
/>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart width={600} height={300} data={dataset}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
type="number"
|
||||
domain={["dataMin", "dataMax"]}
|
||||
tickFormatter={(v) => formatDate(v as number)}
|
||||
/>
|
||||
<YAxis yAxisId="left" type="number" dataKey="compressionRatio" />
|
||||
<Tooltip labelFormatter={(v) => formatDate(v as number)} />
|
||||
<Legend />
|
||||
<Line
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey="compressionRatio"
|
||||
stroke="#82ca9d"
|
||||
name="Compression Ratio"
|
||||
></Line>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart width={600} height={300} data={dataset}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
type="number"
|
||||
domain={["dataMin", "dataMax"]}
|
||||
tickFormatter={(v) => formatDate(v as number)}
|
||||
/>
|
||||
<YAxis yAxisId="left" type="number" dataKey="snapshotCount" />
|
||||
<Tooltip labelFormatter={(v) => formatDate(v as number)} />
|
||||
<Legend />
|
||||
<Line
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey="snapshotCount"
|
||||
stroke="#ff7300"
|
||||
name="Snapshot Count"
|
||||
></Line>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart width={600} height={300} data={dataset}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
type="number"
|
||||
domain={["dataMin", "dataMax"]}
|
||||
tickFormatter={(v) => formatDate(v as number)}
|
||||
/>
|
||||
<YAxis yAxisId="left" type="number" dataKey="totalBlobCount" />
|
||||
<Tooltip labelFormatter={(v) => formatDate(v as number)} />
|
||||
<Legend />
|
||||
<Line
|
||||
yAxisId="left"
|
||||
type="monotone"
|
||||
dataKey="totalBlobCount"
|
||||
stroke="#00BBBB"
|
||||
name="Total Blob Count"
|
||||
></Line>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
|
||||
+4
-19
@@ -8,11 +8,6 @@ import "react-js-cron/dist/styles.css";
|
||||
import { ConfigProvider as AntdConfigProvider, theme } from "antd";
|
||||
import { ConfigContextProvider } from "./components/ConfigProvider";
|
||||
import { MainContentProvider } from "./views/MainContentArea";
|
||||
import {
|
||||
StyledEngineProvider,
|
||||
ThemeProvider,
|
||||
createTheme,
|
||||
} from "@mui/material";
|
||||
|
||||
const Root = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
@@ -39,18 +34,8 @@ el &&
|
||||
],
|
||||
}}
|
||||
>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider
|
||||
theme={createTheme({
|
||||
palette: {
|
||||
mode: darkTheme ? "dark" : "light",
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Root>
|
||||
<App />
|
||||
</Root>
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
</AntdConfigProvider>,
|
||||
<Root>
|
||||
<App />
|
||||
</Root>
|
||||
</AntdConfigProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user