Customization of Dashboard page & improved some styles (#315)
Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
GitHub
File diff suppressed because one or more lines are too long
67
portal-ui/public/images/BG_IllustrationDarker.svg
Normal file
67
portal-ui/public/images/BG_IllustrationDarker.svg
Normal file
@@ -0,0 +1,67 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 368.999 192.934">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1{opacity:0.35;}.cls-12,.cls-15,.cls-16,.cls-17,.cls-2,.cls-5,.cls-6,.cls-7,.cls-8{opacity:0.5;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-9{fill:none;stroke:#707070;stroke-miterlimit:10;}.cls-4{stroke-width:1px;}.cls-10,.cls-11,.cls-5,.cls-9{stroke-width:1.2px;}.cls-5{stroke-dasharray:2.619
|
||||
2.182;}.cls-12,.cls-15,.cls-16,.cls-17,.cls-5,.cls-6,.cls-7,.cls-8{isolation:isolate;}.cls-6{stroke-width:1.6px;stroke-dasharray:2.144
|
||||
1.786;}.cls-7{stroke-width:1.6px;stroke-dasharray:2.23 1.858;}.cls-10{stroke-dasharray:2.646
|
||||
2.204;}.cls-11{stroke-dasharray:2.585 2.154;}.cls-12{stroke-width:1.8px;stroke-dasharray:2.484
|
||||
2.07;}.cls-13{stroke-dasharray:2.984 2.487;}.cls-14{stroke-dasharray:2.773
|
||||
2.311;}.cls-16{stroke-width:1.8px;}.cls-17{stroke-width:1.8px;}
|
||||
</style>
|
||||
</defs>
|
||||
<title>BG_Illustration</title>
|
||||
<g id="Layer_2" data-name="Layer 2">
|
||||
<g id="Layer_1-2" data-name="Layer 1">
|
||||
<g id="BG_Illustration" data-name="BG Illustration" class="cls-1">
|
||||
<g id="Group_118" data-name="Group 118" class="cls-2">
|
||||
<path id="Path_56" data-name="Path 56" class="cls-3"
|
||||
d="M211.5,140.678l-52.726,29.078L79.687,126.139V29.652L132.411.571,211.5,44.188Z"/>
|
||||
<path id="Path_58" data-name="Path 58" class="cls-3"
|
||||
d="M158.776,169.756V73.271L211.5,44.193,158.776,73.271,79.688,29.654"/>
|
||||
<path id="Path_59" data-name="Path 59" class="cls-4" d="M84.681,41l69.1,38.11v79.3l-69.1-38.11Z"/>
|
||||
<line id="Line_37" data-name="Line 37" class="cls-4" x1="106.25" y1="52.782" x2="106.25"
|
||||
y2="132.086"/>
|
||||
<line id="Line_38" data-name="Line 38" class="cls-4" x1="153.783" y1="92.327" x2="106.25"
|
||||
y2="65.999"/>
|
||||
<line id="Line_39" data-name="Line 39" class="cls-4" x1="153.783" y1="105.545" x2="106.25"
|
||||
y2="79.217"/>
|
||||
<line id="Line_40" data-name="Line 40" class="cls-4" x1="153.783" y1="118.762" x2="106.25"
|
||||
y2="92.434"/>
|
||||
<line id="Line_41" data-name="Line 41" class="cls-4" x1="153.783" y1="131.979" x2="106.25"
|
||||
y2="105.651"/>
|
||||
<line id="Line_42" data-name="Line 42" class="cls-4" x1="153.783" y1="145.197" x2="106.25"
|
||||
y2="118.869"/>
|
||||
<path id="Path_60" data-name="Path 60" class="cls-4"
|
||||
d="M166.723,151.031l38.8-22.487V62.916L166.723,85.4Z"/>
|
||||
</g>
|
||||
<path id="Path_62" data-name="Path 62" class="cls-5" d="M117.106,148.062l-76.18,43.33"/>
|
||||
<path id="Path_63" data-name="Path 63" class="cls-6" d="M271.394,167.271l-44.483,25.3"/>
|
||||
<path id="Path_64" data-name="Path 64" class="cls-7" d="M190.722,155.708l61.951,36.031"/>
|
||||
<path id="Path_65" data-name="Path 65" class="cls-5" d="M237.7,36.385l28.182,17.229"/>
|
||||
<g id="Path_66" data-name="Path 66" class="cls-8">
|
||||
<line class="cls-9" x1="362.563" y1="69.327" x2="361.42" y2="68.688"/>
|
||||
<line class="cls-10" x1="359.496" y1="67.613" x2="305.418" y2="37.39"/>
|
||||
<polyline class="cls-9" points="304.456 36.852 303.313 36.213 302.158 36.83"/>
|
||||
<line class="cls-11" x1="300.258" y1="37.844" x2="213.418" y2="84.213"/>
|
||||
<line class="cls-9" x1="212.468" y1="84.72" x2="211.313" y2="85.337"/>
|
||||
</g>
|
||||
<path id="Path_67" data-name="Path 67" class="cls-12"
|
||||
d="M79.648,192.571,31.786,166.344h-.868l-23.579,14.2"/>
|
||||
<g id="Path_68" data-name="Path 68" class="cls-8">
|
||||
<line class="cls-3" x1="22.871" y1="84.641" x2="24.156" y2="83.867"/>
|
||||
<line class="cls-13" x1="26.286" y1="82.584" x2="48.654" y2="69.113"/>
|
||||
<polyline class="cls-3" points="49.719 68.471 51.004 67.698 52.307 68.441"/>
|
||||
<line class="cls-14" x1="54.315" y1="69.585" x2="75.395" y2="81.606"/>
|
||||
<line class="cls-3" x1="76.399" y1="82.178" x2="77.702" y2="82.921"/>
|
||||
</g>
|
||||
<circle id="Ellipse_11" data-name="Ellipse 11" class="cls-15" cx="4.092" cy="183.59" r="3.592"/>
|
||||
<circle id="Ellipse_12" data-name="Ellipse 12" class="cls-15" cx="274.986" cy="165.477" r="3.592"/>
|
||||
<ellipse id="Ellipse_13" data-name="Ellipse 13" class="cls-16" cx="364.957" cy="71.922" rx="3.592"
|
||||
ry="2.904"/>
|
||||
<circle id="Ellipse_14" data-name="Ellipse 14" class="cls-15" cx="19.279" cy="87.681" r="3.592"/>
|
||||
<ellipse id="Ellipse_15" data-name="Ellipse 15" class="cls-17" cx="234.106" cy="32.58" rx="3.592"
|
||||
ry="2.649"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
75
portal-ui/src/icons/AllBucketsIcon.tsx
Normal file
75
portal-ui/src/icons/AllBucketsIcon.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
// 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/>.
|
||||
|
||||
import React from "react";
|
||||
import { SvgIcon } from "@material-ui/core";
|
||||
class AllBucketsIcon extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<SvgIcon viewBox="0 0 15.834 17.375">
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="a"
|
||||
y1="0.5"
|
||||
x2="1"
|
||||
y2="0.5"
|
||||
gradientUnits="objectBoundingBox"
|
||||
>
|
||||
<stop offset="0.044" stopColor="#362585" />
|
||||
<stop offset="0.301" stopColor="#281b6f" />
|
||||
<stop offset="1" stopColor="#1e1560" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(0 0.375)">
|
||||
<circle
|
||||
style={{ opacity: 0.1, fill: "url(#a)" }}
|
||||
cx="6.625"
|
||||
cy="6.625"
|
||||
r="6.625"
|
||||
transform="translate(0 3.75)"
|
||||
/>
|
||||
<g transform="translate(3.092)">
|
||||
<ellipse
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#707070",
|
||||
strokeMiterlimit: 10,
|
||||
strokeWidth: "0.75px",
|
||||
}}
|
||||
cx="6.183"
|
||||
cy="1.244"
|
||||
rx="6.183"
|
||||
ry="1.244"
|
||||
transform="translate(0)"
|
||||
/>
|
||||
<path
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#707070",
|
||||
strokeMiterlimit: 10,
|
||||
strokeWidth: "0.75px",
|
||||
}}
|
||||
d="M-3722.174,1225.225l-1.687,10.292a.858.858,0,0,1-.578.669,12.182,12.182,0,0,1-3.918.647,12.187,12.187,0,0,1-3.894-.639.878.878,0,0,1-.6-.678q-.843-5.145-1.687-10.291"
|
||||
transform="translate(3734.541 -1223.981)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</SvgIcon>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AllBucketsIcon;
|
||||
37
portal-ui/src/icons/ConsoleIcon.tsx
Normal file
37
portal-ui/src/icons/ConsoleIcon.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
// 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/>.
|
||||
|
||||
import React from "react";
|
||||
import { SvgIcon } from "@material-ui/core";
|
||||
class ConsoleIcon extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<SvgIcon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
|
||||
<g transform="translate(-518 -361)">
|
||||
<path
|
||||
d="M-126,0V10h10V0Zm1.5,8.5V2.95h7V8.5Z"
|
||||
transform="translate(644 361)"
|
||||
/>
|
||||
<rect width="2" height="1" transform="translate(520.272 364.772)" />
|
||||
</g>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ConsoleIcon;
|
||||
73
portal-ui/src/icons/EgressIcon.tsx
Normal file
73
portal-ui/src/icons/EgressIcon.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
// 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/>.
|
||||
|
||||
import React from "react";
|
||||
import { SvgIcon } from "@material-ui/core";
|
||||
class EgressIcon extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<SvgIcon viewBox="0 0 18.344 17.009">
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="a"
|
||||
y1="0.5"
|
||||
x2="1"
|
||||
y2="0.5"
|
||||
gradientUnits="objectBoundingBox"
|
||||
>
|
||||
<stop offset="0.044" stopColor="#362585" />
|
||||
<stop offset="0.301" stopColor="#281b6f" />
|
||||
<stop offset="1" stopColor="#1e1560" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(0 0.25)">
|
||||
<ellipse
|
||||
style={{ opacity: 0.1, fill: "url(#a)" }}
|
||||
cx="7.462"
|
||||
cy="7.462"
|
||||
rx="7.462"
|
||||
ry="7.462"
|
||||
transform="translate(0 1.835)"
|
||||
/>
|
||||
<rect
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#707070",
|
||||
strokeMiterlimit: 10,
|
||||
strokeWidth: "0.5px",
|
||||
}}
|
||||
width="9.323"
|
||||
height="9.323"
|
||||
transform="translate(4.083)"
|
||||
/>
|
||||
<rect
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#707070",
|
||||
strokeMiterlimit: 10,
|
||||
strokeWidth: "0.5px",
|
||||
}}
|
||||
width="8.223"
|
||||
height="8.223"
|
||||
transform="translate(9.871 5.307)"
|
||||
/>
|
||||
</g>
|
||||
</SvgIcon>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default EgressIcon;
|
||||
53
portal-ui/src/icons/HealIcon.tsx
Normal file
53
portal-ui/src/icons/HealIcon.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
// 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/>.
|
||||
|
||||
import React from "react";
|
||||
import { SvgIcon } from "@material-ui/core";
|
||||
class HealIcon extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<SvgIcon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.014 9.993">
|
||||
<path
|
||||
className="a"
|
||||
d="M9.162,5.971h0L8.192,5,9.346,3.846a2.257,2.257,0,0,0,0-3.192,2.311,2.311,0,0,0-3.192,0L5,1.808,4.029.837,3.846.654a2.311,2.311,0,0,0-3.192,0,2.257,2.257,0,0,0,0,3.192l.184.183h0L1.808,5,.654,6.154A2.257,2.257,0,0,0,3.846,9.346L5,8.192l.971.971.183.183A2.257,2.257,0,0,0,9.346,6.154Zm-2.29-4.6a1.27,1.27,0,0,1,1.757,0,1.242,1.242,0,0,1,0,1.757L7.475,4.283,5.717,2.525Zm-5.5,1.757A1.243,1.243,0,0,1,3.129,1.371l.183.183L1.555,3.312Zm1.757,5.5a1.27,1.27,0,0,1-1.757,0,1.242,1.242,0,0,1,0-1.757L2.525,5.717,4.283,7.475Zm2.843-.9-.254-.253L2.525,4.283l-.253-.254L4.029,2.272l.254.253L7.475,5.717l.253.254Zm2.657.9a1.271,1.271,0,0,1-1.757,0l-.183-.183L8.446,6.688l.183.183h0a1.241,1.241,0,0,1,0,1.757Z"
|
||||
transform="translate(0.007 -0.014)"
|
||||
/>
|
||||
<circle
|
||||
cx="0.5"
|
||||
cy="0.5"
|
||||
r="0.5"
|
||||
transform="translate(4.507 4.486)"
|
||||
/>
|
||||
<circle
|
||||
cx="0.5"
|
||||
cy="0.5"
|
||||
r="0.5"
|
||||
transform="translate(3.507 3.486)"
|
||||
/>
|
||||
<circle
|
||||
cx="0.5"
|
||||
cy="0.5"
|
||||
r="0.5"
|
||||
transform="translate(5.507 5.486)"
|
||||
/>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HealIcon;
|
||||
47
portal-ui/src/icons/LogoutIcon.tsx
Normal file
47
portal-ui/src/icons/LogoutIcon.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
// 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/>.
|
||||
|
||||
import React from "react";
|
||||
import { SvgIcon } from "@material-ui/core";
|
||||
class LogoutIcon extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<SvgIcon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.122 10.571">
|
||||
<g transform="translate(0 0.5)">
|
||||
<path
|
||||
style={{ fill: "none", stroke: "rgba(255,255,255,0.8)" }}
|
||||
d="M4816.27,3755.205v-2.939h8.539v9.571h-8.539v-2.932"
|
||||
transform="translate(-4813.187 -3752.266)"
|
||||
/>
|
||||
<path
|
||||
style={{ fill: "none", stroke: "rgba(255,255,255,0.8)" }}
|
||||
d="M4813.187,3757.052h8.081"
|
||||
transform="translate(-4813.187 -3752.266)"
|
||||
/>
|
||||
<path
|
||||
style={{ fill: "none", stroke: "rgba(255,255,255,0.8)" }}
|
||||
d="M4806.5,3756.511l2.265,2.063-2.265,2.063"
|
||||
transform="translate(-4800.808 -3753.863)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LogoutIcon;
|
||||
64
portal-ui/src/icons/UsageIcon.tsx
Normal file
64
portal-ui/src/icons/UsageIcon.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
// 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/>.
|
||||
|
||||
import React from "react";
|
||||
import { SvgIcon } from "@material-ui/core";
|
||||
class UsageIcon extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<SvgIcon viewBox="0 0 16.172 17.187">
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="a"
|
||||
y1="0.5"
|
||||
x2="1"
|
||||
y2="0.5"
|
||||
gradientUnits="objectBoundingBox"
|
||||
>
|
||||
<stop offset="0.044" stopColor="#362585" />
|
||||
<stop offset="0.301" stopColor="#281b6f" />
|
||||
<stop offset="1" stopColor="#1e1560" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: "#707070",
|
||||
strokeMiterlimit: 10,
|
||||
strokeWidth: "0.5px",
|
||||
}}
|
||||
d="M-4778.1,2239.582v6.425h6.425"
|
||||
transform="translate(4787.594 -2239.582)"
|
||||
/>
|
||||
<path
|
||||
fill={"#707070"}
|
||||
d="M-4784.238,2247.532v-.581c0-.027.009-.054.012-.081.039-.313.055-.632.121-.939a6.744,6.744,0,0,1,3.064-4.441,6.514,6.514,0,0,1,3.293-1.032,6.923,6.923,0,0,1,2.667.423,6.793,6.793,0,0,1,4.119,4.333,6.053,6.053,0,0,1,.279,1.337c.006.083.014.164.021.247v.86c-.011.131-.018.261-.032.392a6.494,6.494,0,0,1-.626,2.147,6.807,6.807,0,0,1-4.044,3.528,6.052,6.052,0,0,1-1.663.3,6.576,6.576,0,0,1-2.565-.325,6.73,6.73,0,0,1-3.947-3.451,6.627,6.627,0,0,1-.658-2.288C-4784.212,2247.816-4784.225,2247.674-4784.238,2247.532Zm13.025-.306c-.024-.309-.021-.661-.082-1a6.206,6.206,0,0,0-1.658-3.293,6.153,6.153,0,0,0-4.1-1.9,5.984,5.984,0,0,0-2.476.355,6.188,6.188,0,0,0-4.134,5.708,6.453,6.453,0,0,0,.228,1.881,6.127,6.127,0,0,0,1.984,3.052,6.046,6.046,0,0,0,3.806,1.445,6.043,6.043,0,0,0,1.235-.065,6.249,6.249,0,0,0,3.783-2.2,6.2,6.2,0,0,0,1.352-3.048C-4771.228,2247.863-4771.233,2247.563-4771.212,2247.226Z"
|
||||
transform="translate(4786.834 -2240.452)"
|
||||
/>
|
||||
<ellipse
|
||||
style={{ opacity: 0.1, fill: "url(#a)" }}
|
||||
cx="6.151"
|
||||
cy="6.151"
|
||||
rx="6.151"
|
||||
ry="6.151"
|
||||
transform="translate(0 4.886)"
|
||||
/>
|
||||
</SvgIcon>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default UsageIcon;
|
||||
@@ -30,6 +30,8 @@ import { CreateIcon } from "../../.././../../../icons";
|
||||
import { niceBytes } from "../../../../../../common/utils";
|
||||
import Moment from "react-moment";
|
||||
import DeleteObject from "./DeleteObject";
|
||||
import { containerForHeader } from "../../../../Common/FormComponents/common/styleLibrary";
|
||||
import PageHeader from "../../../../Common/PageHeader/PageHeader";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
@@ -73,6 +75,7 @@ const styles = (theme: Theme) =>
|
||||
borderRadius: 5,
|
||||
boxShadow: "0px 3px 6px #00000012",
|
||||
},
|
||||
...containerForHeader(theme.spacing(4)),
|
||||
});
|
||||
|
||||
interface IListObjectsProps {
|
||||
@@ -191,58 +194,55 @@ class ListObjects extends React.Component<
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<PageHeader label="Objects" />
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6">Objects</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<br />
|
||||
</Grid>
|
||||
<Grid item xs={12} className={classes.actionsTray}>
|
||||
<TextField
|
||||
placeholder="Search Objects"
|
||||
className={classes.searchField}
|
||||
id="search-resource"
|
||||
label=""
|
||||
onChange={(val) => {
|
||||
this.setState({
|
||||
filterObjects: val.target.value,
|
||||
});
|
||||
}}
|
||||
InputProps={{
|
||||
disableUnderline: true,
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<br />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TableWrapper
|
||||
itemActions={tableActions}
|
||||
columns={[
|
||||
{ label: "Name", elementKey: "name" },
|
||||
{
|
||||
label: "Last Modified",
|
||||
elementKey: "last_modified",
|
||||
renderFunction: displayParsedDate,
|
||||
},
|
||||
{
|
||||
label: "Size",
|
||||
elementKey: "size",
|
||||
renderFunction: niceBytes,
|
||||
},
|
||||
]}
|
||||
isLoading={loading}
|
||||
entityName="Objects"
|
||||
idField="name"
|
||||
records={filteredRecords}
|
||||
/>
|
||||
<Grid item xs={12} className={classes.container}>
|
||||
<Grid item xs={12} className={classes.actionsTray}>
|
||||
<TextField
|
||||
placeholder="Search Objects"
|
||||
className={classes.searchField}
|
||||
id="search-resource"
|
||||
label=""
|
||||
onChange={(val) => {
|
||||
this.setState({
|
||||
filterObjects: val.target.value,
|
||||
});
|
||||
}}
|
||||
InputProps={{
|
||||
disableUnderline: true,
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<br />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TableWrapper
|
||||
itemActions={tableActions}
|
||||
columns={[
|
||||
{ label: "Name", elementKey: "name" },
|
||||
{
|
||||
label: "Last Modified",
|
||||
elementKey: "last_modified",
|
||||
renderFunction: displayParsedDate,
|
||||
},
|
||||
{
|
||||
label: "Size",
|
||||
elementKey: "size",
|
||||
renderFunction: niceBytes,
|
||||
},
|
||||
]}
|
||||
isLoading={loading}
|
||||
entityName="Objects"
|
||||
idField="name"
|
||||
records={filteredRecords}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
|
||||
@@ -89,7 +89,7 @@ export const containerForHeader = (bottomSpacing: any) => ({
|
||||
fontSize: 14,
|
||||
},
|
||||
"& p": {
|
||||
"& span": {
|
||||
"& span:not(*[class*='smallUnit'])": {
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -29,6 +29,9 @@ import { niceBytes } from "../../../common/utils";
|
||||
import { LinearProgress } from "@material-ui/core";
|
||||
import PageHeader from "../Common/PageHeader/PageHeader";
|
||||
import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
|
||||
import AllBucketsIcon from "../../../icons/AllBucketsIcon";
|
||||
import UsageIcon from "../../../icons/UsageIcon";
|
||||
import EgressIcon from "../../../icons/EgressIcon";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
@@ -90,9 +93,13 @@ const styles = (theme: Theme) =>
|
||||
boxShadow: "none",
|
||||
},
|
||||
fixedHeight: {
|
||||
minHeight: 165,
|
||||
height: 165,
|
||||
minWidth: 247,
|
||||
marginRight: 20,
|
||||
padding: "25px 28px",
|
||||
"& svg": {
|
||||
maxHeight: 18,
|
||||
},
|
||||
},
|
||||
consumptionValue: {
|
||||
color: "#000000",
|
||||
@@ -106,6 +113,32 @@ const styles = (theme: Theme) =>
|
||||
notationContainer: {
|
||||
display: "flex",
|
||||
},
|
||||
dashboardBG: {
|
||||
width: 390,
|
||||
height: 255,
|
||||
zIndex: 500,
|
||||
position: "absolute",
|
||||
backgroundSize: "fill",
|
||||
|
||||
backgroundImage: "url(/images/BG_IllustrationDarker.svg)",
|
||||
backgroundPosition: "right bottom",
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundRepeat: "no-repeat",
|
||||
},
|
||||
dashboardContainer: {
|
||||
zIndex: 600,
|
||||
position: "absolute",
|
||||
},
|
||||
elementTitle: {
|
||||
fontWeight: 500,
|
||||
color: "#777777",
|
||||
fontSize: 14,
|
||||
marginTop: -9,
|
||||
},
|
||||
smallUnit: {
|
||||
fontSize: 20,
|
||||
},
|
||||
});
|
||||
|
||||
interface IDashboardProps {
|
||||
@@ -141,7 +174,19 @@ const Dashboard = ({ classes }: IDashboardProps) => {
|
||||
if (usage === undefined) {
|
||||
return "0";
|
||||
}
|
||||
return niceBytes(usage);
|
||||
|
||||
const niceBytesUsage = niceBytes(usage).split(" ");
|
||||
|
||||
if (niceBytesUsage.length !== 2) {
|
||||
return niceBytesUsage.join(" ");
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
{niceBytesUsage[0]}
|
||||
<span className={classes.smallUnit}>{niceBytesUsage[1]}</span>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const prettyNumber = (usage: number | undefined) => {
|
||||
@@ -155,7 +200,8 @@ const Dashboard = ({ classes }: IDashboardProps) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<PageHeader label="Dashboard" />
|
||||
<Grid container>
|
||||
<div className={classes.dashboardBG} />
|
||||
<Grid container className={classes.dashboardContainer}>
|
||||
<Grid container spacing={3} className={classes.container}>
|
||||
{error !== "" && <Grid container>{error}</Grid>}
|
||||
{loading ? (
|
||||
@@ -168,10 +214,12 @@ const Dashboard = ({ classes }: IDashboardProps) => {
|
||||
<Paper className={fixedHeightPaper}>
|
||||
<Grid container direction="row" alignItems="center">
|
||||
<Grid item className={classes.icon}>
|
||||
<ViewHeadlineIcon />
|
||||
<AllBucketsIcon />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography variant="h6">All Buckets</Typography>
|
||||
<Typography className={classes.elementTitle}>
|
||||
All buckets
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Typography className={classes.consumptionValue}>
|
||||
@@ -181,10 +229,12 @@ const Dashboard = ({ classes }: IDashboardProps) => {
|
||||
<Paper className={fixedHeightPaper}>
|
||||
<Grid container direction="row" alignItems="center">
|
||||
<Grid item className={classes.icon}>
|
||||
<PieChartIcon />
|
||||
<UsageIcon />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography variant="h6">Usage</Typography>
|
||||
<Typography className={classes.elementTitle}>
|
||||
Usage
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Typography className={classes.consumptionValue}>
|
||||
@@ -194,10 +244,13 @@ const Dashboard = ({ classes }: IDashboardProps) => {
|
||||
<Paper className={fixedHeightPaper}>
|
||||
<Grid container direction="row" alignItems="center">
|
||||
<Grid item className={classes.icon}>
|
||||
<NetworkCheckIcon />
|
||||
<EgressIcon />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography variant="h6"> Total Objects</Typography>
|
||||
<Typography className={classes.elementTitle}>
|
||||
{" "}
|
||||
Total Objects
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Typography className={classes.consumptionValue}>
|
||||
|
||||
@@ -54,6 +54,9 @@ import {
|
||||
WarpIcon,
|
||||
} from "../../../icons";
|
||||
import { clearSession } from "../../../common/utils";
|
||||
import HealIcon from "../../../icons/HealIcon";
|
||||
import ConsoleIcon from "../../../icons/ConsoleIcon";
|
||||
import LogoutIcon from "../../../icons/LogoutIcon";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
@@ -257,8 +260,8 @@ const Menu = ({ userLoggedIn, classes, pages }: IMenuProps) => {
|
||||
type: "item",
|
||||
component: NavLink,
|
||||
to: "/logs",
|
||||
name: "Console Logs",
|
||||
icon: <WebAssetIcon />,
|
||||
name: "Logs",
|
||||
icon: <ConsoleIcon />,
|
||||
},
|
||||
{
|
||||
group: "Tools",
|
||||
@@ -282,7 +285,7 @@ const Menu = ({ userLoggedIn, classes, pages }: IMenuProps) => {
|
||||
component: NavLink,
|
||||
to: "/heal",
|
||||
name: "Heal",
|
||||
icon: <HealingIcon />,
|
||||
icon: <HealIcon />,
|
||||
},
|
||||
{
|
||||
group: "Admin",
|
||||
@@ -436,7 +439,7 @@ const Menu = ({ userLoggedIn, classes, pages }: IMenuProps) => {
|
||||
|
||||
<ListItem button onClick={logout}>
|
||||
<ListItemIcon>
|
||||
<ExitToApp />
|
||||
<LogoutIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Logout" />
|
||||
</ListItem>
|
||||
|
||||
Reference in New Issue
Block a user