konnosDashboard
StorageRenderers.tsx88 lines · main
1import { Fragment } from 'react'
2
3import { ReportWidgetProps, ReportWidgetRendererProps } from '../ReportWidget'
4import { TextFormatter } from '@/components/interfaces/Settings/Logs/LogsFormatters'
5import Table from '@/components/to-be-cleaned/Table'
6import StackedBarChart from '@/components/ui/Charts/StackedBarChart'
7
8export const CacheHitRateChartRenderer = (
9 props: ReportWidgetProps<{
10 timestamp: string
11 hit_count: number
12 miss_count: number
13 }>
14) => {
15 const stackedData = props.data.flatMap((datum) => [
16 {
17 timestamp: +datum.timestamp / 1000,
18 count: datum.hit_count,
19 type: 'hit',
20 },
21 {
22 timestamp: +datum.timestamp / 1000,
23 count: datum.miss_count,
24 type: 'miss',
25 },
26 ])
27
28 return (
29 <StackedBarChart
30 hideHeader
31 variant="percentages"
32 data={stackedData}
33 xAxisKey="timestamp"
34 yAxisKey="count"
35 stackKey="type"
36 stackColors={['brand', 'amber']}
37 />
38 )
39}
40
41export const TopCacheMissesRenderer = (
42 props: ReportWidgetRendererProps<{
43 path: string
44 search: string
45 count: number
46 }>
47) => {
48 if (props.data.length === 0) return null
49 const headerClasses = 'text-xs! py-2! p-0 font-bold bg-surface-200!'
50 const cellClasses = 'text-xs! py-2!'
51
52 return (
53 <>
54 <h3 className="py-4 px-6">Top Cache Misses</h3>
55 <Table
56 containerClassName="overflow-x-auto"
57 head={
58 <>
59 <Table.th className={headerClasses}>Request</Table.th>
60 <Table.th className={headerClasses + ' text-right'}>Count</Table.th>
61 </>
62 }
63 body={
64 <>
65 {props.data.map((datum) => (
66 <Fragment key={datum.path + (datum.search || '')}>
67 <Table.tr className="p-0">
68 <Table.td className={[cellClasses].join(' ')}>
69 <div className=" truncate max-w-sm lg:max-w-lg">
70 <TextFormatter className="text-foreground-light" value={datum.path} />
71 <TextFormatter
72 className="max-w-sm text-foreground-lighter truncate "
73 value={decodeURIComponent(datum.search || '')}
74 />
75 </div>
76 </Table.td>
77 <Table.td className={[cellClasses, 'text-right'].join(' ')}>
78 {datum.count}
79 </Table.td>
80 </Table.tr>
81 </Fragment>
82 ))}
83 </>
84 }
85 />
86 </>
87 )
88}