mirror of
https://github.com/fosrl/pangolin.git
synced 2026-05-30 20:52:40 +00:00
Add the status to the resources and ajust location
This commit is contained in:
@@ -62,6 +62,7 @@ import { GetResourceResponse } from "@server/routers/resource/getResource";
|
|||||||
import type { ResourceContextType } from "@app/contexts/resourceContext";
|
import type { ResourceContextType } from "@app/contexts/resourceContext";
|
||||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||||
|
import UptimeBar from "@app/components/UptimeBar";
|
||||||
|
|
||||||
type MaintenanceSectionFormProps = {
|
type MaintenanceSectionFormProps = {
|
||||||
resource: GetResourceResponse;
|
resource: GetResourceResponse;
|
||||||
@@ -578,6 +579,19 @@ export default function GeneralForm() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SettingsContainer>
|
<SettingsContainer>
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>Uptime</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
Site availability over the last 90 days.
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
<SettingsSectionBody>
|
||||||
|
{resource?.resourceId && (
|
||||||
|
<UptimeBar resourceId={resource.resourceId} days={90} />
|
||||||
|
)}
|
||||||
|
</SettingsSectionBody>
|
||||||
|
</SettingsSection>
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
|
|||||||
@@ -113,6 +113,19 @@ export default function GeneralPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingsContainer>
|
<SettingsContainer>
|
||||||
|
<SettingsSection>
|
||||||
|
<SettingsSectionHeader>
|
||||||
|
<SettingsSectionTitle>Uptime</SettingsSectionTitle>
|
||||||
|
<SettingsSectionDescription>
|
||||||
|
Site availability over the last 90 days.
|
||||||
|
</SettingsSectionDescription>
|
||||||
|
</SettingsSectionHeader>
|
||||||
|
<SettingsSectionBody>
|
||||||
|
{site?.siteId && (
|
||||||
|
<UptimeBar siteId={site.siteId} days={90} />
|
||||||
|
)}
|
||||||
|
</SettingsSectionBody>
|
||||||
|
</SettingsSection>
|
||||||
<SettingsSection>
|
<SettingsSection>
|
||||||
<SettingsSectionHeader>
|
<SettingsSectionHeader>
|
||||||
<SettingsSectionTitle>
|
<SettingsSectionTitle>
|
||||||
@@ -225,19 +238,6 @@ export default function GeneralPage() {
|
|||||||
</Button>
|
</Button>
|
||||||
</SettingsSectionFooter>
|
</SettingsSectionFooter>
|
||||||
</SettingsSection>
|
</SettingsSection>
|
||||||
<SettingsSection>
|
|
||||||
<SettingsSectionHeader>
|
|
||||||
<SettingsSectionTitle>Uptime</SettingsSectionTitle>
|
|
||||||
<SettingsSectionDescription>
|
|
||||||
Site availability over the last 90 days.
|
|
||||||
</SettingsSectionDescription>
|
|
||||||
</SettingsSectionHeader>
|
|
||||||
<SettingsSectionBody>
|
|
||||||
{site?.siteId && (
|
|
||||||
<UptimeBar siteId={site.siteId} days={90} />
|
|
||||||
)}
|
|
||||||
</SettingsSectionBody>
|
|
||||||
</SettingsSection>
|
|
||||||
</SettingsContainer>
|
</SettingsContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -516,7 +516,7 @@ export default function ProxyResourcesTable({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "statusHistory",
|
id: "statusHistory",
|
||||||
friendlyName: t("statusHistory"),
|
friendlyName: t("uptime30d"),
|
||||||
header: () => <span className="p-3">{t("statusHistory")}</span>,
|
header: () => <span className="p-3">{t("statusHistory")}</span>,
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const resourceRow = row.original;
|
const resourceRow = row.original;
|
||||||
|
|||||||
@@ -47,6 +47,7 @@ const barColorClass: Record<string, string> = {
|
|||||||
type UptimeBarProps = {
|
type UptimeBarProps = {
|
||||||
orgId?: string;
|
orgId?: string;
|
||||||
siteId?: number;
|
siteId?: number;
|
||||||
|
resourceId?: number;
|
||||||
healthCheckId?: number;
|
healthCheckId?: number;
|
||||||
days?: number;
|
days?: number;
|
||||||
title?: string;
|
title?: string;
|
||||||
@@ -56,6 +57,7 @@ type UptimeBarProps = {
|
|||||||
export default function UptimeBar({
|
export default function UptimeBar({
|
||||||
orgId,
|
orgId,
|
||||||
siteId,
|
siteId,
|
||||||
|
resourceId,
|
||||||
healthCheckId,
|
healthCheckId,
|
||||||
days = 90,
|
days = 90,
|
||||||
title,
|
title,
|
||||||
@@ -71,11 +73,20 @@ export default function UptimeBar({
|
|||||||
|
|
||||||
const hcQuery = useQuery({
|
const hcQuery = useQuery({
|
||||||
...orgQueries.healthCheckStatusHistory({ orgId: orgId ?? "", healthCheckId: healthCheckId ?? 0, days }),
|
...orgQueries.healthCheckStatusHistory({ orgId: orgId ?? "", healthCheckId: healthCheckId ?? 0, days }),
|
||||||
enabled: healthCheckId != null && siteId == null,
|
enabled: healthCheckId != null && siteId == null && resourceId == null,
|
||||||
meta: { api }
|
meta: { api }
|
||||||
});
|
});
|
||||||
|
|
||||||
const { data, isLoading } = siteId != null ? siteQuery : hcQuery;
|
const resourceQuery = useQuery({
|
||||||
|
...orgQueries.resourceStatusHistory({ resourceId, days }),
|
||||||
|
enabled: resourceId != null && siteId == null && healthCheckId == null,
|
||||||
|
meta: { api }
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data, isLoading } =
|
||||||
|
siteId != null ? siteQuery :
|
||||||
|
resourceId != null ? resourceQuery :
|
||||||
|
hcQuery;
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -323,6 +323,23 @@ export const orgQueries = {
|
|||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
resourceStatusHistory: ({
|
||||||
|
resourceId,
|
||||||
|
days = 90
|
||||||
|
}: {
|
||||||
|
resourceId?: number;
|
||||||
|
days?: number;
|
||||||
|
}) =>
|
||||||
|
queryOptions({
|
||||||
|
queryKey: ["RESOURCE_STATUS_HISTORY", resourceId, days] as const,
|
||||||
|
queryFn: async ({ signal, meta }) => {
|
||||||
|
const res = await meta!.api.get<
|
||||||
|
AxiosResponse<StatusHistoryResponse>
|
||||||
|
>(`/resource/${resourceId}/status-history?days=${days}`, { signal });
|
||||||
|
return res.data.data;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
healthCheckStatusHistory: ({
|
healthCheckStatusHistory: ({
|
||||||
orgId,
|
orgId,
|
||||||
healthCheckId,
|
healthCheckId,
|
||||||
|
|||||||
Reference in New Issue
Block a user