system status view across clusters

dashboard/src/main/Main.tsx

@@ -16,6 +16,8 @@ import VerifyEmail from "./auth/VerifyEmail";
 import CurrentError from "./CurrentError";
 import Home from "./home/Home";
 
+import StatusPage from "./status/StatusPage";
+
 type PropsType = {};
 
 type StateType = {
@@ -233,6 +235,17 @@ export default class Main extends Component<PropsType, StateType> {
               return <Redirect to="/login" />;
             }
           }}
+        />
+         <Route
+          path={`/status`}
+          render={() => {
+            if (!this.state.isLoggedIn) {
+              return <Redirect to="/login" />;
+            } else if (!this.context.user?.email?.includes("@porter.run")) {
+              return <Redirect to="/dashboard" />;
+            }
+            return <StatusPage />;
+          }}
         />
         <Route
           path={`/:baseRoute/:cluster?/:namespace?`}

dashboard/src/main/status/ClusterStatusSection.tsx

@@ -0,0 +1,147 @@
+import React, { useContext, useEffect, useState } from "react";
+
+import { ProjectListType, ClusterType } from "shared/types";
+
+import styled from "styled-components";
+import Container from "components/porter/Container";
+import Expandable from "components/porter/Expandable";
+import Image from "components/porter/Image";
+import Spacer from "components/porter/Spacer";
+import logo from "assets/logo.png";
+
+import Back from "components/porter/Back";
+import Text from "components/porter/Text";
+import { Context } from "shared/Context";
+
+import midnight from "shared/themes/midnight";
+import gradient from "assets/gradient.png";
+
+import api from "shared/api";
+
+import { StatusData, DailyHealthStatus } from "shared/types";
+
+import PorterLink from "components/porter/Link";
+import Button from "components/porter/Button";
+
+
+type Props = { cluster: ClusterType, projectId: number };
+
+const ClusterStatusSection: React.FC<Props> = ({ cluster, projectId }) => {
+    const [statusData, setStatusData] = useState<StatusData>({} as StatusData);
+
+    useEffect(() => {
+        if (!projectId || !cluster) {
+            return;
+        }
+
+        api
+            .systemStatusHistory(
+                "<token>",
+                {},
+                {
+                    projectId,
+                    clusterId: cluster.id,
+                }
+            )
+            .then(({ data }) => {
+                console.log(data);
+                setStatusData({
+                    cluster_health_histories: data.cluster_status_histories,
+                    service_health_histories_grouped: {},
+                });
+            })
+            .catch((err) => {
+                console.error(err);
+            });
+    }, [projectId, cluster]);
+    return (
+        <>
+            <Expandable
+                key={cluster.id}
+                alt
+                header={
+                    <Container row>
+                        <Text size={16}> {cluster.name} </Text>
+                        <Spacer x={1} inline />
+                        <Text color="#01a05d">Operational</Text>
+                    </Container>
+                }
+                preExpanded={true}
+            >
+                {
+                    statusData?.cluster_health_histories &&
+                    Object.keys(statusData?.cluster_health_histories).map((key) => {
+                        return (
+                            <React.Fragment key={key}>
+                                <Text color="helper">{key}</Text>
+                                <Spacer y={0.25} />
+                                <StatusBars>
+                                    {Array.from({ length: 90 }).map((_, i) => {
+                                        const status =
+                                            statusData?.cluster_health_histories[key][89 - i] ? "failure" : "healthy";
+                                        return (
+                                            <Bar
+                                                key={i}
+                                                isFirst={i === 0}
+                                                isLast={i === 89}
+                                                status={status}
+                                            />
+                                        );
+                                    })}
+                                </StatusBars>
+                                <Spacer y={0.25} />
+                            </React.Fragment>
+                        );
+                    })}
+                <Spacer y={0.25} />
+                <PorterLink to={`/infrastructure/${cluster.id}/systemStatus`}>
+                    <Button
+                        alt
+                        height="20px"
+                    >
+                        More
+                        <Spacer inline x={1} />{" "}
+                        <i className="material-icons" style={{ fontSize: "18px" }}>
+                            east
+                        </i>
+                    </Button>
+                </PorterLink>
+                <Spacer y={0.25} />
+            </Expandable>
+        </>
+    );
+}
+
+
+export default ClusterStatusSection;
+
+const getBackgroundGradient = (status: string): string => {
+    switch (status) {
+        case "healthy":
+            return "linear-gradient(#01a05d, #0f2527)";
+        case "failure":
+            return "linear-gradient(#E1322E, #25100f)";
+        case "partial_failure":
+            return "linear-gradient(#E49621, #25270f)";
+        default:
+            return "linear-gradient(#76767644, #76767622)"; // Default or unknown status
+    }
+}
+
+const Bar = styled.div<{ isFirst: boolean; isLast: boolean; status: string }>`
+  height: 20px;
+  display: flex;
+  flex: 1;
+  border-top-left-radius: ${(props) => (props.isFirst ? "5px" : "0")};
+  border-bottom-left-radius: ${(props) => (props.isFirst ? "5px" : "0")};
+  border-top-right-radius: ${(props) => (props.isLast ? "5px" : "0")};
+  border-bottom-right-radius: ${(props) => (props.isLast ? "5px" : "0")};
+  background: ${(props) => getBackgroundGradient(props.status)};
+`;
+
+const StatusBars = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 2px;
+`;

dashboard/src/main/status/ProjectStatusSection.tsx

@@ -0,0 +1,73 @@
+import React, { useContext, useEffect, useState } from "react";
+
+import { ProjectListType, ClusterType } from "shared/types";
+
+import styled from "styled-components";
+import Container from "components/porter/Container";
+import Expandable from "components/porter/Expandable";
+import Image from "components/porter/Image";
+import Spacer from "components/porter/Spacer";
+import logo from "assets/logo.png";
+
+import Back from "components/porter/Back";
+import Text from "components/porter/Text";
+import { Context } from "shared/Context";
+
+import midnight from "shared/themes/midnight";
+import gradient from "assets/gradient.png";
+
+import api from "shared/api";
+
+import ClusterStatusSection from "./ClusterStatusSection";
+
+type Props = { project: ProjectListType };
+
+const ProjectStatusSection: React.FC<Props> = ({ project }) => {
+    const [clusters, setClusters] = useState<ClusterType[]>([]);
+
+    useEffect(() => {
+        if (!project || !project.id) {
+            console.log("project undefined")
+            return;
+        }
+        api.
+            getClusters(
+                "<token>",
+                {},
+                { id: project.id },
+            )
+            .then((res) => res.data as ClusterType[])
+            .then((clustersList) => {
+                console.log(clustersList);
+                setClusters(clustersList);
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    }, [project]);
+
+    return (
+        <>
+            <Expandable
+                key={project.id}
+                alt
+                header={
+                    <Container row>
+                        <Text size={16}> {project.name} </Text>
+                        <Spacer x={1} inline />
+                        <Text color="#01a05d">Operational</Text>
+                    </Container>
+                }
+            >
+                {clusters.map((cluster, _) => (
+                    <>
+                        <ClusterStatusSection cluster={cluster} projectId={project.id} />
+                        <Spacer y={1} />
+                    </>
+                ))}
+            </Expandable>
+        </>
+    );
+}
+
+export default ProjectStatusSection;

dashboard/src/main/status/StatusPage.tsx

@@ -0,0 +1,89 @@
+import React, { useContext, useEffect, useState } from "react";
+import { withRouter, type RouteComponentProps } from "react-router";
+import styled, { ThemeProvider } from "styled-components";
+import { z } from "zod";
+
+import Back from "components/porter/Back";
+import Container from "components/porter/Container";
+import Expandable from "components/porter/Expandable";
+import Image from "components/porter/Image";
+import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
+import { Context } from "shared/Context";
+
+import midnight from "shared/themes/midnight";
+import gradient from "assets/gradient.png";
+import logo from "assets/logo.png";
+
+import { ProjectListType, ClusterType } from "shared/types";
+import api from "shared/api";
+import ProjectStatusSection from "./ProjectStatusSection";
+
+
+
+type Props = RouteComponentProps;
+
+
+const StatusPage: React.FC<Props> = () => {
+  const {user} = useContext(Context);
+
+  const [projects, setProjects] = useState<ProjectListType[]>([{id: 0, name: "default"}]);
+
+  useEffect(() => {
+    if (user === undefined || user.userId === 0) {
+      console.log("no user defined")
+      return;
+    }
+    api
+    .getProjects(
+      "<token>",
+      {},
+      {id: user.userId},
+    )
+    .then((res) => res.data as ProjectListType[])
+    .then((projectList) => {
+      console.log(projectList);
+      setProjects(projectList);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+  }, [user]);
+
+  return (
+    <ThemeProvider theme={midnight}>
+      <StyledStatusPage>
+        <StatusSection>
+          <Image src={logo} size={30} />
+          <Spacer y={1.5} />
+            <>
+              {projects.map((project, _) => (
+                <>
+                  <ProjectStatusSection project={project} />
+                  <Spacer y={1} />
+                </>
+              ))}
+            </>
+        </StatusSection>
+      </StyledStatusPage>
+    </ThemeProvider>
+  );
+};
+
+export default withRouter(StatusPage);
+
+const StyledStatusPage = styled.div`
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  padding-top: 50px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const StatusSection = styled.div`
+  width: calc(100% - 40px);
+  padding-bottom: 50px;
+  max-width: 1000px;
+`;

dashboard/src/shared/types.tsx

@@ -781,3 +781,39 @@ export type AppEventWebhook = {
   app_event_status: string;
   payload_encryption_key: string;
 };
+
+export type StatusData = {
+  cluster_health_histories: Record<string, Record<number, DailyHealthStatus>>;
+  service_health_histories_grouped: Record<string, GroupedService[]>;
+};
+
+export type SystemService = {
+  name: string;
+  namespace: string;
+  involved_object_type: string;
+};
+
+export type HealthStatus = {
+  start_time: string;
+  end_time: string;
+  status: "failure" | "healthy" | "partial_failure" | "undefined";
+  description: string;
+};
+
+export type DailyHealthStatus = {
+  status_percentages: Record<string, number>;
+  health_statuses: HealthStatus[];
+}
+
+export type ServiceStatusHistory = {
+  system_service: SystemService;
+  daily_health_history: Record<number, DailyHealthStatus>;
+};
+
+// If you're also grouping services by namespace and want a type for the grouped structure:
+export type GroupedService = {
+  system_service: SystemService;
+  daily_health_history: Record<number, DailyHealthStatus>;
+};
+
+export type GroupedServices = Record<string, GroupedService[]>;