Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

front: show dust incidents in UI #8105

Merged
merged 1 commit into from
Oct 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 28 additions & 8 deletions front/components/navigation/NavigationSidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -184,18 +184,38 @@ export const NavigationSidebar = React.forwardRef<

function AppStatusBanner() {
const { appStatus } = useAppStatus();
const { providerStatus } = appStatus ?? {};

if (!appStatus || !providerStatus) {
if (!appStatus) {
return null;
}

return (
<div className="space-y-2 border-y border-pink-200 bg-pink-100 px-3 py-3 text-xs text-pink-900">
<div className="font-bold">{providerStatus.name}</div>
<div className="font-normal">{providerStatus.description}</div>
</div>
);
const { providersStatus, dustStatus } = appStatus;

if (dustStatus) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we can only display one banner at a time?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dust has priority on providers. Only one at a time

return (
<div className="space-y-2 border-y border-pink-200 bg-pink-100 px-3 py-3 text-xs text-pink-900">
<div className="font-bold">{dustStatus.name}</div>
<div className="font-normal">{dustStatus.description}</div>
<div>
Check our{" "}
<Link href={dustStatus.link} target="_blank" className="underline">
status page
</Link>{" "}
for updates.
</div>
</div>
);
}
if (providersStatus) {
return (
<div className="space-y-2 border-y border-pink-200 bg-pink-100 px-3 py-3 text-xs text-pink-900">
<div className="font-bold">{providersStatus.name}</div>
<div className="font-normal">{providersStatus.description}</div>
</div>
);
}

return null;
}

function SubscriptionEndBanner({ endDate }: { endDate: number }) {
Expand Down
7 changes: 5 additions & 2 deletions front/lib/api/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,11 @@ const config = {
return EnvironmentConfig.getEnvVariable("TEXT_EXTRACTION_URL");
},
// Status page.
getProviderStatusPageId: (): string => {
return EnvironmentConfig.getEnvVariable("PROVIDER_STATUS_PAGE_ID");
getStatusPageProvidersPageId: (): string => {
return EnvironmentConfig.getEnvVariable("STATUS_PAGE_PROVIDERS_PAGE_ID");
},
getStatusPageDustPageId: (): string => {
return EnvironmentConfig.getEnvVariable("STATUS_PAGE_DUST_PAGE_ID");
},
getStatusPageApiToken: (): string => {
return EnvironmentConfig.getEnvVariable("STATUS_PAGE_API_TOKEN");
Expand Down
59 changes: 46 additions & 13 deletions front/lib/api/status/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,70 @@ import { cacheWithRedis, isDevelopment } from "@dust-tt/types";
import config from "@app/lib/api/config";
import { getUnresolvedIncidents } from "@app/lib/api/status/status_page";

async function getProviderStatus() {
async function getProvidersStatus() {
if (isDevelopment()) {
return null;
}

const providerIncidents = await getUnresolvedIncidents({
const providersIncidents = await getUnresolvedIncidents({
apiToken: config.getStatusPageApiToken(),
pageId: config.getProviderStatusPageId(),
pageId: config.getStatusPageProvidersPageId(),
});

if (providerIncidents.length === 0) {
if (providersIncidents.length > 0) {
const [incident] = providersIncidents;
const { name, incident_updates: incidentUpdates } = incident;
const [latestUpdate] = incidentUpdates;
return {
name,
description: latestUpdate.body,
link: incident.shortlink,
};
}

return null;
}

async function getDustStatus() {
if (isDevelopment()) {
return null;
}

const [incident] = providerIncidents;
const { name, incident_updates: incidentUpdates } = incident;
const [latestUpdate] = incidentUpdates;
const dustIncidents = await getUnresolvedIncidents({
apiToken: config.getStatusPageApiToken(),
pageId: config.getStatusPageDustPageId(),
});

if (dustIncidents.length > 0) {
const [incident] = dustIncidents;
const { name, incident_updates: incidentUpdates } = incident;
const [latestUpdate] = incidentUpdates;
return {
name,
description: latestUpdate.body,
link: incident.shortlink,
};
}

return {
name,
description: latestUpdate.body,
link: incident.shortlink,
};
return null;
}

export const getProviderStatusMemoized = cacheWithRedis(
getProviderStatus,
getProvidersStatus,
() => {
return "provider-status";
},
// Caches data for 2 minutes to limit frequent API calls.
// Status page rate limit is pretty aggressive.
2 * 60 * 1000
);

export const getDustStatusMemoized = cacheWithRedis(
getDustStatus,
() => {
return "dust-status";
},
// Caches data for 2 minutes to limit frequent API calls.
// Status page rate limit is pretty aggressive.
2 * 60 * 1000
);
19 changes: 15 additions & 4 deletions front/pages/api/app-status.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
import type { WithAPIErrorResponse } from "@dust-tt/types";
import type { NextApiRequest, NextApiResponse } from "next";

import { getProviderStatusMemoized } from "@app/lib/api/status";
import {
getDustStatusMemoized,
getProviderStatusMemoized,
} from "@app/lib/api/status";
import { withSessionAuthentication } from "@app/lib/api/wrappers";
import { getSession } from "@app/lib/auth";
import { apiError } from "@app/logger/withlogging";

export interface GetAppStatusResponseBody {
providerStatus: {
dustStatus: {
description: string;
link: string;
name: string;
} | null;
providersStatus: {
description: string;
link: string;
name: string;
Expand All @@ -34,9 +42,12 @@ async function handler(
});
}

const providerStatus = await getProviderStatusMemoized();
const [providersStatus, dustStatus] = await Promise.all([
getProviderStatusMemoized(),
getDustStatusMemoized(),
]);

res.status(200).json({ providerStatus });
res.status(200).json({ providersStatus, dustStatus });
}

export default withSessionAuthentication(handler);
Loading