Repository: supabase/supabase
File: apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx (TypeScript)

Code before:
        key: 'db',
        title: 'Database requests',
        icon: <Database strokeWidth={1.5} size={16} className="text-foreground-lighter" />,
        href: `/project/${projectRef}/editor`,
        route: '/logs/postgres-logs',
        enabled: true,
      },
      {
        key: 'functions',
        title: 'Functions requests',
        icon: <Code strokeWidth={1.5} size={16} className="text-foreground-lighter" />,
        route: '/logs/edge-functions-logs',
        enabled: true,
      },
      {
        key: 'auth',
        title: 'Auth requests',
        icon: <Key strokeWidth={1.5} size={16} className="text-foreground-lighter" />,
        href: `/project/${projectRef}/auth/users`,
        route: '/logs/auth-logs',
        enabled: authEnabled,
      },
      {
        key: 'storage',
        title: 'Storage requests',
        icon: <Bucket strokeWidth={1.5} size={16} className="text-foreground-lighter" />,
        href: `/project/${projectRef}/storage/buckets`,
        route: '/logs/storage-logs',
        enabled: storageEnabled,
      },
      {
        key: 'realtime',
        title: 'Realtime requests',
        icon: <Zap strokeWidth={1.5} size={16} className="text-foreground-lighter" />,
        route: '/logs/realtime-logs',
        enabled: true,
      },
    ],
    [projectRef, authEnabled, storageEnabled]
  )

  const services: ServiceComputed[] = useMemo(
    () =>
      serviceBase.map((s) => {
        const currentStats = statsByService[s.key].current
        const data = toLogsBarChartData(currentStats.eventChartData)
        const total = sumTotal(data)
        const warn = sumWarnings(data)
        const err = sumErrors(data)
        return { ...s, stats: currentStats, data, total, warn, err }
      }),

Review comment (suggestion):
Looks like none of these icons in the new ProjectUsageSection are used in the DOM, right @SaxonF? Just asking to doublecheck if there’s something I should test visually. Nothing I can see from here.

Code after:

        href: `/project/${projectRef}/editor`,
        route: '/logs/postgres-logs',
        enabled: true,
      },
      {
        key: 'functions',
        title: 'Functions requests',
        route: '/logs/edge-functions-logs',
        enabled: true,
      },
      {
        key: 'auth',
        title: 'Auth requests',
        href: `/project/${projectRef}/auth/users`,
        route: '/logs/auth-logs',
        enabled: authEnabled,
      },
      {
        key: 'storage',
        title: 'Storage requests',
        href: `/project/${projectRef}/storage/buckets`,
        route: '/logs/storage-logs',
        enabled: storageEnabled,
      },
      {
        key: 'realtime',
        title: 'Realtime requests',
        route: '/logs/realtime-logs',
        enabled: true,
      },
    ],
    [projectRef, authEnabled, storageEnabled]
  )

  const services: ServiceComputed[] = useMemo(
    () =>
      serviceBase.map((s) => {
        const currentStats = statsByService[s.key].current
        const data = toLogsBarChartData(currentStats.eventChartData)
        const total = sumTotal(data)
        const warn = sumWarnings(data)
        const err = sumErrors(data)
        return { ...s, stats: currentStats, data, total, warn, err }
      }),
    [serviceBase, statsByService]
  )

  const isLoading = services.some((s) => s.stats.isLoading)

  const handleBarClick = (logRoute: string, serviceKey: ServiceKey) => (datum: any) => {