diff --git a/frontend/src/components/home/Home.tsx b/frontend/src/components/home/Home.tsx
index e5e3e9ac3..ebaacc8d8 100644
--- a/frontend/src/components/home/Home.tsx
+++ b/frontend/src/components/home/Home.tsx
@@ -17,13 +17,14 @@ const Home: Component<{}> = (p) => {
const { servers } = useAppState();
return (
<>
-
-
+ */}
+
= (p) => {
+ const deployentCount = useDeploymentCount();
+ const serverCount = useServerCount();
return (
-
- summary
-
-
+
+
+
);
@@ -56,71 +69,17 @@ const BuildsSummary = () => {
);
};
-const DeploymentsSummary = () => {
- const deployentCount = useDeploymentCount();
- return (
-
- );
-};
-
-const ServersSummary = () => {
- const serverCount = useServerCount();
- return (
-
- );
-};
-
-function useDeploymentCount() {
+function useDeploymentCount(): Accessor {
const { deployments } = useAppState();
const count = createMemo(() => {
const ids = deployments.ids();
if (!ids)
- return { total: 0, running: 0, stopped: 0, notDeployed: 0, unknown: 0 };
+ return [
+ { title: "running", amount: 0, color: COLORS.textgreen },
+ { title: "stopped", amount: 0, color: COLORS.textred },
+ { title: "not deployed", amount: 0, color: COLORS.textblue },
+ { title: "unknown", amount: 0, color: COLORS.textorange },
+ ];
let running = 0;
let stopped = 0;
let notDeployed = 0;
@@ -137,16 +96,25 @@ function useDeploymentCount() {
unknown++;
}
}
- return { total: ids.length, running, stopped, notDeployed, unknown };
+ return [
+ { title: "running", amount: running, color: COLORS.textgreen },
+ { title: "stopped", amount: stopped, color: COLORS.textred },
+ { title: "not deployed", amount: notDeployed, color: COLORS.textblue },
+ { title: "unknown", amount: unknown, color: COLORS.textorange },
+ ];
});
return count;
}
-function useServerCount() {
+function useServerCount(): Accessor {
const { servers } = useAppState();
const count = createMemo(() => {
const ids = servers.ids();
- if (!ids) return { total: 0, healthy: 0, unhealthy: 0, disabled: 0 };
+ if (!ids) return [
+ { title: "healthy", amount: 0, color: COLORS.textgreen },
+ { title: "unhealthy", amount: 0, color: COLORS.textred },
+ { title: "disabled", amount: 0, color: COLORS.textblue },
+ ];
let healthy = 0;
let unhealthy = 0;
let disabled = 0;
@@ -160,7 +128,11 @@ function useServerCount() {
unhealthy++;
}
}
- return { total: ids.length, healthy, unhealthy, disabled };
+ return [
+ { title: "healthy", amount: healthy, color: COLORS.textgreen },
+ { title: "unhealthy", amount: unhealthy, color: COLORS.textred },
+ { title: "disabled", amount: disabled, color: COLORS.textblue },
+ ];
});
return count;
}
diff --git a/frontend/src/components/home/Summary2.tsx b/frontend/src/components/home/Summary2.tsx
new file mode 100644
index 000000000..8ce7028d9
--- /dev/null
+++ b/frontend/src/components/home/Summary2.tsx
@@ -0,0 +1,166 @@
+import { Component, createMemo, For, Show } from "solid-js";
+import { useAppState } from "../../state/StateProvider";
+import { DockerContainerState, ServerStatus } from "../../types";
+import Grid from "../shared/layout/Grid";
+import Flex from "../shared/layout/Flex";
+
+const Summary: Component<{}> = (p) => {
+ return (
+
+ summary
+
+
+
+
+ );
+};
+
+export default Summary;
+
+const SummaryItem: Component<{
+ title: string;
+ metrics: Array<{ title: string; class: string; count?: number }>;
+}> = (p) => {
+ return (
+
+ {p.title}
+
+
+ {(metric) => (
+ 0}>
+
+ {metric.title}
+ {metric.count}
+
+
+ )}
+
+
+
+ );
+};
+
+const BuildsSummary = () => {
+ const { builds } = useAppState();
+ return (
+
+ );
+};
+
+const DeploymentsSummary = () => {
+ const deployentCount = useDeploymentCount();
+ return (
+
+ );
+};
+
+const ServersSummary = () => {
+ const serverCount = useServerCount();
+ return (
+
+ );
+};
+
+function useDeploymentCount() {
+ const { deployments } = useAppState();
+ const count = createMemo(() => {
+ const ids = deployments.ids();
+ if (!ids)
+ return { total: 0, running: 0, stopped: 0, notDeployed: 0, unknown: 0 };
+ let running = 0;
+ let stopped = 0;
+ let notDeployed = 0;
+ let unknown = 0;
+ for (const id of ids) {
+ const state = deployments.get(id)!.state;
+ if (state === DockerContainerState.NotDeployed) {
+ notDeployed++;
+ } else if (state === DockerContainerState.Running) {
+ running++;
+ } else if (state === DockerContainerState.Exited) {
+ stopped++;
+ } else if (state === DockerContainerState.Unknown) {
+ unknown++;
+ }
+ }
+ return { total: ids.length, running, stopped, notDeployed, unknown };
+ });
+ return count;
+}
+
+function useServerCount() {
+ const { servers } = useAppState();
+ const count = createMemo(() => {
+ const ids = servers.ids();
+ if (!ids) return { total: 0, healthy: 0, unhealthy: 0, disabled: 0 };
+ let healthy = 0;
+ let unhealthy = 0;
+ let disabled = 0;
+ for (const id of ids) {
+ const server = servers.get(id)!;
+ if (server.status === ServerStatus.Disabled) {
+ disabled++;
+ } else if (server.status === ServerStatus.Ok) {
+ healthy++;
+ } else if (server.status === ServerStatus.NotOk) {
+ unhealthy++;
+ }
+ }
+ return { total: ids.length, healthy, unhealthy, disabled };
+ });
+ return count;
+}
diff --git a/frontend/src/components/shared/PieChart.tsx b/frontend/src/components/shared/PieChart.tsx
index 6d0f4546c..599d8f9b2 100644
--- a/frontend/src/components/shared/PieChart.tsx
+++ b/frontend/src/components/shared/PieChart.tsx
@@ -7,6 +7,7 @@ import {
onCleanup,
onMount,
} from "solid-js";
+import Grid from "./layout/Grid";
export type PieChartSection = {
title: string;
@@ -14,7 +15,7 @@ export type PieChartSection = {
color: string;
};
-const Piechart: Component<{
+const PieChart: Component<{
title: string;
sections: (PieChartSection | undefined)[];
donutProportion?: number;
@@ -27,7 +28,7 @@ const Piechart: Component<{
const sections = createMemo(
() =>
p.sections
- .filter((s) => s)
+ .filter((s) => s && s.amount > 0)
.sort((a, b) => {
if (a!.amount > b!.amount) {
return -1;
@@ -58,26 +59,24 @@ const Piechart: Component<{
chart()?.draw();
});
return (
-
-
-
+
{p.title}
{(section, index) => (
@@ -92,19 +91,19 @@ const Piechart: Component<{
: 0.5,
}}
>
- {section.title}:
+ {section.title}:{" "}
{section.amount}
)}
-
-
-