From cbe15c98d83cf054b7eeaf70a352f98f1067121a Mon Sep 17 00:00:00 2001 From: Yosef Mihretie Date: Tue, 23 Apr 2024 18:58:09 -0400 Subject: [PATCH 1/4] wip --- dashboard/src/main/status/StatusPage.tsx | 162 +++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 dashboard/src/main/status/StatusPage.tsx diff --git a/dashboard/src/main/status/StatusPage.tsx b/dashboard/src/main/status/StatusPage.tsx new file mode 100644 index 0000000000..fc9cb637dd --- /dev/null +++ b/dashboard/src/main/status/StatusPage.tsx @@ -0,0 +1,162 @@ +import React, { useMemo } 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 midnight from "shared/themes/midnight"; +import gradient from "assets/gradient.png"; +import logo from "assets/logo.png"; + + +type Props = RouteComponentProps; + +const StatusPage: React.FC = ({ match }) => { + return ( + + + + + + <> + {Array.from({ length: 100 }).map((_, j) => ( + <> + + project-{j} + + Operational + + } + > + + + cluster-1 + Operational + + + + {Array.from({ length: 90 }).map((_, i) => ( + + ))} + + + + cluster-2 + Operational + + + + {Array.from({ length: 90 }).map((_, i) => ( + + ))} + + + + cluster-3 + Operational + + + + {Array.from({ length: 90 }).map((_, i) => ( + + ))} + + + + 90 days ago + Today + + + + + + ))} + + + + + ); +}; + +export default withRouter(StatusPage); + +const Badge = styled.div` + background: ${(props) => props.theme.clickable.bg}; + padding: 5px 10px; + border: 1px solid ${(props) => props.theme.border}; + border-radius: 5px; + font-size: 13px; +`; + +const Letter = styled.div` + height: 100%; + width: 100%; + position: absolute; + padding-bottom: 2px; + font-weight: 500; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; +`; + +const ProjectImage = styled.img` + width: 100%; + height: 100%; +`; + +const ProjectIcon = styled.div` + width: 26px; + min-width: 26px; + height: 26px; + border-radius: 3px; + overflow: hidden; + position: relative; + margin-right: 10px; + font-weight: 400; +`; + +const Bar = styled.div<{ isFirst: boolean; isLast: boolean }>` + 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: linear-gradient(#01a05d, #0f2527); +`; + +const StatusBars = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + gap: 2px; +`; + +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; +`; From 729f1cbc430e8b04c3974909084a973c86fb3e1f Mon Sep 17 00:00:00 2001 From: Yosef Mihretie Date: Wed, 24 Apr 2024 10:48:17 -0400 Subject: [PATCH 2/4] wip2 --- dashboard/src/main/Main.tsx | 13 +++++++++++++ .../main/status/{StatusPage.tsx => StatusPage2.tsx} | 7 ++++--- 2 files changed, 17 insertions(+), 3 deletions(-) rename dashboard/src/main/status/{StatusPage.tsx => StatusPage2.tsx} (95%) diff --git a/dashboard/src/main/Main.tsx b/dashboard/src/main/Main.tsx index fd300562f0..4b1d6b27d7 100644 --- a/dashboard/src/main/Main.tsx +++ b/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 { return ; } }} + /> + { + if (!this.state.isLoggedIn) { + return ; + } else if (!this.context.user?.email?.includes("@porter.run")) { + return ; + } + return ; + }} /> = ({ match }) => { + const projects = [{id: 0, name: "project-1" }, {id: 1, name: "project-2" }]; return ( @@ -25,14 +26,14 @@ const StatusPage: React.FC = ({ match }) => { <> - {Array.from({ length: 100 }).map((_, j) => ( + {projects.map((project, _) => ( <> - project-{j} + { project.name } Operational From 90cf429ed922b1a2d2fbe891f0df69911e52f3ea Mon Sep 17 00:00:00 2001 From: Yosef Mihretie Date: Wed, 24 Apr 2024 11:39:04 -0400 Subject: [PATCH 3/4] wip --- dashboard/src/main/Main.tsx | 2 +- .../src/main/status/ClusterStatusSection.tsx | 181 ++++++++++++++++++ .../src/main/status/ProjectStatusSection.tsx | 154 +++++++++++++++ .../{StatusPage2.tsx => StatusPage.tsx} | 89 ++++----- dashboard/src/shared/types.tsx | 36 ++++ 5 files changed, 407 insertions(+), 55 deletions(-) create mode 100644 dashboard/src/main/status/ClusterStatusSection.tsx create mode 100644 dashboard/src/main/status/ProjectStatusSection.tsx rename dashboard/src/main/status/{StatusPage2.tsx => StatusPage.tsx} (51%) diff --git a/dashboard/src/main/Main.tsx b/dashboard/src/main/Main.tsx index 4b1d6b27d7..fcf8252370 100644 --- a/dashboard/src/main/Main.tsx +++ b/dashboard/src/main/Main.tsx @@ -237,7 +237,7 @@ export default class Main extends Component { }} /> { if (!this.state.isLoggedIn) { return ; diff --git a/dashboard/src/main/status/ClusterStatusSection.tsx b/dashboard/src/main/status/ClusterStatusSection.tsx new file mode 100644 index 0000000000..bd94409715 --- /dev/null +++ b/dashboard/src/main/status/ClusterStatusSection.tsx @@ -0,0 +1,181 @@ +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"; + +type Props = { cluster: ClusterType, projectId: number}; + +const ClusterStatusSection: React.FC = ({ cluster, projectId }) => { + const [statusData, setStatusData] = useState({} as StatusData); + + useEffect(() => { + if (!projectId || !cluster) { + return; + } + + api + .systemStatusHistory( + "", + {}, + { + 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 ( + <> + + {cluster.name} + + Operational + + } + > + { + statusData?.cluster_health_histories && + Object.keys(statusData?.cluster_health_histories).map((key) => { + return ( + + {key} + + + {Array.from({ length: 90 }).map((_, i) => { + const status = + statusData?.cluster_health_histories[key][89 - i] ? "failure" : "healthy"; + return ( + + ); + })} + + + + ); + })} + + + ); +} + + +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 Badge = styled.div` + background: ${(props) => props.theme.clickable.bg}; + padding: 5px 10px; + border: 1px solid ${(props) => props.theme.border}; + border-radius: 5px; + font-size: 13px; +`; + +const Letter = styled.div` + height: 100%; + width: 100%; + position: absolute; + padding-bottom: 2px; + font-weight: 500; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; +`; + +const ProjectImage = styled.img` + width: 100%; + height: 100%; +`; + +const ProjectIcon = styled.div` + width: 26px; + min-width: 26px; + height: 26px; + border-radius: 3px; + overflow: hidden; + position: relative; + margin-right: 10px; + font-weight: 400; +`; + +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; +`; + +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; +`; diff --git a/dashboard/src/main/status/ProjectStatusSection.tsx b/dashboard/src/main/status/ProjectStatusSection.tsx new file mode 100644 index 0000000000..0fba0fe75e --- /dev/null +++ b/dashboard/src/main/status/ProjectStatusSection.tsx @@ -0,0 +1,154 @@ +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 = ({ project }) => { + const [clusters, setClusters] = useState([]); + + useEffect(() => { + if (!project || !project.id) { + console.log("project undefined") + return; + } + api. + getClusters( + "", + {}, + { id: project.id }, + ) + .then((res) => res.data as ClusterType[]) + .then((clustersList) => { + console.log(clustersList); + setClusters(clustersList); + }) + .catch((err) => { + console.log(err); + }); + }, [project]); + + return ( + <> + + {project.name} + + Operational + + } + > + {clusters.map((cluster, _) => ( + <> + + + {cluster.name} + Operational + + + + {Array.from({ length: 90 }).map((_, i) => ( + + ))} + + + + ))} + + + ); +} + +export default ProjectStatusSection; + +const Badge = styled.div` + background: ${(props) => props.theme.clickable.bg}; + padding: 5px 10px; + border: 1px solid ${(props) => props.theme.border}; + border-radius: 5px; + font-size: 13px; +`; + +const Letter = styled.div` + height: 100%; + width: 100%; + position: absolute; + padding-bottom: 2px; + font-weight: 500; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; +`; + +const ProjectImage = styled.img` + width: 100%; + height: 100%; +`; + +const ProjectIcon = styled.div` + width: 26px; + min-width: 26px; + height: 26px; + border-radius: 3px; + overflow: hidden; + position: relative; + margin-right: 10px; + font-weight: 400; +`; + +const Bar = styled.div<{ isFirst: boolean; isLast: boolean }>` + 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: linear-gradient(#01a05d, #0f2527); +`; + +const StatusBars = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + gap: 2px; +`; + +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; +`; diff --git a/dashboard/src/main/status/StatusPage2.tsx b/dashboard/src/main/status/StatusPage.tsx similarity index 51% rename from dashboard/src/main/status/StatusPage2.tsx rename to dashboard/src/main/status/StatusPage.tsx index 1807e11dff..0ed67908b7 100644 --- a/dashboard/src/main/status/StatusPage2.tsx +++ b/dashboard/src/main/status/StatusPage.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { withRouter, type RouteComponentProps } from "react-router"; import styled, { ThemeProvider } from "styled-components"; import { z } from "zod"; @@ -9,16 +9,47 @@ 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 = ({ match }) => { - const projects = [{id: 0, name: "project-1" }, {id: 1, name: "project-2" }]; + +const StatusPage: React.FC = () => { + const {user} = useContext(Context); + + const [projects, setProjects] = useState([{id: 0, name: "default"}]); + + useEffect(() => { + if (user === undefined || user.userId === 0) { + console.log("no user defined") + return; + } + api + .getProjects( + "", + {}, + {id: user.userId}, + ) + .then((res) => res.data as ProjectListType[]) + .then((projectList) => { + console.log(projectList); + setProjects(projectList); + }) + .catch((err) => { + console.log(err); + }); + }, [user]); + return ( @@ -28,57 +59,7 @@ const StatusPage: React.FC = ({ match }) => { <> {projects.map((project, _) => ( <> - - { project.name } - - Operational - - } - > - - - cluster-1 - Operational - - - - {Array.from({ length: 90 }).map((_, i) => ( - - ))} - - - - cluster-2 - Operational - - - - {Array.from({ length: 90 }).map((_, i) => ( - - ))} - - - - cluster-3 - Operational - - - - {Array.from({ length: 90 }).map((_, i) => ( - - ))} - - - - 90 days ago - Today - - - + ))} diff --git a/dashboard/src/shared/types.tsx b/dashboard/src/shared/types.tsx index 30a80a2ade..3a7ccfaa95 100644 --- a/dashboard/src/shared/types.tsx +++ b/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>; + service_health_histories_grouped: Record; +}; + +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; + health_statuses: HealthStatus[]; +} + +export type ServiceStatusHistory = { + system_service: SystemService; + daily_health_history: Record; +}; + +// 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; +}; + +export type GroupedServices = Record; \ No newline at end of file From 4f073dcd16aca4d493cb5bb08a3665d764b446f2 Mon Sep 17 00:00:00 2001 From: Yosef Mihretie Date: Wed, 24 Apr 2024 12:08:10 -0400 Subject: [PATCH 4/4] basic view down --- .../src/main/status/ClusterStatusSection.tsx | 186 +++++++----------- .../src/main/status/ProjectStatusSection.tsx | 85 +------- dashboard/src/main/status/StatusPage.tsx | 55 ------ 3 files changed, 78 insertions(+), 248 deletions(-) diff --git a/dashboard/src/main/status/ClusterStatusSection.tsx b/dashboard/src/main/status/ClusterStatusSection.tsx index bd94409715..056ca3857c 100644 --- a/dashboard/src/main/status/ClusterStatusSection.tsx +++ b/dashboard/src/main/status/ClusterStatusSection.tsx @@ -18,37 +18,41 @@ import gradient from "assets/gradient.png"; import api from "shared/api"; -import {StatusData, DailyHealthStatus} from "shared/types"; +import { StatusData, DailyHealthStatus } from "shared/types"; -type Props = { cluster: ClusterType, projectId: number}; +import PorterLink from "components/porter/Link"; +import Button from "components/porter/Button"; -const ClusterStatusSection: React.FC = ({ cluster, projectId }) => { + +type Props = { cluster: ClusterType, projectId: number }; + +const ClusterStatusSection: React.FC = ({ cluster, projectId }) => { const [statusData, setStatusData] = useState({} as StatusData); useEffect(() => { - if (!projectId || !cluster) { - return; - } - - api - .systemStatusHistory( - "", - {}, - { - 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); - }); + if (!projectId || !cluster) { + return; + } + + api + .systemStatusHistory( + "", + {}, + { + 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 ( <> @@ -62,32 +66,47 @@ const ClusterStatusSection: React.FC = ({ cluster, projectId }) => { Operational } + preExpanded={true} > - { - statusData?.cluster_health_histories && - Object.keys(statusData?.cluster_health_histories).map((key) => { - return ( - - {key} - - - {Array.from({ length: 90 }).map((_, i) => { - const status = - statusData?.cluster_health_histories[key][89 - i] ? "failure" : "healthy"; + { + statusData?.cluster_health_histories && + Object.keys(statusData?.cluster_health_histories).map((key) => { return ( - + + {key} + + + {Array.from({ length: 90 }).map((_, i) => { + const status = + statusData?.cluster_health_histories[key][89 - i] ? "failure" : "healthy"; + return ( + + ); + })} + + + ); - })} - - - - ); - })} + })} + + + + + ); @@ -98,54 +117,17 @@ 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 + 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 Badge = styled.div` - background: ${(props) => props.theme.clickable.bg}; - padding: 5px 10px; - border: 1px solid ${(props) => props.theme.border}; - border-radius: 5px; - font-size: 13px; -`; - -const Letter = styled.div` - height: 100%; - width: 100%; - position: absolute; - padding-bottom: 2px; - font-weight: 500; - top: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; -`; - -const ProjectImage = styled.img` - width: 100%; - height: 100%; -`; - -const ProjectIcon = styled.div` - width: 26px; - min-width: 26px; - height: 26px; - border-radius: 3px; - overflow: hidden; - position: relative; - margin-right: 10px; - font-weight: 400; -`; - const Bar = styled.div<{ isFirst: boolean; isLast: boolean; status: string }>` height: 20px; display: flex; @@ -163,19 +145,3 @@ const StatusBars = styled.div` justify-content: space-between; gap: 2px; `; - -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; -`; diff --git a/dashboard/src/main/status/ProjectStatusSection.tsx b/dashboard/src/main/status/ProjectStatusSection.tsx index 0fba0fe75e..70eaa43aef 100644 --- a/dashboard/src/main/status/ProjectStatusSection.tsx +++ b/dashboard/src/main/status/ProjectStatusSection.tsx @@ -61,18 +61,8 @@ const ProjectStatusSection: React.FC = ({ project }) => { > {clusters.map((cluster, _) => ( <> - - - {cluster.name} - Operational - - - - {Array.from({ length: 90 }).map((_, i) => ( - - ))} - - + + ))} @@ -81,74 +71,3 @@ const ProjectStatusSection: React.FC = ({ project }) => { } export default ProjectStatusSection; - -const Badge = styled.div` - background: ${(props) => props.theme.clickable.bg}; - padding: 5px 10px; - border: 1px solid ${(props) => props.theme.border}; - border-radius: 5px; - font-size: 13px; -`; - -const Letter = styled.div` - height: 100%; - width: 100%; - position: absolute; - padding-bottom: 2px; - font-weight: 500; - top: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; -`; - -const ProjectImage = styled.img` - width: 100%; - height: 100%; -`; - -const ProjectIcon = styled.div` - width: 26px; - min-width: 26px; - height: 26px; - border-radius: 3px; - overflow: hidden; - position: relative; - margin-right: 10px; - font-weight: 400; -`; - -const Bar = styled.div<{ isFirst: boolean; isLast: boolean }>` - 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: linear-gradient(#01a05d, #0f2527); -`; - -const StatusBars = styled.div` - width: 100%; - display: flex; - justify-content: space-between; - gap: 2px; -`; - -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; -`; diff --git a/dashboard/src/main/status/StatusPage.tsx b/dashboard/src/main/status/StatusPage.tsx index 0ed67908b7..3e3c276c54 100644 --- a/dashboard/src/main/status/StatusPage.tsx +++ b/dashboard/src/main/status/StatusPage.tsx @@ -72,61 +72,6 @@ const StatusPage: React.FC = () => { export default withRouter(StatusPage); -const Badge = styled.div` - background: ${(props) => props.theme.clickable.bg}; - padding: 5px 10px; - border: 1px solid ${(props) => props.theme.border}; - border-radius: 5px; - font-size: 13px; -`; - -const Letter = styled.div` - height: 100%; - width: 100%; - position: absolute; - padding-bottom: 2px; - font-weight: 500; - top: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; -`; - -const ProjectImage = styled.img` - width: 100%; - height: 100%; -`; - -const ProjectIcon = styled.div` - width: 26px; - min-width: 26px; - height: 26px; - border-radius: 3px; - overflow: hidden; - position: relative; - margin-right: 10px; - font-weight: 400; -`; - -const Bar = styled.div<{ isFirst: boolean; isLast: boolean }>` - 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: linear-gradient(#01a05d, #0f2527); -`; - -const StatusBars = styled.div` - width: 100%; - display: flex; - justify-content: space-between; - gap: 2px; -`; - const StyledStatusPage = styled.div` width: 100vw; height: 100vh;