Add storage to service status (#19004)

* Add storage to service status

* Fix

* Add flag for storage enabled in ServiceStatus

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
This commit is contained in:
Joshen LimandAlaister Young authored and GitHub committed 2023-11-16 13:59:01 +08:00
1 parent bea412fd14
commit 93256239df
1 file changed
+105 -50
@@ -19,8 +19,17 @@ const ServiceStatus = () => {
const project = useSelectedProject()
const [open, setOpen] = useState(false)
const { projectAuthAll: authEnabled, projectEdgeFunctionAll: edgeFunctionsEnabled } =
useIsFeatureEnabled(['project_auth:all', 'project_edge_function:all'])
const {
projectAuthAll: authEnabled,
projectEdgeFunctionAll: edgeFunctionsEnabled,
realtimeAll: realtimeEnabled,
projectStorageAll: storageEnabled,
} = useIsFeatureEnabled([
'project_auth:all',
'project_edge_function:all',
'realtime:all',
'project_storage:all',
])
const isBranch = project?.parentRef !== project?.ref
@@ -40,23 +49,65 @@ const ServiceStatus = () => {
const storageStatus = status?.find((service) => service.name === 'storage')
// [Joshen] Need individual troubleshooting docs for each service eventually for users to self serve
const services = [
const services: {
name: string
error?: string
docsUrl?: string
isLoading: boolean
isSuccess?: boolean
}[] = [
{
name: 'Database',
docsUrls: undefined,
error: undefined,
docsUrl: undefined,
isLoading: isLoadingPostgres,
isSuccess: isSuccessPostgres,
},
{ name: 'PostgREST', docsUrls: undefined, isLoading, isSuccess: restStatus?.healthy },
{
name: 'PostgREST',
error: restStatus?.error,
docsUrl: undefined,
isLoading,
isSuccess: restStatus?.healthy,
},
...(authEnabled
? [{ name: 'Auth', docsUrls: undefined, isLoading, isSuccess: authStatus?.healthy }]
? [
{
name: 'Auth',
error: authStatus?.error,
docsUrl: undefined,
isLoading,
isSuccess: authStatus?.healthy,
},
]
: []),
...(realtimeEnabled
? [
{
name: 'Realtime',
error: realtimeStatus?.error,
docsUrl: undefined,
isLoading,
isSuccess: realtimeStatus?.healthy,
},
]
: []),
...(storageEnabled
? [
{
name: 'Storage',
error: storageStatus?.error,
docsUrl: undefined,
isLoading,
isSuccess: storageStatus?.healthy,
},
]
: []),
{ name: 'Realtime', docsUrls: undefined, isLoading, isSuccess: realtimeStatus?.healthy },
// { name: 'Storage', docsUrls: undefined, isLoading, isSuccess: storageStatus?.healthy },
...(edgeFunctionsEnabled
? [
{
name: 'Edge Functions',
error: undefined,
docsUrl: 'https://supabase.com/docs/guides/functions/troubleshooting',
isLoading,
isSuccess: edgeFunctionsStatus?.healthy,
@@ -69,50 +120,54 @@ const ServiceStatus = () => {
const allServicesOperational = services.every((service) => service.isSuccess)
return (
<Popover_Shadcn_ modal={false} open={open} onOpenChange={setOpen}>
<PopoverTrigger_Shadcn_ asChild>
<Button
type="default"
icon={
isLoadingChecks ? (
<IconLoader className="animate-spin" />
) : allServicesOperational ? (
<div className="w-2 h-2 rounded-full bg-brand" />
) : (
<div className="w-2 h-2 rounded-full bg-amber-900" />
)
}
>
{isBranch ? 'Preview Branch' : 'Project'} Status
</Button>
</PopoverTrigger_Shadcn_>
<PopoverContent_Shadcn_ className="p-0 w-56" side="bottom" align="end">
{services.map((service) => (
<div
key={service.name}
className="px-4 py-2 text-xs flex items-center justify-between border-b"
<div>
<Popover_Shadcn_ modal={false} open={open} onOpenChange={setOpen}>
<PopoverTrigger_Shadcn_ asChild>
<Button
type="default"
icon={
isLoadingChecks ? (
<IconLoader className="animate-spin" />
) : (
<div
className={`w-2 h-2 rounded-full ${
allServicesOperational ? 'bg-brand' : 'bg-amber-900'
}`}
/>
)
}
>
<div>
<p>{service.name}</p>
<p className="text-foreground-light">
{service.isLoading
? 'Checking status'
: service.isSuccess
? 'No issues'
: 'Unable to connect'}
</p>
{isBranch ? 'Preview Branch' : 'Project'} Status
</Button>
</PopoverTrigger_Shadcn_>
<PopoverContent_Shadcn_ className="p-0 w-56" side="bottom" align="end">
{services.map((service) => (
<div
key={service.name}
className="px-4 py-2 text-xs flex items-center justify-between border-b last:border-none"
>
<div>
<p>{service.name}</p>
<p className="text-foreground-light">
{service.isLoading
? 'Checking status'
: service.isSuccess
? 'No issues'
: 'Unable to connect'}
</p>
</div>
{service.isLoading ? (
<IconLoader className="animate-spin" size="tiny" />
) : service.isSuccess ? (
<CheckCircle2 className="text-brand" size={18} strokeWidth={1.5} />
) : (
<AlertTriangle className="text-amber-900" size={18} strokeWidth={1.5} />
)}
</div>
{service.isLoading ? (
<IconLoader className="animate-spin" size="tiny" />
) : service.isSuccess ? (
<CheckCircle2 className="text-brand" size={18} strokeWidth={1.5} />
) : (
<AlertTriangle className="text-amber-900" size={18} strokeWidth={1.5} />
)}
</div>
))}
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
))}
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
</div>
)
}