Skip to content

Commit

Permalink
feat(deploy-web): improve provider detail uptime styling (#221)
Browse files Browse the repository at this point in the history
  • Loading branch information
@baktun14
baktun14 authored Jun 3, 2024
1 parent ccd5952 commit db1ee83
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 29 deletions.
9 changes: 5 additions & 4 deletions apps/deploy-web/src/components/providers/ActiveLeasesGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { ClientProviderDetailWithStatus } from "@src/types/provider";
import Spinner from "@src/components/shared/Spinner";
import { TimeRange } from "@src/components/shared/TimeRange";
import { selectedRangeValues } from "@src/utils/constants";
import { Title } from "../shared/Title";

const Graph = dynamic(() => import("../graph/Graph"), {
ssr: false
Expand All @@ -30,12 +31,12 @@ export const ActiveLeasesGraph: React.FunctionComponent<IProps> = ({ provider })
const metricDiff = snapshotData && snapshotMetadata.unitFn(snapshotData.currentValue - snapshotData.compareValue);

return (
<div className="m-auto max-w-[800px] py-4">
<div className="m-auto max-w-[800px]">
<div className="mb-1">
<h1 className="text-center text-xl font-normal tracking-tight sm:text-left space-x-4">
<Title subTitle className="space-x-4 font-normal tracking-tight">
<span>Active Leases</span>
{provider.name && <span className="text-sm text-muted-foreground">({provider.name})</span>}
</h1>
</Title>
</div>

{!snapshotData && status === "loading" && (
Expand All @@ -46,7 +47,7 @@ export const ActiveLeasesGraph: React.FunctionComponent<IProps> = ({ provider })

{snapshotData && (
<>
<div className="mb-4 flex flex-col flex-wrap items-center justify-between sm:flex-row sm:flex-nowrap">
<div className="mb-4 flex flex-col flex-wrap justify-between sm:flex-row sm:flex-nowrap">
<div className="mb-4 basis-full sm:mb-0 sm:basis-0">
<h3 className="flex items-center text-4xl font-bold tracking-tight sm:justify-center">
<FormattedNumber value={metric.modifiedValue || metric.value} maximumFractionDigits={2} notation="compact" compactDisplay="short" />
Expand Down
77 changes: 52 additions & 25 deletions apps/deploy-web/src/components/providers/ProviderDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ import { CustomNextSeo } from "../shared/CustomNextSeo";
import Layout from "../layout/Layout";
import { UrlService, domainName } from "@src/utils/urlUtils";
import { differenceInMinutes, sub } from "date-fns";
import { Title } from "../shared/Title";
import { useTheme as useMuiTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";

const NetworkCapacity = dynamic(() => import("./NetworkCapacity"), {
ssr: false
Expand Down Expand Up @@ -54,6 +57,8 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
}
});
const isLoading = isLoadingProvider || isLoadingStatus || isLoadingLeases || isLoadingSchema;
const muiTheme = useMuiTheme();
const smallScreen = useMediaQuery(muiTheme.breakpoints.down("lg"));

useEffect(() => {
getProviderDetail();
Expand Down Expand Up @@ -82,7 +87,7 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
const sortedUptimeChecks = [...uptimeChecks].sort((a, b) => new Date(a.checkDate).getTime() - new Date(b.checkDate).getTime());

for (const snapshot of sortedUptimeChecks) {
const recentGroup = groupedSnapshots.find(x => differenceInMinutes(new Date(snapshot.checkDate), x.checkDate) < 15);
const recentGroup = groupedSnapshots.find(x => differenceInMinutes(new Date(snapshot.checkDate), x.checkDate) < (smallScreen ? 30 : 15));

if (recentGroup) {
recentGroup.checks.push(snapshot.isOnline);
Expand All @@ -100,7 +105,7 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
}));
}

const uptimePeriods = useMemo(() => groupUptimeChecksByPeriod(provider?.uptime || []), [provider?.uptime]);
const uptimePeriods = useMemo(() => groupUptimeChecksByPeriod(provider?.uptime || []), [provider?.uptime, smallScreen]);
const wasRecentlyOnline = provider && (provider.isOnline || (provider.lastOnlineDate && new Date(provider.lastOnlineDate) >= sub(new Date(), { hours: 24 })));

return (
Expand Down Expand Up @@ -139,32 +144,46 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
/>
</div>

<p className="mb-4">Up time (24h)</p>
<div className="mb-8 flex items-center space-x-1">
{uptimePeriods.map(x => (
<CustomNoDivTooltip
key={x.date.toISOString()}
title={<FormattedDate value={x.date} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />}
>
<div
className={cn("h-[24px] w-[2%] max-w-[8px] rounded-[2px]", {
"bg-green-600": x.status === "online",
"bg-destructive": x.status === "offline",
"bg-warning": x.status === "partial"
})}
/>
</CustomNoDivTooltip>
))}
</div>
<div className="grid grid-cols-1 gap-4 space-y-4 md:grid-cols-2">
<div className="basis-1/2">
<ActiveLeasesGraph provider={provider} />
</div>

<ActiveLeasesGraph provider={provider} />
<div className="order-first basis-1/2 lg:order-last">
<Title subTitle className="mb-2 font-normal tracking-tight">
Up time <span className="ml-1 text-sm">(24h)</span>
</Title>
<div className="flex items-center space-x-1">
{uptimePeriods.map(x => (
<CustomNoDivTooltip
key={x.date.toISOString()}
title={<FormattedDate value={x.date} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />}
>
<div
className={cn("h-[24px] w-[2%] max-w-[8px] rounded-[2px]", {
"bg-green-600": x.status === "online",
"bg-destructive": x.status === "offline",
"bg-warning": x.status === "partial"
})}
/>
</CustomNoDivTooltip>
))}
</div>
<div className="mt-1 flex items-center justify-between text-xs text-muted-foreground">
<span>24h ago</span>
<span>Now</span>
</div>
</div>
</div>
</>
)}

{provider && providerAttributesSchema && (
<>
<div className="mt-4">
<p className="mb-4">General Info</p>
<Title subTitle className="mb-4 font-normal tracking-tight">
General Info
</Title>

<Card className="mb-4">
<CardContent className="mb-4 grid grid-cols-1 gap-4 p-4 sm:grid-cols-2">
Expand All @@ -187,10 +206,14 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
</CardContent>
</Card>

<p className="mb-4">Specs</p>
<Title subTitle className="mb-4 font-normal tracking-tight">
Specs
</Title>
<ProviderSpecs provider={provider} />

<p className="mb-4 mt-4">Features</p>
<Title subTitle className="mb-4 mt-4 font-normal tracking-tight">
Features
</Title>
<Card className="mb-4">
<CardContent className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2">
<div>
Expand All @@ -206,7 +229,9 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
</CardContent>
</Card>

<p className="mb-4">Stats</p>
<Title subTitle className="mb-4 font-normal tracking-tight">
Stats
</Title>

<Card className="mb-4">
<CardContent className="p-4">
Expand All @@ -218,7 +243,9 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
</Card>
</div>

<p className="mb-4">Raw attributes</p>
<Title subTitle className="mb-4 font-normal tracking-tight">
Raw attributes
</Title>
<Card>
<CardContent className="p-4">
{provider.attributes.map(x => (
Expand Down

0 comments on commit db1ee83

Please sign in to comment.