add metrics page

commafeed-client/src/components/header/ProfileMenu.tsx

@@ -1,9 +1,9 @@
 import { Trans } from "@lingui/macro"
 import { Divider, Menu, useMantineColorScheme } from "@mantine/core"
-import { redirectToAdminUsers, redirectToSettings } from "app/slices/redirect"
+import { redirectToAdminUsers, redirectToMetrics, redirectToSettings } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { useState } from "react"
-import { TbMoon, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb"
+import { TbChartLine, TbMoon, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb"
 
 interface ProfileMenuProps {
     control: React.ReactElement
@@ -52,6 +52,15 @@ export function ProfileMenu(props: ProfileMenuProps) {
                         >
                             <Trans>Manage users</Trans>
                         </Menu.Item>
+                        <Menu.Item
+                            icon={<TbChartLine />}
+                            onClick={() => {
+                                dispatch(redirectToMetrics())
+                                setOpened(false)
+                            }}
+                        >
+                            <Trans>Metrics</Trans>
+                        </Menu.Item>
                     </>
                 )}
 

commafeed-client/src/components/metrics/Gauge.tsx

@@ -0,0 +1,9 @@
+import { MetricGauge } from "app/types"
+
+interface MeterProps {
+    gauge: MetricGauge
+}
+
+export function Gauge(props: MeterProps) {
+    return <span>{props.gauge.value}</span>
+}

commafeed-client/src/components/metrics/Meter.tsx

@@ -0,0 +1,19 @@
+import { Box } from "@mantine/core"
+import { MetricMeter } from "app/types"
+
+interface MeterProps {
+    meter: MetricMeter
+}
+
+export function Meter(props: MeterProps) {
+    return (
+        <Box>
+            <Box>Mean: {props.meter.mean_rate.toFixed(2)}</Box>
+            <Box>Last minute: {props.meter.m1_rate.toFixed(2)}</Box>
+            <Box>Last 5 minutes: {props.meter.m5_rate.toFixed(2)}</Box>
+            <Box>Last 15 minutes: {props.meter.m15_rate.toFixed(2)}</Box>
+            <Box>Units: {props.meter.units}</Box>
+            <Box>Total: {props.meter.count}</Box>
+        </Box>
+    )
+}

commafeed-client/src/components/metrics/MetricAccordionItem.tsx

@@ -0,0 +1,22 @@
+import { Accordion, Box, Group } from "@mantine/core"
+
+interface MetricAccordionItemProps {
+    metricKey: string
+    name: string
+    headerValue: number
+    children: React.ReactNode
+}
+
+export function MetricAccordionItem({ metricKey, name, headerValue, children }: MetricAccordionItemProps) {
+    return (
+        <Accordion.Item value={metricKey} key={metricKey}>
+            <Accordion.Control>
+                <Group position="apart">
+                    <Box>{name}</Box>
+                    <Box>{headerValue}</Box>
+                </Group>
+            </Accordion.Control>
+            <Accordion.Panel>{children}</Accordion.Panel>
+        </Accordion.Item>
+    )
+}

commafeed-client/src/components/metrics/Timer.tsx

@@ -0,0 +1,19 @@
+import { Box } from "@mantine/core"
+import { MetricTimer } from "app/types"
+
+interface MetricTimerProps {
+    timer: MetricTimer
+}
+
+export function Timer(props: MetricTimerProps) {
+    return (
+        <Box>
+            <Box>Mean: {props.timer.mean_rate.toFixed(2)}</Box>
+            <Box>Last minute: {props.timer.m1_rate.toFixed(2)}</Box>
+            <Box>Last 5 minutes: {props.timer.m5_rate.toFixed(2)}</Box>
+            <Box>Last 15 minutes: {props.timer.m15_rate.toFixed(2)}</Box>
+            <Box>Units: {props.timer.rate_units}</Box>
+            <Box>Total: {props.timer.count}</Box>
+        </Box>
+    )
+}