konnosDeprecatedChartBlock.tsx58 lines · main
| 1 | import { useParams } from 'common' |
| 2 | import { ReactNode } from 'react' |
| 3 | |
| 4 | import { ReportBlockContainer } from './ReportBlockContainer' |
| 5 | import { InlineLink } from '@/components/ui/InlineLink' |
| 6 | import { METRICS } from '@/lib/constants/metrics' |
| 7 | |
| 8 | interface DeprecatedChartBlockProps { |
| 9 | label: string |
| 10 | attribute: string |
| 11 | actions?: ReactNode |
| 12 | } |
| 13 | |
| 14 | export const DeprecatedChartBlock = ({ label, attribute, actions }: DeprecatedChartBlockProps) => { |
| 15 | const { ref } = useParams() |
| 16 | const metric = METRICS.find((x) => x.key === attribute) |
| 17 | |
| 18 | const logsName = metric?.category?.label |
| 19 | |
| 20 | const getLogsUrl = (logsName?: string) => { |
| 21 | switch (logsName) { |
| 22 | case 'Database API': |
| 23 | return '/logs/postgrest-logs' |
| 24 | case 'All API usage': |
| 25 | return '/logs/explorer' |
| 26 | case 'Realtime': |
| 27 | return '/logs/realtime-logs' |
| 28 | case 'Storage': |
| 29 | return '/logs/storage-logs' |
| 30 | case 'Authentication': |
| 31 | return '/logs/auth-logs' |
| 32 | default: |
| 33 | return '' |
| 34 | } |
| 35 | } |
| 36 | |
| 37 | return ( |
| 38 | <ReportBlockContainer |
| 39 | draggable |
| 40 | showDragHandle |
| 41 | loading={false} |
| 42 | icon={metric?.category?.icon('text-foreground-muted')} |
| 43 | label={label} |
| 44 | actions={actions} |
| 45 | > |
| 46 | <div className="flex flex-col justify-center flex-1"> |
| 47 | <p className="text-xs text-foreground-lightr"> |
| 48 | This chart is not longer available, and can be removed from your report |
| 49 | </p> |
| 50 | <p className="text-xs text-foreground-lighter"> |
| 51 | You may view the equivalent of this data from the{' '} |
| 52 | <InlineLink href={`/project/${ref}/${getLogsUrl(logsName)}`}>{logsName} Logs</InlineLink>{' '} |
| 53 | instead |
| 54 | </p> |
| 55 | </div> |
| 56 | </ReportBlockContainer> |
| 57 | ) |
| 58 | } |