gitscope
/
← marzneshin / app/dashboard/src/pages/nodes/usage.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/pages/nodes/usage.tsx · v0.1.0
Source
1 bedeeff Mardin 2y ago import {
2 bedeeff Mardin 2y ago Box,
3 bedeeff Mardin 2y ago CircularProgress,
4 bedeeff Mardin 2y ago VStack,
5 bedeeff Mardin 2y ago chakra,
6 bedeeff Mardin 2y ago useColorMode,
7 bedeeff Mardin 2y ago } from '@chakra-ui/react';
8 bedeeff Mardin 2y ago import { ChartPieIcon } from '@heroicons/react/24/outline';
9 89f8f93 Mardin 2y ago import { FilterUsageType } from 'types/filter';
10 89f8f93 Mardin 2y ago import { useNodes } from 'stores';
11 bedeeff Mardin 2y ago import dayjs from 'dayjs';
12 bedeeff Mardin 2y ago import { FC, Suspense, useEffect, useState } from 'react';
13 bedeeff Mardin 2y ago import ReactApexChart from 'react-apexcharts';
14 bedeeff Mardin 2y ago import { useTranslation } from 'react-i18next';
15 bedeeff Mardin 2y ago import { Icon } from 'components/icon';
16 5825ea4 Mardin 2y ago import { UsageFilter, createUsageConfig } from 'components/usage-filter';
17 bedeeff Mardin 2y ago import { StatisticsCardWide } from 'components/statistics-card';
18 bedeeff Mardin 2y ago
19 bedeeff Mardin 2y ago const UsageIcon = chakra(ChartPieIcon, {
20 bedeeff Mardin 2y ago baseStyle: {
21 bedeeff Mardin 2y ago w: 5,
22 bedeeff Mardin 2y ago h: 5,
23 bedeeff Mardin 2y ago },
24 bedeeff Mardin 2y ago });
25 bedeeff Mardin 2y ago
26 bedeeff Mardin 2y ago export type NodesUsageProps = {};
27 bedeeff Mardin 2y ago
28 bedeeff Mardin 2y ago export const NodesUsage: FC<NodesUsageProps> = () => {
29 bedeeff Mardin 2y ago const { isShowingNodesUsage } = useNodes();
30 bedeeff Mardin 2y ago const { fetchNodesUsage } = useNodes();
31 bedeeff Mardin 2y ago const { t } = useTranslation();
32 bedeeff Mardin 2y ago const { colorMode } = useColorMode();
33 bedeeff Mardin 2y ago
34 bedeeff Mardin 2y ago const usageTitle = t('userDialog.total');
35 bedeeff Mardin 2y ago const [usage, setUsage] = useState(createUsageConfig(colorMode, usageTitle));
36 bedeeff Mardin 2y ago const [usageFilter, setUsageFilter] = useState('1m');
37 bedeeff Mardin 2y ago const fetchUsageWithFilter = (query: FilterUsageType) => {
38 bedeeff Mardin 2y ago fetchNodesUsage(query).then((data: any) => {
39 bedeeff Mardin 2y ago const labels = [];
40 bedeeff Mardin 2y ago const series = [];
41 bedeeff Mardin 2y ago for (const key in data.usages) {
42 bedeeff Mardin 2y ago const entry = data.usages[key];
43 bedeeff Mardin 2y ago series.push(entry.uplink + entry.downlink);
44 bedeeff Mardin 2y ago labels.push(entry.node_name);
45 bedeeff Mardin 2y ago }
46 bedeeff Mardin 2y ago setUsage(createUsageConfig(colorMode, usageTitle, series, labels));
47 bedeeff Mardin 2y ago });
48 bedeeff Mardin 2y ago };
49 bedeeff Mardin 2y ago
50 bedeeff Mardin 2y ago useEffect(() => {
51 bedeeff Mardin 2y ago if (isShowingNodesUsage) {
52 bedeeff Mardin 2y ago fetchUsageWithFilter({
53 bedeeff Mardin 2y ago start: dayjs().utc().subtract(30, 'day').format('YYYY-MM-DDTHH:00:00'),
54 bedeeff Mardin 2y ago });
55 bedeeff Mardin 2y ago }
56 bedeeff Mardin 2y ago }, [isShowingNodesUsage]);
57 bedeeff Mardin 2y ago
58 bedeeff Mardin 2y ago return (
59 bedeeff Mardin 2y ago <StatisticsCardWide
60 bedeeff Mardin 2y ago title={t('header.nodesUsage')}
61 bedeeff Mardin 2y ago icon={<Icon color="primary">
62 bedeeff Mardin 2y ago <UsageIcon color="white" /> </Icon>}
63 bedeeff Mardin 2y ago content={
64 bedeeff Mardin 2y ago <VStack gap={4}>
65 bedeeff Mardin 2y ago <UsageFilter
66 bedeeff Mardin 2y ago defaultValue={usageFilter}
67 bedeeff Mardin 2y ago onChange={(filter, query) => {
68 bedeeff Mardin 2y ago setUsageFilter(filter);
69 bedeeff Mardin 2y ago fetchUsageWithFilter(query);
70 bedeeff Mardin 2y ago }}
71 bedeeff Mardin 2y ago />
72 bedeeff Mardin 2y ago <Box justifySelf="center" w="full" maxW="300px" mt="4">
73 bedeeff Mardin 2y ago <Suspense fallback={<CircularProgress isIndeterminate />}>
74 bedeeff Mardin 2y ago <ReactApexChart
75 bedeeff Mardin 2y ago options={usage.options}
76 bedeeff Mardin 2y ago series={usage.series}
77 bedeeff Mardin 2y ago type="donut"
78 bedeeff Mardin 2y ago height="500px"
79 bedeeff Mardin 2y ago />
80 bedeeff Mardin 2y ago </Suspense>
81 bedeeff Mardin 2y ago </Box>
82 bedeeff Mardin 2y ago </VStack>
83 bedeeff Mardin 2y ago
84 bedeeff Mardin 2y ago } />
85 bedeeff Mardin 2y ago );
86 bedeeff Mardin 2y ago };