Intis/pingator
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Many nice things

Browse Source
This commit is contained in:
Eden Kirin
2024-01-24 21:58:39 +01:00
parent 76b1a2d4e9
commit 490f2bdde6
20 changed files with 298 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
package-lock.json generated
View File

@ -19,6 +19,7 @@
"@types/node": "^16.18.75",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"axios": "^1.6.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.3",
@ -5646,6 +5647,29 @@
"node": ">=4"
}
},
"node_modules/axios": {
"version": "1.6.5",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz",
"integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==",
"dependencies": {
"follow-redirects": "^1.15.4",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/axios/node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/axobject-query": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@ -14900,6 +14924,11 @@
"node": ">= 0.10"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/psl": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

1
package.json
View File

@ -14,6 +14,7 @@
"@types/node": "^16.18.75",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"axios": "^1.6.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.3",

38
public/index.html
View File

@ -1,43 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<meta name="description" content="Web site created using create-react-app" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
</body>
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

10
public/manifest.json
View File

@ -6,16 +6,6 @@
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",

17
src/api/common.ts Normal file
View File

@ -0,0 +1,17 @@
import axios from "axios";
export class ApiBase {}
const commonHeaders = {
"Content-Type": "application/json",
Accept: "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Max-Age": 60,
};
export const axiosInstance = axios.create({
timeout: 5000,
headers: {
...commonHeaders,
},
});

12
src/api/dashboard.ts Normal file
View File

@ -0,0 +1,12 @@
import { axiosInstance, ApiBase } from "./common";
class DashboardApi extends ApiBase {
get = async (endpoint: string) => {
return axiosInstance.get(endpoint, {});
};
getFake = async (endpoint: string) => {
return axiosInstance.get("http://localhost:8002", {});
};
}
export const dashboardApi = new DashboardApi();

1
src/api/index.ts Normal file
View File

@ -0,0 +1 @@
export { dashboardApi } from "./dashboard";

57
src/components/Dashboard.tsx
View File

@ -1,11 +1,60 @@
import React from "react";
import EnvTabsContainer from "./EnvTabsContainer";
import { EnvTab } from "../types";
import LoadingIndicator from "./LoadingIndicator";
import { DashboardLoadError, DashboardResponseContent, EnvTab, Environment } from "../types";
import { ENVIRONMENT_TABS } from "../const";
import { dashboardApi } from "../api";
import { AxiosError } from "axios";
import LoadingError from "./LoadingError";
import EnvironmentList from "./dashboard/EnvironmentList";
export default function Dashboard() {
const onSelectEnvTab = (tab: EnvTab): void => {
console.log("tab changed:", tab);
const defaultEnv = ENVIRONMENT_TABS[0];
const [selectedEnv, setSelectedEnv] = React.useState(defaultEnv);
const [loadingEnv, setLoadingEnv] = React.useState(false);
const [loadingErr, setLoadingErr] = React.useState<DashboardLoadError | null>(null);
const [activeEnvironments, setActiveEnvironments] = React.useState<Environment[] | null>(null);
React.useEffect(() => {
loadEnv(defaultEnv);
}, []);
const onSelectEnvTab = (envTab: EnvTab): void => {
loadEnv(envTab);
};
return <EnvTabsContainer onSelect={onSelectEnvTab} />;
const loadEnv = (envTab: EnvTab) => {
console.log("loading env:", envTab);
setLoadingErr(null);
setLoadingEnv(true);
dashboardApi
.getFake(envTab.dashboardEndpoint)
.then((response) => {
return response.data.content;
})
.then((data: DashboardResponseContent) => {
setActiveEnvironments(data.environments);
})
.catch((error: AxiosError) => {
console.error(error);
setLoadingErr({
message: error.message,
url: envTab.dashboardEndpoint,
});
})
.finally(() => {
setLoadingEnv(false);
});
};
return (
<>
<LoadingIndicator active={loadingEnv} />
<EnvTabsContainer selectedEnv={selectedEnv} onSelect={onSelectEnvTab} />
{loadingErr && <LoadingError error={loadingErr} />}
{activeEnvironments && <EnvironmentList environments={activeEnvironments} />}
</>
);
}

9
src/components/EnvTabsContainer.tsx
View File

@ -10,13 +10,12 @@ interface OnSelectTab {
}
interface EnvTabsContainerProps {
selectedEnv: EnvTab;
onSelect: OnSelectTab;
}
export default function EnvTabsContainer({ onSelect }: EnvTabsContainerProps) {
const defaultTab = ENVIRONMENT_TABS[0];
const [selected, setSelected] = React.useState(defaultTab);
export default function EnvTabsContainer({ selectedEnv, onSelect }: EnvTabsContainerProps) {
const [selected, setSelected] = React.useState(selectedEnv);
const handleChange = (event: React.SyntheticEvent, newValue: EnvTab) => {
setSelected(newValue);
@ -28,7 +27,7 @@ export default function EnvTabsContainer({ onSelect }: EnvTabsContainerProps) {
});
return (
<Box sx={{ width: "100%" }}>
<Box sx={{ width: "100%", marginBottom: "2rem" }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs value={selected} onChange={handleChange}>
{tabs}

17
src/components/LoadingError.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
import { DashboardLoadError } from "../types";
import Alert from "@mui/material/Alert";
import AlertTitle from "@mui/material/AlertTitle";
interface LoadingErrorProps {
error: DashboardLoadError;
}
export default function LoadingError({ error }: LoadingErrorProps) {
return (
<Alert severity="error">
<AlertTitle>{error.message}</AlertTitle>
<p>URL: {error.url}</p>
</Alert>
);
}

15
src/components/LoadingIndicator.tsx Normal file
View File

@ -0,0 +1,15 @@
import React from "react";
import Box from "@mui/material/Box";
import LinearProgress from "@mui/material/LinearProgress";
interface LoadingIndicatorProps {
active: boolean;
}
export default function LoadingIndicator({ active }: LoadingIndicatorProps) {
return (
<Box sx={{ width: "100%" }}>
{active ? <LinearProgress /> : <Box className="linear-progress-placeholder" />}
</Box>
);
}

24
src/components/dashboard/EnvironmentList.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from "react";
import { Environment } from "../../types";
import TenantList from "./TenantList";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
interface EnvironmentListProps {
environments: Environment[];
}
export default function EnvironmentList({ environments }: EnvironmentListProps) {
const envItems = environments.map((env) => {
return (
<Box className="environment">
<Typography component={"h1"} key={env.name} className="title">
{env.name}
</Typography>
<TenantList tenants={env.tenants} />
</Box>
);
});
return <Box className="environment-list">{envItems}</Box>;
}

22
src/components/dashboard/ServiceList.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from "react";
import { Service } from "../../types";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
interface ServiceListProps {
services: Service[];
}
export default function ServiceList({ services }: ServiceListProps) {
const serviceItems = services.map((service) => {
return (
<Box className="service-card">
<Typography component={"h1"} key={service.name} className="service-name">
{service.name}
</Typography>
</Box>
);
});
return <Box className="service-list">{serviceItems}</Box>;
}

25
src/components/dashboard/TenantList.tsx Normal file
View File

@ -0,0 +1,25 @@
import React from "react";
import { Tenant } from "../../types";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import ServiceList from "./ServiceList";
interface TenantListProps {
tenants: Tenant[];
}
export default function TenantList({ tenants: tenants }: TenantListProps) {
const tenantItems = tenants.map((tenant) => {
const tenantName = tenant.name !== "default" ? `Tenant: ${tenant.name}` : "Multitenant";
return (
<Box className="tenant">
<Typography component={"h1"} key={tenant.name} className="tenant-name">
{tenantName}
</Typography>
<ServiceList services={tenant.services} />
</Box>
);
});
return <Box className="tenant-list">{tenantItems}</Box>;
}

1
src/scss/_app-header.scss
View File

@ -3,7 +3,6 @@
color: whitesmoke;
padding: 1rem 0 1rem 0;
box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.31);
margin-bottom: 1rem;
h1 {
font-size: 2rem;
letter-spacing: 5px;

3
src/scss/_linear-progress.scss Normal file
View File

@ -0,0 +1,3 @@
.linear-progress-placeholder {
height: 4px;
}

1
src/scss/styles.scss
View File

@ -1,2 +1,3 @@
@import "common";
@import "app-header";
@import "linear-progress";

46
src/types.tsx
View File

@ -3,3 +3,49 @@ export type EnvTab = {
id: string;
dashboardEndpoint: string;
};
type StatusPerTenant = { [tenantId: string]: boolean };
type HealthCheckStatus = {
status_ok: boolean;
message: string;
status_per_tenant: StatusPerTenant | null;
};
type AppDetails = {
app_name: string;
app_version: string;
template_name: string | null;
template_version: string | null;
};
type Node = {
name: string;
url: string;
app_details: AppDetails | null;
health_check_status: HealthCheckStatus;
};
export type Service = {
name: string;
nodes: Node[];
};
export type Tenant = {
name: string;
services: Service[];
};
export type Environment = {
name: string;
tenants: Tenant[];
};
export type DashboardResponseContent = {
environments: Environment[];
};
export type DashboardLoadError = {
url: string;
message: string;
};