2021-03-25 14:22:43 +00:00
|
|
|
import { IconDefinition } from "@fortawesome/fontawesome-common-types";
|
|
|
|
import {
|
|
|
|
faDiscord,
|
|
|
|
faGithub,
|
|
|
|
faWikipediaW,
|
|
|
|
} from "@fortawesome/free-brands-svg-icons";
|
|
|
|
import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
2021-11-02 22:32:15 +00:00
|
|
|
import moment from "moment";
|
2021-11-03 02:16:40 +00:00
|
|
|
import React, { FunctionComponent, useState } from "react";
|
2021-03-25 14:22:43 +00:00
|
|
|
import { Col, Container, Row } from "react-bootstrap";
|
|
|
|
import { Helmet } from "react-helmet";
|
2021-11-03 02:16:40 +00:00
|
|
|
import { useIntervalWhen } from "rooks";
|
2021-05-08 14:25:29 +00:00
|
|
|
import { useSystemHealth, useSystemStatus } from "../../@redux/hooks";
|
2021-08-14 12:59:08 +00:00
|
|
|
import { AsyncOverlay } from "../../components";
|
2021-04-23 16:24:28 +00:00
|
|
|
import { GithubRepoRoot } from "../../constants";
|
2021-08-16 05:59:22 +00:00
|
|
|
import "./style.scss";
|
2021-05-08 14:25:29 +00:00
|
|
|
import Table from "./table";
|
2021-03-25 14:22:43 +00:00
|
|
|
|
|
|
|
interface InfoProps {
|
|
|
|
title: string;
|
|
|
|
children: React.ReactNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
function CRow(props: InfoProps): JSX.Element {
|
|
|
|
const { title, children } = props;
|
|
|
|
return (
|
|
|
|
<Row>
|
|
|
|
<Col sm={4}>
|
|
|
|
<b>{title}</b>
|
|
|
|
</Col>
|
|
|
|
<Col>{children}</Col>
|
|
|
|
</Row>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
interface IconProps {
|
|
|
|
icon: IconDefinition;
|
|
|
|
link: string;
|
|
|
|
children: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
function Label(props: IconProps): JSX.Element {
|
|
|
|
const { icon, link, children } = props;
|
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
<FontAwesomeIcon icon={icon} style={{ width: "2rem" }}></FontAwesomeIcon>
|
|
|
|
<a href={link} target="_blank" rel="noopener noreferrer">
|
|
|
|
{children}
|
|
|
|
</a>
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const InfoContainer: FunctionComponent<{ title: string }> = ({
|
|
|
|
title,
|
|
|
|
children,
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<Container className="py-3">
|
|
|
|
<h4>{title}</h4>
|
|
|
|
<hr></hr>
|
|
|
|
{children}
|
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
interface Props {}
|
|
|
|
|
|
|
|
const SystemStatusView: FunctionComponent<Props> = () => {
|
2021-08-14 12:59:08 +00:00
|
|
|
const health = useSystemHealth();
|
|
|
|
const status = useSystemStatus();
|
2021-03-25 14:22:43 +00:00
|
|
|
|
2021-11-02 22:32:15 +00:00
|
|
|
const [uptime, setState] = useState<string>();
|
2021-11-03 02:16:40 +00:00
|
|
|
const [intervalWhenState] = useState(true);
|
2021-11-02 22:32:15 +00:00
|
|
|
|
2021-11-03 02:16:40 +00:00
|
|
|
useIntervalWhen(
|
|
|
|
() => {
|
2021-11-02 22:32:15 +00:00
|
|
|
if (status) {
|
|
|
|
let duration = moment.duration(
|
|
|
|
moment().utc().unix() - status.start_time,
|
|
|
|
"seconds"
|
|
|
|
),
|
|
|
|
days = duration.days(),
|
|
|
|
hours = duration.hours().toString().padStart(2, "0"),
|
|
|
|
minutes = duration.minutes().toString().padStart(2, "0"),
|
|
|
|
seconds = duration.seconds().toString().padStart(2, "0");
|
|
|
|
setState(days + "d " + hours + ":" + minutes + ":" + seconds);
|
|
|
|
}
|
2021-11-03 02:16:40 +00:00
|
|
|
},
|
|
|
|
1000,
|
|
|
|
intervalWhenState,
|
|
|
|
true
|
|
|
|
);
|
2021-11-02 22:32:15 +00:00
|
|
|
|
2021-03-25 14:22:43 +00:00
|
|
|
return (
|
|
|
|
<Container className="p-5">
|
|
|
|
<Helmet>
|
|
|
|
<title>Status - Bazarr (System)</title>
|
|
|
|
</Helmet>
|
2021-05-08 14:25:29 +00:00
|
|
|
<Row>
|
2021-08-14 12:59:08 +00:00
|
|
|
<InfoContainer title="Health">
|
|
|
|
<AsyncOverlay ctx={health}>
|
|
|
|
{({ content }) => {
|
|
|
|
return <Table health={content ?? []}></Table>;
|
|
|
|
}}
|
|
|
|
</AsyncOverlay>
|
|
|
|
</InfoContainer>
|
2021-05-08 14:25:29 +00:00
|
|
|
</Row>
|
2021-03-25 14:22:43 +00:00
|
|
|
<Row>
|
|
|
|
<InfoContainer title="About">
|
|
|
|
<CRow title="Bazarr Version">
|
|
|
|
<span>{status?.bazarr_version}</span>
|
|
|
|
</CRow>
|
|
|
|
<CRow title="Operating System">
|
|
|
|
<span>{status?.operating_system}</span>
|
|
|
|
</CRow>
|
|
|
|
<CRow title="Python Version">
|
|
|
|
<span>{status?.python_version}</span>
|
|
|
|
</CRow>
|
|
|
|
<CRow title="Bazarr Directory">
|
|
|
|
<span>{status?.bazarr_directory}</span>
|
|
|
|
</CRow>
|
|
|
|
<CRow title="Bazarr Config Directory">
|
|
|
|
<span>{status?.bazarr_config_directory}</span>
|
|
|
|
</CRow>
|
2021-11-02 22:32:15 +00:00
|
|
|
<CRow title="Uptime">
|
|
|
|
<span>{uptime}</span>
|
|
|
|
</CRow>
|
2021-03-25 14:22:43 +00:00
|
|
|
</InfoContainer>
|
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
<InfoContainer title="More Info">
|
|
|
|
<CRow title="Home Page">
|
|
|
|
<Label icon={faPaperPlane} link="https://www.bazarr.media/">
|
|
|
|
Bazarr Website
|
|
|
|
</Label>
|
|
|
|
</CRow>
|
|
|
|
<CRow title="Source">
|
2021-04-23 16:24:28 +00:00
|
|
|
<Label icon={faGithub} link={GithubRepoRoot}>
|
2021-03-25 14:22:43 +00:00
|
|
|
Bazarr on Github
|
|
|
|
</Label>
|
|
|
|
</CRow>
|
|
|
|
<CRow title="Wiki">
|
2021-04-23 16:26:27 +00:00
|
|
|
<Label icon={faWikipediaW} link="https://wiki.bazarr.media">
|
2021-03-25 14:22:43 +00:00
|
|
|
Bazarr Wiki
|
|
|
|
</Label>
|
|
|
|
</CRow>
|
|
|
|
<CRow title="Discord">
|
|
|
|
<Label icon={faDiscord} link="https://discord.gg/MH2e2eb">
|
|
|
|
Bazarr on Discord
|
|
|
|
</Label>
|
|
|
|
</CRow>
|
|
|
|
</InfoContainer>
|
|
|
|
</Row>
|
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default SystemStatusView;
|