Skip to content

Commit

Permalink
Allow changing projects and dashboards
Browse files Browse the repository at this point in the history
  • Loading branch information
tvrg committed Mar 12, 2021
1 parent 2f07920 commit 51a76f6
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 13 deletions.
2 changes: 1 addition & 1 deletion ui/src/Chart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,6 @@ const useMetrics = ({keys, limit, start, end, sort, project}: MetricRequest): Fl
.then((res) => res.json())
.then((data) => setData(data.map((m: Metric) => ({__key: m.key, ...m.values}))));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}, [keys, limit, start, end, sort, project]);
return data;
};
83 changes: 71 additions & 12 deletions ui/src/Root.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
import React from 'react';
import {Config, ConfigDashboard, useConfig} from './Config';
import {AppBar, Button, CircularProgress, Container, Paper, Toolbar, Typography} from '@material-ui/core';
import {
AppBar,
Button,
CircularProgress,
Container,
Paper,
Toolbar,
Typography,
Menu,
MenuItem,
} from '@material-ui/core';
import {Chart} from './Chart';

export const Root = () => {
Expand All @@ -18,8 +28,14 @@ export const Root = () => {
};

const WithConfig = ({config}: {config: Config}) => {
const [project] = React.useState(() => Object.keys(config.projects)[0]);
const [dashboard] = React.useState(() => config.projects[project].dashboards?.[0]);
const [project, setProject] = React.useState(() => Object.keys(config.projects)[0]);
const [dashboard, setDashboard] = React.useState(() => config.projects[project].dashboards?.[0]);

const projects = Object.keys(config.projects);
const dashboards = config.projects[project].dashboards ?? [];

const [projectAnchor, setProjectAnchor] = React.useState<null | HTMLElement>(null);
const [dashboardAnchor, setDashboardAnchor] = React.useState<null | HTMLElement>(null);

return (
<Container maxWidth="md">
Expand All @@ -28,16 +44,59 @@ const WithConfig = ({config}: {config: Config}) => {
<Typography variant="h6" style={{marginRight: 10}}>
Perfably
</Typography>
<Button variant="outlined" color="inherit" style={{marginRight: 10}}>
{project}

<Button
variant="outlined"
color="inherit"
style={{marginRight: 10}}
aria-haspopup="true"
onClick={(event) => setProjectAnchor(event.currentTarget)}>
{project ?? 'no project configured'}
</Button>
<Menu
id="project-menu"
anchorEl={projectAnchor}
keepMounted
open={Boolean(projectAnchor)}
onClose={() => setProjectAnchor(null)}>
{projects.map((project) => {
return (
<MenuItem
onClick={() => {
setProject(project);
setProjectAnchor(null);
}}>
{project}
</MenuItem>
);
})}
</Menu>

<Button
variant="outlined"
color="inherit"
aria-haspopup="true"
onClick={(event) => setDashboardAnchor(event.currentTarget)}>
{dashboard?.name ?? 'no dashboard configured'}
</Button>
{dashboard === undefined ? (
'no dashboards configured'
) : (
<Button variant="outlined" color="inherit">
{dashboard.name}
</Button>
)}
<Menu
id="dashboard-menu"
anchorEl={dashboardAnchor}
keepMounted
open={Boolean(dashboardAnchor)}
onClose={() => setDashboardAnchor(null)}>
{dashboards.map((dashboard) => {
return (
<MenuItem
onClick={() => {
setDashboard(dashboard);
setDashboardAnchor(null);
}}>
{dashboard.name}
</MenuItem>
);
})}
</Menu>
</Toolbar>
</AppBar>
{dashboard ? <Dashboard project={project} dashboard={dashboard} /> : undefined}
Expand Down

0 comments on commit 51a76f6

Please sign in to comment.