mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 23:29:08 +03:00
Alaister YoungandKevin Grüneberg
70da0f1d1d
* chore: cleanup packages - Avoid circular imports - Export API-types as types - pg-format without depending on Node internal Buffer (not browser-compatible) - Avoid importing from barrel files in ui dir * chore: avoid barrel file imports in studio (#27771) * chore: avoid barrel file imports - Removes some unused imports - Avoids barrel file import for faster builds + less memory * add eslint rule * type fixes * delete layouts barrel * delete components/grid barrel file * delete components/grid/utils barrel file * delete components/grid/components/common barrel file * delete components/grid/components/editor barrel file * delete components/grid/components/formatter barrel file * delete components/grid/components/grid barrel file * delete components/grid/components/header/filter barrel file * remote components/grid/store barrel file * remove components/interfaces/Auth/Policies barrel file * delete components/interfaces/Settings/Logs barrel file * delete components/ui/CodeEditor barrel file * delete components/ui/Forms barrel file * delete components/ui/Shimmers barrel file * delete data/analytics barrel file * delete hooks barrel file * cleanup lib/common/fetch barrel file * final * barral files cleanup * global react-data-grid styles * remove console.log --------- Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com> * fix build --------- Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import dayjs from 'dayjs'
|
|
|
|
import { NewProjectPanel } from 'components/interfaces/Home'
|
|
import { ProjectUsageLoadingState } from 'components/layouts/ProjectLayout/LoadingState'
|
|
import InformationBox from 'components/ui/InformationBox'
|
|
import { useProjectLogRequestsCountQuery } from 'data/analytics/project-log-requests-count-query'
|
|
import { useProjectLogStatsQuery } from 'data/analytics/project-log-stats-query'
|
|
import { useSelectedProject } from 'hooks/misc/useSelectedProject'
|
|
import { IconAlertCircle } from 'ui'
|
|
import ProjectUsage from './ProjectUsage'
|
|
|
|
const ProjectUsageSection = () => {
|
|
const project = useSelectedProject()
|
|
|
|
const {
|
|
data: usage,
|
|
error: usageError,
|
|
isLoading,
|
|
} = useProjectLogRequestsCountQuery({ projectRef: project?.ref })
|
|
|
|
// wait for the stats to load before showing the usage section
|
|
// to eliminate multiple spinners
|
|
const { isLoading: isLogsStatsLoading } = useProjectLogStatsQuery({
|
|
projectRef: project?.ref,
|
|
interval: 'hourly',
|
|
})
|
|
|
|
if (usageError) {
|
|
return (
|
|
<InformationBox
|
|
hideCollapse
|
|
defaultVisibility
|
|
icon={<IconAlertCircle strokeWidth={2} />}
|
|
title="There was an issue loading the usage details of your project"
|
|
/>
|
|
)
|
|
}
|
|
|
|
// if the project has more than 25 requests, we assume the project has usage
|
|
const hasProjectData =
|
|
usage?.result && usage.result.length > 0 ? usage.result[0].count > 25 : false
|
|
|
|
const isNewProject = dayjs(project?.inserted_at).isAfter(dayjs().subtract(2, 'day'))
|
|
|
|
return (
|
|
<>
|
|
{isLoading || isLogsStatsLoading ? (
|
|
<ProjectUsageLoadingState />
|
|
) : hasProjectData && !isNewProject ? (
|
|
<ProjectUsage />
|
|
) : (
|
|
<NewProjectPanel />
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ProjectUsageSection
|