Skip to content

Commit

Permalink
basic view down
Browse files Browse the repository at this point in the history
  • Loading branch information
@yosefmih
yosefmih committed Apr 24, 2024
1 parent 90cf429 commit 4f073dc
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 248 deletions.
186 changes: 76 additions & 110 deletions dashboard/src/main/status/ClusterStatusSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<Props> = ({ cluster, projectId }) => {

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);
});
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 (
<>
Expand All @@ -62,32 +66,47 @@ const ClusterStatusSection: React.FC<Props> = ({ cluster, projectId }) => {
<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";
{
statusData?.cluster_health_histories &&
Object.keys(statusData?.cluster_health_histories).map((key) => {
return (
<Bar
key={i}
isFirst={i === 0}
isLast={i === 89}
status={status}
/>
<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>
);
})}
</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>
</>
);
Expand All @@ -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;
Expand All @@ -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;
`;
85 changes: 2 additions & 83 deletions dashboard/src/main/status/ProjectStatusSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,18 +61,8 @@ const ProjectStatusSection: React.FC<Props> = ({ project }) => {
>
{clusters.map((cluster, _) => (
<>
<Spacer y={0.25} />
<Container row spaced>
<Text color="helper">{cluster.name}</Text>
<Text color="#01a05d">Operational</Text>
</Container>
<Spacer y={0.25} />
<StatusBars>
{Array.from({ length: 90 }).map((_, i) => (
<Bar key={i} isFirst={i === 0} isLast={i === 89} />
))}
</StatusBars>
<Spacer y={0.5} />
<ClusterStatusSection cluster={cluster} projectId={project.id} />
<Spacer y={1} />
</>
))}
</Expandable>
Expand All @@ -81,74 +71,3 @@ const ProjectStatusSection: React.FC<Props> = ({ 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;
`;
55 changes: 0 additions & 55 deletions dashboard/src/main/status/StatusPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,61 +72,6 @@ const StatusPage: React.FC<Props> = () => {

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;
Expand Down

0 comments on commit 4f073dc

Please sign in to comment.