mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions4 Packages Projects Releases Wiki Activity

Nicer panel health colors for both light and dark modes

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-08-02 19:47:01 +02:00
parent dffc526b2b
commit 6cfee68b72
5 changed files with 63 additions and 21 deletions

2
web/ui/mantine-ui/src/Badge.module.css
View file

@ -9,7 +9,7 @@
.labelBadge {
background-color: light-dark(
var(--mantine-color-gray-1),
var(--mantine-color-gray-9)
var(--mantine-color-gray-8)
);
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-5));
}

19
web/ui/mantine-ui/src/Panel.module.css Normal file
View file

@ -0,0 +1,19 @@
.panelHealthOk {
border-left: 5px solid
light-dark(var(--mantine-color-green-3), var(--mantine-color-green-8)) !important;
}
.panelHealthErr {
border-left: 5px solid
light-dark(var(--mantine-color-red-3), var(--mantine-color-red-9)) !important;
}
.panelHealthWarn {
border-left: 5px solid
light-dark(var(--mantine-color-orange-3), var(--mantine-color-yellow-9)) !important;
}
.panelHealthUnknown {
border-left: 5px solid
light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-6)) !important;
}

25
web/ui/mantine-ui/src/pages/AlertsPage.tsx
View file

@ -14,6 +14,7 @@ import {
import { useSuspenseAPIQuery } from "../api/api";
import { AlertingRulesResult } from "../api/responseTypes/rules";
import badgeClasses from "../Badge.module.css";
import panelClasses from "../Panel.module.css";
import RuleDefinition from "../components/RuleDefinition";
import { humanizeDurationRelative, now } from "../lib/formatTime";
import { Fragment } from "react";
@ -113,16 +114,24 @@ export default function AlertsPage() {
return (
<Accordion.Item
styles={{
item: {
// TODO: This transparency hack is an OK workaround to make the collapsed items
// have a different background color than their surrounding group card in dark mode,
// but it would be better to use CSS to override the light/dark colors for
// collapsed/expanded accordion items.
backgroundColor: "#c0c0c015",
},
}}
key={j}
value={j.toString()}
style={{
borderLeft:
numFiring > 0
? "5px solid var(--mantine-color-red-4)"
: numPending > 0
? "5px solid var(--mantine-color-orange-5)"
: "5px solid var(--mantine-color-green-4)",
}}
className={
numFiring > 0
? panelClasses.panelHealthErr
: numPending > 0
? panelClasses.panelHealthWarn
: panelClasses.panelHealthOk
}
>
<Accordion.Control>
<Group wrap="nowrap" justify="space-between" mr="lg">

13
web/ui/mantine-ui/src/pages/RulesPage.tsx
View file

@ -109,6 +109,15 @@ export default function RulesPage() {
<Accordion multiple variant="separated">
{g.rules.map((r, j) => (
<Accordion.Item
styles={{
item: {
// TODO: This transparency hack is an OK workaround to make the collapsed items
// have a different background color than their surrounding group card in dark mode,
// but it would be better to use CSS to override the light/dark colors for
// collapsed/expanded accordion items.
backgroundColor: "#c0c0c015",
},
}}
key={j}
value={j.toString()}
style={{
@ -116,8 +125,8 @@ export default function RulesPage() {
r.health === "err"
? "5px solid var(--mantine-color-red-4)"
: r.health === "unknown"
? "5px solid var(--mantine-color-gray-5)"
: "5px solid var(--mantine-color-green-4)",
? "5px solid var(--mantine-color-gray-5)"
: "5px solid var(--mantine-color-green-4)",
}}
>
<Accordion.Control>

25
web/ui/mantine-ui/src/pages/targets/ScrapePoolsList.tsx
View file

@ -14,7 +14,6 @@ import { IconAlertTriangle, IconInfoCircle } from "@tabler/icons-react";
import { useSuspenseAPIQuery } from "../../api/api";
import { Target, TargetsResult } from "../../api/responseTypes/targets";
import React, { FC, useState } from "react";
import badgeClasses from "../../Badge.module.css";
import {
humanizeDurationRelative,
humanizeDuration,
@ -26,6 +25,9 @@ import { setCollapsedPools } from "../../state/targetsPageSlice";
import EndpointLink from "../../components/EndpointLink";
import CustomInfiniteScroll from "../../components/CustomInfiniteScroll";
import badgeClasses from "../../Badge.module.css";
import panelClasses from "../../Panel.module.css";
type ScrapePool = {
targets: Target[];
count: number;
@ -38,6 +40,15 @@ type ScrapePools = {
[scrapePool: string]: ScrapePool;
};
const poolPanelHealthClass = (pool: ScrapePool) =>
pool.count > 1 && pool.downCount === pool.count
? panelClasses.panelHealthErr
: pool.downCount >= 1
? panelClasses.panelHealthWarn
: pool.unknownCount === pool.count
? panelClasses.panelHealthUnknown
: panelClasses.panelHealthOk;
const healthBadgeClass = (state: string) => {
switch (state.toLowerCase()) {
case "up":
@ -47,7 +58,8 @@ const healthBadgeClass = (state: string) => {
case "unknown":
return badgeClasses.healthUnknown;
default:
return badgeClasses.warn;
// Should never happen.
return badgeClasses.healthWarn;
}
};
@ -206,14 +218,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
<Accordion.Item
key={poolName}
value={poolName}
style={{
borderLeft:
pool.upCount === 0
? "5px solid var(--mantine-color-red-4)"
: pool.upCount !== pool.count
? "5px solid var(--mantine-color-orange-5)"
: "5px solid var(--mantine-color-green-4)",
}}
className={poolPanelHealthClass(pool)}
>
<Accordion.Control>
<Group wrap="nowrap" justify="space-between" mr="lg">