61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import EnvTabsSwitcher from "./EnvTabsSwitcher";
|
|
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 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);
|
|
};
|
|
|
|
const loadEnv = (envTab: EnvTab) => {
|
|
console.log("loading env:", envTab);
|
|
setLoadingErr(null);
|
|
setLoadingEnv(true);
|
|
|
|
dashboardApi
|
|
.get(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} />
|
|
<EnvTabsSwitcher selectedEnv={selectedEnv} onSelect={onSelectEnvTab} />
|
|
{loadingErr && <LoadingError error={loadingErr} />}
|
|
{activeEnvironments && <EnvironmentList environments={activeEnvironments} />}
|
|
</>
|
|
);
|
|
}
|