forked from cerc-io/laconic-console
eb6bcd9c95
Use Moustache to create template and set config in page. Use babel plugins to process GQL (and fix GQL queries). Added service type.
129 lines
2.9 KiB
JavaScript
129 lines
2.9 KiB
JavaScript
//
|
|
// Copyright 2020 DxOS.org
|
|
//
|
|
|
|
import clsx from 'clsx';
|
|
import moment from 'moment';
|
|
import React, { useContext, useEffect, useState } from 'react';
|
|
import { makeStyles } from '@material-ui/core';
|
|
import Link from '@material-ui/core/Link';
|
|
import Toolbar from '@material-ui/core/Toolbar';
|
|
import ErrorIcon from '@material-ui/icons/Error';
|
|
import LoadingIcon from '@material-ui/icons/Wifi';
|
|
import RunningIcon from '@material-ui/icons/CheckCircle';
|
|
import PublicIcon from '@material-ui/icons/Public';
|
|
import grey from '@material-ui/core/colors/grey';
|
|
import green from '@material-ui/core/colors/green';
|
|
import red from '@material-ui/core/colors/red';
|
|
|
|
import { ConsoleContext, useStatusReducer } from '../hooks';
|
|
|
|
import Error from '../components/Error';
|
|
|
|
import VersionCheck from './VersionCheck';
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
flex: 1,
|
|
justifyContent: 'space-between',
|
|
backgroundColor: grey[900],
|
|
color: grey[400]
|
|
},
|
|
left: {
|
|
display: 'flex',
|
|
width: 160
|
|
},
|
|
right: {
|
|
display: 'flex',
|
|
width: 160,
|
|
justifyContent: 'flex-end'
|
|
},
|
|
center: {
|
|
display: 'flex',
|
|
fontFamily: 'monospace',
|
|
fontSize: 'large',
|
|
'& div': {
|
|
margin: 4
|
|
}
|
|
},
|
|
icon: {
|
|
margin: '0 2px'
|
|
},
|
|
link: {
|
|
color: grey[400]
|
|
},
|
|
error: {
|
|
color: red[500]
|
|
},
|
|
running: {
|
|
color: green[500]
|
|
},
|
|
loading: {
|
|
color: theme.palette.primary.dark
|
|
}
|
|
}));
|
|
|
|
/**
|
|
* Displays status indicators at the bottom of the page.
|
|
*/
|
|
const StatusBar = () => {
|
|
const classes = useStyles();
|
|
const [{ loading, error }] = useStatusReducer();
|
|
const [isLoading, setLoading] = useState(loading);
|
|
const { config } = useContext(ConsoleContext);
|
|
const { build: { name, buildDate, version } } = config;
|
|
|
|
useEffect(() => {
|
|
let t;
|
|
if (loading) {
|
|
setLoading(loading);
|
|
t = setTimeout(() => {
|
|
setLoading(false);
|
|
}, 1000);
|
|
}
|
|
|
|
return () => clearTimeout(t);
|
|
}, [loading]);
|
|
|
|
const StatusIcon = ({ error }) => {
|
|
if (error) {
|
|
return (
|
|
<ErrorIcon className={clsx(classes.icon, classes.error)} />
|
|
);
|
|
} else {
|
|
return (
|
|
<RunningIcon className={clsx(classes.icon, classes.running)} />
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Toolbar className={classes.root}>
|
|
<div className={classes.left}>
|
|
<Link className={classes.link} href={config.app.website} rel="noreferrer" target="_blank">
|
|
<PublicIcon />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className={classes.center}>
|
|
<div>{name} ({version})</div>
|
|
<div>{moment(buildDate).format('L')}</div>
|
|
<VersionCheck />
|
|
</div>
|
|
|
|
<div className={classes.right}>
|
|
<LoadingIcon className={clsx(classes.icon, isLoading && classes.loading)} />
|
|
<StatusIcon error={error} />
|
|
</div>
|
|
</Toolbar>
|
|
|
|
<Error error={error} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default StatusBar;
|