mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Dashboard (#24)

Browse Source 
* UI: Dashboard

* h1 MinIO Console

* UI: Dashboard

* h1 MinIO Console

* Formatting

* paramter fix

Co-authored-by: Lenin Alevski <alevsk.8772@gmail.com>
This commit is contained in:
Daniel Valdivia
2020-04-03 15:46:42 -07:00
committed by GitHub
parent 1e4ed121e9
commit 36602311fa
6 changed files with 311 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
portal-ui/src/screens/Console/Buckets/ViewBucket/AddEvent.tsx
View File

@@ -126,9 +126,13 @@ class AddEvent extends React.Component<IAddEventProps, IAddEventState> {
api
.invoke("GET", `/api/v1/admin/arns`)
.then((res: ArnList) => {
let arns: string[] = [];
if (res.arns !== null) {
arns = res.arns;
}
this.setState({
addLoading: false,
arnList: res.arns,
arnList: arns,
addError: ""
});
})

398
portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
View File

@@ -14,232 +14,210 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import React, { useEffect, useState } from "react";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import clsx from "clsx";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import {
CartesianGrid,
Line,
LineChart,
ResponsiveContainer,
Legend,
Tooltip,
XAxis,
YAxis
} from "recharts";
import NetworkCheckIcon from '@material-ui/icons/NetworkCheck';
import PieChartIcon from '@material-ui/icons/PieChart';
import ViewHeadlineIcon from '@material-ui/icons/ViewHeadline';
import NetworkCheckIcon from "@material-ui/icons/NetworkCheck";
import PieChartIcon from "@material-ui/icons/PieChart";
import ViewHeadlineIcon from "@material-ui/icons/ViewHeadline";
import { Usage } from "./types";
import api from "../../../common/api";
const useStyles = makeStyles(theme => ({
root: {
display: "flex"
},
toolbar: {
paddingRight: 24 // keep right padding when drawer closed
},
toolbarIcon: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "0 8px",
...theme.mixins.toolbar
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
menuButton: {
marginRight: 36
},
menuButtonHidden: {
display: "none"
},
title: {
flexGrow: 1
},
drawerPaperClose: {
overflowX: "hidden",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
width: theme.spacing(7),
[theme.breakpoints.up("sm")]: {
width: theme.spacing(9)
}
},
appBarSpacer: theme.mixins.toolbar,
content: {
flexGrow: 1,
height: "100vh",
overflow: "auto"
},
container: {
paddingBottom: theme.spacing(4),
"& h6": {
color: "#777777",
fontSize: 14,
const styles = (theme: Theme) =>
createStyles({
root: {
display: "flex"
},
"& p": {
"& span": {
fontSize: 16,
toolbar: {
paddingRight: 24 // keep right padding when drawer closed
},
toolbarIcon: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "0 8px",
...theme.mixins.toolbar
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
menuButton: {
marginRight: 36
},
menuButtonHidden: {
display: "none"
},
title: {
flexGrow: 1
},
drawerPaperClose: {
overflowX: "hidden",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
width: theme.spacing(7),
[theme.breakpoints.up("sm")]: {
width: theme.spacing(9)
}
},
appBarSpacer: theme.mixins.toolbar,
content: {
flexGrow: 1,
height: "100vh",
overflow: "auto"
},
container: {
paddingBottom: theme.spacing(4),
"& h6": {
color: "#777777",
fontSize: 14
},
"& p": {
"& span": {
fontSize: 16
}
}
},
},
paper: {
padding: theme.spacing(2),
display: "flex",
overflow: "auto",
flexDirection: "column"
},
fixedHeight: {
minHeight: 240,
},
consumptionValue: {
color: "#000000",
fontSize: "60px",
fontWeight: "bold",
},
icon: {
marginRight: 10,
color: "#777777",
},
}));
paper: {
padding: theme.spacing(2),
display: "flex",
overflow: "auto",
flexDirection: "column"
},
fixedHeight: {
minHeight: 240
},
consumptionValue: {
color: "#000000",
fontSize: "60px",
fontWeight: "bold"
},
icon: {
marginRight: 10,
color: "#777777"
}
});
export default function Dashboard() {
const theme = useTheme();
const classes = useStyles(theme);
interface IDashboardProps {
classes: any;
}
const Dashboard = ({ classes }: IDashboardProps) => {
const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
const [usage, setUsage] = useState<Usage | null>(null);
const [loading, isLoading] = useState<boolean>(true);
const [error, setError] = useState<string>("");
const data = [39,31,37,29,28,31,31,34,39,40,35,40,24,25,30,20,28,38,23,28,22,39,37,37,40,28,28,28,24,31].map((usage, day ) => ({ usage, day }));
const data2 = [25,32,21,40,31,30,23,40,26,32].map((usage, day ) => ({ usage, day }));
useEffect(() => {
if (loading) {
fetchUsage();
}
}, [loading]);
const fetchUsage = () => {
api
.invoke("GET", `/api/v1/admin/info`)
.then((res: Usage) => {
setUsage(res);
setError("");
isLoading(false);
})
.catch(err => {
setError(err);
isLoading(false);
});
};
const prettyUsage = (usage: string | undefined) => {
if (usage == undefined) {
return "0";
}
return niceBytes(usage);
};
const units = ["bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
const niceBytes = (x: string) => {
let l = 0,
n = parseInt(x, 10) || 0;
while (n >= 1024 && ++l) {
n = n / 1024;
}
//include a decimal point and a tenths-place digit if presenting
//less than ten of KB or greater units
return n.toFixed(n < 10 && l > 0 ? 1 : 0) + " " + units[l];
};
const prettyNumber = (usage: number | undefined) => {
if (usage == undefined) {
return 0;
}
return usage;
};
return (
<Grid container xs={12}>
<Grid container xs={12} spacing={3} className={classes.container}>
<Grid item xs={12} md={4} lg={4}>
<Paper className={fixedHeightPaper}>
<Grid container direction="row" alignItems="center">
<Grid item className={classes.icon}>
<ViewHeadlineIcon/>
<React.Fragment>
<Grid container xs={12}>
<Grid container xs={12} spacing={3} className={classes.container}>
<Grid container xs={12}>
<Typography variant="h2">MinIO Console</Typography>
</Grid>
<Grid item xs={12} md={4} lg={4}>
<Paper className={fixedHeightPaper}>
<Grid container direction="row" alignItems="center">
<Grid item className={classes.icon}>
<ViewHeadlineIcon />
</Grid>
<Grid item>
<Typography variant="h6">Total Buckets</Typography>
</Grid>
</Grid>
<Grid item>
<Typography variant="h6">All Buckets</Typography>
<Typography className={classes.consumptionValue}>
{usage ? prettyNumber(usage.buckets) : 0}
</Typography>
</Paper>
</Grid>
<Grid item xs={12} md={4} lg={4}>
<Paper className={fixedHeightPaper}>
<Grid container direction="row" alignItems="center">
<Grid item className={classes.icon}>
<NetworkCheckIcon />
</Grid>
<Grid item>
<Typography variant="h6"> Total Objects</Typography>
</Grid>
</Grid>
</Grid>
<Typography className={classes.consumptionValue}>238</Typography>
</Paper>
</Grid>
<Grid item xs={12} md={4} lg={4}>
<Paper className={fixedHeightPaper}>
<Grid container direction="row" alignItems="center">
<Grid item className={classes.icon}>
<PieChartIcon/>
<Typography className={classes.consumptionValue}>
{usage ? prettyNumber(usage.objects) : 0}
</Typography>
</Paper>
</Grid>
<Grid item xs={12} md={4} lg={4}>
<Paper className={fixedHeightPaper}>
<Grid container direction="row" alignItems="center">
<Grid item className={classes.icon}>
<PieChartIcon />
</Grid>
<Grid item>
<Typography variant="h6">Usage</Typography>
</Grid>
</Grid>
<Grid item>
<Typography variant="h6">Usage</Typography>
</Grid>
</Grid>
<Typography className={classes.consumptionValue}>375<span>TB</span></Typography>
</Paper>
</Grid>
<Grid item xs={12} md={4} lg={4}>
<Paper className={fixedHeightPaper}>
<Grid container direction="row" alignItems="center">
<Grid item className={classes.icon}>
<NetworkCheckIcon/>
</Grid>
<Grid item>
<Typography variant="h6"> Egress this Month</Typography>
</Grid>
</Grid>
<Typography className={classes.consumptionValue}>1.5<span>TB</span></Typography>
</Paper>
<Typography className={classes.consumptionValue}>
{usage ? prettyUsage(usage.usage + "") : 0}
</Typography>
</Paper>
</Grid>
</Grid>
</Grid>
<Grid container xs={12} spacing={3} className={classes.container}>
<Grid item xs={8}>
<Paper className={fixedHeightPaper}>
<Typography variant="h6">Daily Average Usage</Typography>
<ResponsiveContainer width="100%" height={400}>
<LineChart
data={data}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
type="number"
domain={[1, 31]}
interval={0}
dataKey="day"
axisLine={false}
tickLine={false}
/>
<YAxis
dataKey="usage"
width={80}
tick={{ fill: "#737373" }}
dx={-5}
axisLine={false}
tickLine={false}
/>
<Tooltip />
<Legend />
<Line
strokeWidth={2}
yAxisId={0}
type="monotone"
dataKey="usage"
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
</LineChart>
</ResponsiveContainer>
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={fixedHeightPaper}>
<Typography variant="h6">Daily Network Egress</Typography>
<ResponsiveContainer width="100%" height={400}>
<LineChart
data={data2}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
type="number"
dataKey="day"
axisLine={false}
tickLine={false}
/>
<YAxis
dataKey="usage"
tick={{ fill: "#737373" }}
dx={-5}
axisLine={false}
tickLine={false}
/>
<Tooltip />
<Legend />
<Line
strokeWidth={2}
yAxisId={0}
type="monotone"
dataKey="usage"
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
</LineChart>
</ResponsiveContainer>
</Paper>
</Grid>
</Grid>
</Grid>
</React.Fragment>
);
}
};
export default withStyles(styles)(Dashboard);

21
portal-ui/src/screens/Console/Dashboard/types.tsx Normal file
View File

@@ -0,0 +1,21 @@
// This file is part of MinIO Console Server
// Copyright (c) 2020 MinIO, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
export interface Usage {
usage: number;
buckets: number;
objects: number;
}

27
portal-ui/src/screens/Console/Policies/AddPolicy.tsx
View File

@@ -32,7 +32,7 @@ import api from "../../../common/api";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
import PolicyBuilder from "./PolicyBuilder";
import {Policy} from "./types";
import { Policy } from "./types";
require("codemirror/mode/javascript/javascript");
const styles = (theme: Theme) =>
@@ -144,7 +144,6 @@ class AddPolicy extends React.Component<IAddPolicyProps, IAddPolicyState> {
id="standard-basic"
fullWidth
label="Policy Name"
value={policyEdit ? policyEdit.name : ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
this.setState({ policyName: e.target.value });
}}
@@ -170,17 +169,19 @@ class AddPolicy extends React.Component<IAddPolicyProps, IAddPolicyState> {
<Grid item xs={12}>
<br />
</Grid>
{!policyEdit && <Grid item xs={12}>
<Button
type="submit"
variant="contained"
color="primary"
fullWidth
disabled={addLoading}
>
Save
</Button>
</Grid>}
{!policyEdit && (
<Grid item xs={12}>
<Button
type="submit"
variant="contained"
color="primary"
fullWidth
disabled={addLoading}
>
Save
</Button>
</Grid>
)}
{addLoading && (
<Grid item xs={12}>
<LinearProgress />

8
portal-ui/src/screens/Console/Policies/Policies.tsx
View File

@@ -120,7 +120,7 @@ class Policies extends React.Component<IPoliciesProps, IPoliciesState> {
deleteOpen: false,
selectedPolicy: "",
filterPolicies: "",
policyEdit: null,
policyEdit: null
};
fetchRecords() {
@@ -187,7 +187,7 @@ class Policies extends React.Component<IPoliciesProps, IPoliciesState> {
deleteOpen,
selectedPolicy,
filterPolicies,
policyEdit,
policyEdit
} = this.state;
const offset = page * rowsPerPage;
@@ -250,7 +250,7 @@ class Policies extends React.Component<IPoliciesProps, IPoliciesState> {
onClick={() => {
this.setState({
addScreenOpen: true,
policyEdit: null,
policyEdit: null
});
}}
>
@@ -294,7 +294,7 @@ class Policies extends React.Component<IPoliciesProps, IPoliciesState> {
onClick={() => {
this.setState({
addScreenOpen: true,
policyEdit: row,
policyEdit: row
});
}}
>

106
portal-ui/src/screens/Console/Policies/PolicyBuilder.tsx
View File

@@ -15,16 +15,24 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import {createStyles, Theme, withStyles} from "@material-ui/core/styles";
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import remove from "lodash/remove";
import {Checkbox, FormControlLabel, FormGroup, FormLabel, Paper, Radio, RadioGroup} from "@material-ui/core";
import {Statement} from "./types";
import {
Checkbox,
FormControlLabel,
FormGroup,
FormLabel,
Paper,
Radio,
RadioGroup
} from "@material-ui/core";
import { Statement } from "./types";
const styles = (theme: Theme) =>
createStyles({
root: {
flexGrow: 1,
flexGrow: 1
},
errorBlock: {
color: "red"
@@ -38,9 +46,9 @@ const styles = (theme: Theme) =>
},
paper: {
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
},
textAlign: "center",
color: theme.palette.text.secondary
}
});
interface IPolicyBuilderProps {
@@ -56,22 +64,29 @@ interface IPolicyBuilderState {
currentStatementRead: boolean;
}
class PolicyBuilder extends React.Component<IPolicyBuilderProps, IPolicyBuilderState> {
class PolicyBuilder extends React.Component<
IPolicyBuilderProps,
IPolicyBuilderState
> {
state: IPolicyBuilderState = {
policyString: "",
statements: [],
currentStatement: {
effect: "",
actions: [],
resources: [],
resources: []
},
currentStatementWrite: false,
currentStatementRead: false,
currentStatementRead: false
};
render() {
const { classes, policyDefinition } = this.props;
const { currentStatement,currentStatementWrite, currentStatementRead } = this.state;
const {
currentStatement,
currentStatementWrite,
currentStatementRead
} = this.state;
console.log(currentStatement);
return (
<div className={classes.root}>
@@ -85,12 +100,25 @@ class PolicyBuilder extends React.Component<IPolicyBuilderProps, IPolicyBuilderS
aria-label="effect"
name="effect"
value={currentStatement.effect}
onChange={(e: React.ChangeEvent<HTMLInputElement>, value: string) => {
this.setState( { currentStatement: { ...currentStatement, effect: value }});
onChange={(
e: React.ChangeEvent<HTMLInputElement>,
value: string
) => {
this.setState({
currentStatement: { ...currentStatement, effect: value }
});
}}
>
<FormControlLabel value="Deny" control={<Radio />} label="Deny" />
<FormControlLabel value="Allow" control={<Radio />} label="Allow" />
<FormControlLabel
value="Deny"
control={<Radio />}
label="Deny"
/>
<FormControlLabel
value="Allow"
control={<Radio />}
label="Allow"
/>
</RadioGroup>
</Paper>
</Grid>
@@ -102,16 +130,30 @@ class PolicyBuilder extends React.Component<IPolicyBuilderProps, IPolicyBuilderS
control={
<Checkbox
checked={currentStatementRead}
onChange={(e: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
const readActions = ["s3:ListBucket", "s3:GetObject", "s3:GetBucketLocation"];
onChange={(
e: React.ChangeEvent<HTMLInputElement>,
checked: boolean
) => {
const readActions = [
"s3:ListBucket",
"s3:GetObject",
"s3:GetBucketLocation"
];
let actions = currentStatement.actions;
if (checked) {
actions.push(...readActions)
actions.push(...readActions);
} else {
actions = remove(actions, (action) => readActions.includes(action))
actions = remove(actions, action =>
readActions.includes(action)
);
}
this.setState( { currentStatement: { ...currentStatement, actions: actions }});
this.setState( { currentStatementRead: checked });
this.setState({
currentStatement: {
...currentStatement,
actions: actions
}
});
this.setState({ currentStatementRead: checked });
}}
name="read"
/>
@@ -122,16 +164,26 @@ class PolicyBuilder extends React.Component<IPolicyBuilderProps, IPolicyBuilderS
control={
<Checkbox
checked={currentStatementWrite}
onChange={(e: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
onChange={(
e: React.ChangeEvent<HTMLInputElement>,
checked: boolean
) => {
const writeActions = ["s3:PutObject"];
let actions = currentStatement.actions;
if (checked) {
actions.push(...writeActions)
actions.push(...writeActions);
} else {
actions = remove(actions, (action) => writeActions.includes(action))
actions = remove(actions, action =>
writeActions.includes(action)
);
}
this.setState( { currentStatement: { ...currentStatement, actions: actions }});
this.setState( { currentStatementWrite: checked });
this.setState({
currentStatement: {
...currentStatement,
actions: actions
}
});
this.setState({ currentStatementWrite: checked });
}}
name="write"
/>
@@ -150,7 +202,7 @@ class PolicyBuilder extends React.Component<IPolicyBuilderProps, IPolicyBuilderS
</Grid>
</Grid>
</div>
)
);
}
}