diff --git a/portal-ui/src/icons/minio_console_logo.svg b/portal-ui/src/icons/minio_console_logo.svg index b2055a6cd..11132b6a2 100644 --- a/portal-ui/src/icons/minio_console_logo.svg +++ b/portal-ui/src/icons/minio_console_logo.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx index 695b73c68..1ba3b9678 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx @@ -35,6 +35,8 @@ import { AppState } from "../../../../store"; import { connect } from "react-redux"; import { logMessageReceived, logResetMessages } from "../../Logs/actions"; import { addBucketOpen, addBucketReset } from "../actions"; +import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary"; +import PageHeader from "../../Common/PageHeader/PageHeader"; const styles = (theme: Theme) => createStyles({ @@ -78,6 +80,7 @@ const styles = (theme: Theme) => borderRadius: 5, boxShadow: "0px 3px 6px #00000012", }, + ...containerForHeader(theme.spacing(4)), }); interface IListBucketsProps { @@ -221,80 +224,77 @@ const ListBuckets = ({ }} /> )} + - - Buckets - - -
- - - { - setFilterBuckets(val.target.value); - }} - InputProps={{ - disableUnderline: true, - startAdornment: ( - - - - ), - }} - /> - - - -
- - - + + + { + setFilterBuckets(val.target.value); + }} + InputProps={{ + disableUnderline: true, + startAdornment: ( + + + + ), + }} + /> + + + +
+ + + + diff --git a/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx b/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx index 0689ac404..ea565e435 100644 --- a/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx +++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx @@ -44,6 +44,8 @@ import DeleteEvent from "./DeleteEvent"; import TableWrapper from "../../Common/TableWrapper/TableWrapper"; import { niceBytes } from "../../../../common/utils"; import AddReplicationModal from "./AddReplicationModal"; +import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary"; +import PageHeader from "../../Common/PageHeader/PageHeader"; const styles = (theme: Theme) => createStyles({ @@ -135,6 +137,7 @@ const styles = (theme: Theme) => tabPan: { marginTop: "5px", }, + ...containerForHeader(theme.spacing(4)), }); interface IViewBucketProps { @@ -449,196 +452,191 @@ class ViewBucket extends React.Component { bucketName={bucketName} /> )} + ${match.params["bucketName"]}`} /> - - - Bucket > {match.params["bucketName"]} - - - -
- - -
-
- -
-
Access Policy:
-
- {loadingBucket ? ( - - ) : ( - accessPolicy.toLowerCase() - )} -
-
Reported Usage:
-
- {loadingSize ? ( - - ) : ( - niceBytes(bucketSize) - )} -
-
Replication:
-
- {replicationRules.length ? "Yes" : "No"} -
-
Versioning:
-
{isVersioned ? "Yes" : "No"} 
-
- -
-
+ + +
- + +
+
Access Policy:
+
+ {loadingBucket ? ( + + ) : ( + accessPolicy.toLowerCase() + )} +
+
Reported Usage:
+
+ {loadingSize ? ( + + ) : ( + niceBytes(bucketSize) + )} +
+
Replication:
+
+ {replicationRules.length ? "Yes" : "No"} +
+
Versioning:
+
{isVersioned ? "Yes" : "No"} 
+
+ +
+
+
+ +
-
- - -
- - - , newValue: number) => { - this.setState({ curTab: newValue }); - }} - indicatorColor="primary" - textColor="primary" - aria-label="cluster-tabs" - > - - - - - - {curTab === 0 && ( - - )} - {curTab === 1 && ( - - )} - - - - - - - - + + + + + + {curTab === 0 && ( + + )} + {curTab === 1 && ( + + )} + + + + + + + + + diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index c1a2c053a..34b333edd 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts @@ -79,3 +79,19 @@ export const checkboxIcons = { backgroundColor: "#201763", }, }; + +export const containerForHeader = (bottomSpacing: any) => ({ + container: { + padding: "110px 33px 30px", + paddingBottom: bottomSpacing, + "& h6": { + color: "#777777", + fontSize: 14, + }, + "& p": { + "& span": { + fontSize: 16, + }, + }, + }, +}); diff --git a/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx b/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx new file mode 100644 index 000000000..3c53c2954 --- /dev/null +++ b/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import Grid from "@material-ui/core/Grid"; +import { createStyles, Theme, withStyles } from "@material-ui/core/styles"; +import Typography from "@material-ui/core/Typography"; + +interface IPageHeader { + classes: any; + label: any; +} + +const styles = (theme: Theme) => + createStyles({ + headerContainer: { + position: "absolute", + width: "100%", + height: 77, + display: "flex", + backgroundColor: "#fff", + borderBottom: "#E3E3E3 1px solid", + left: 0, + }, + label: { + display: "flex", + justifyContent: "flex-start", + alignItems: "center", + }, + labelStyle: { + color: "#000", + fontSize: 18, + fontWeight: 700, + marginLeft: 55, + marginTop: 8, + }, + }); + +const PageHeader = ({ classes, label }: IPageHeader) => { + return ( + + + + {label} + + + + ); +}; + +export default withStyles(styles)(PageHeader); diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx index 940700f34..3a9febe25 100644 --- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx +++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx @@ -27,6 +27,8 @@ import TableWrapper from "../../Common/TableWrapper/TableWrapper"; import { configurationElements } from "../utils"; import { IConfigurationElement } from "../types"; import EditConfiguration from "../CustomForms/EditConfiguration"; +import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary"; +import PageHeader from "../../Common/PageHeader/PageHeader"; interface IListConfiguration { classes: any; @@ -58,6 +60,7 @@ const styles = (theme: Theme) => iconText: { lineHeight: "24px", }, + ...containerForHeader(theme.spacing(4)), }); const ConfigurationsList = ({ classes }: IListConfiguration) => { @@ -103,47 +106,44 @@ const ConfigurationsList = ({ classes }: IListConfiguration) => { selectedConfiguration={selectedConfiguration} /> )} + - - Configurations List - - -
- - {error !== "" && {error}} - - { - setFilter(event.target.value); - }} - InputProps={{ - disableUnderline: true, - startAdornment: ( - - - - ), - }} - /> - - -
- - - + + {error !== "" && {error}} + + { + setFilter(event.target.value); + }} + InputProps={{ + disableUnderline: true, + startAdornment: ( + + + + ), + }} + /> + + +
+ + + + diff --git a/portal-ui/src/screens/Console/Console.tsx b/portal-ui/src/screens/Console/Console.tsx index cdd3a7688..1a4812a6a 100644 --- a/portal-ui/src/screens/Console/Console.tsx +++ b/portal-ui/src/screens/Console/Console.tsx @@ -84,7 +84,7 @@ function Copyright() { ); } -const drawerWidth = 254; +const drawerWidth = 245; const styles = (theme: Theme) => createStyles({ @@ -136,6 +136,9 @@ const styles = (theme: Theme) => duration: theme.transitions.duration.enteringScreen, }), overflowX: "hidden", + background: + "transparent linear-gradient(90deg, #073052 0%, #081C42 100%) 0% 0% no-repeat padding-box", + boxShadow: "0px 3px 7px #00000014", }, drawerPaperClose: { overflowX: "hidden", @@ -148,17 +151,15 @@ const styles = (theme: Theme) => width: theme.spacing(9), }, }, - appBarSpacer: { - height: "5px", - }, content: { flexGrow: 1, height: "100vh", overflow: "auto", + position: "relative", }, container: { - paddingTop: theme.spacing(4), paddingBottom: theme.spacing(4), + margin: 0, }, paper: { padding: theme.spacing(2), @@ -372,8 +373,7 @@ const Console = ({ )}
)} -
- + {allowedRoutes.map((route: any) => ( diff --git a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx index b003fd213..001d3d48e 100644 --- a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx +++ b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx @@ -1,5 +1,5 @@ // This file is part of MinIO Console Server -// Copyright (c) 2019 MinIO, Inc. +// 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 @@ -27,6 +27,8 @@ import { Usage } from "./types"; import api from "../../../common/api"; import { niceBytes } from "../../../common/utils"; import { LinearProgress } from "@material-ui/core"; +import PageHeader from "../Common/PageHeader/PageHeader"; +import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; const styles = (theme: Theme) => createStyles({ @@ -77,26 +79,20 @@ const styles = (theme: Theme) => height: "100vh", overflow: "auto", }, - container: { - paddingBottom: theme.spacing(4), - "& h6": { - color: "#777777", - fontSize: 14, - }, - "& p": { - "& span": { - fontSize: 16, - }, - }, - }, + ...containerForHeader(theme.spacing(4)), paper: { padding: theme.spacing(2), display: "flex", overflow: "auto", flexDirection: "column", + border: "#eaedee 1px solid", + borderRadius: 5, + boxShadow: "none", }, fixedHeight: { - minHeight: 240, + minHeight: 165, + minWidth: 247, + marginRight: 20, }, consumptionValue: { color: "#000000", @@ -107,6 +103,9 @@ const styles = (theme: Theme) => marginRight: 10, color: "#777777", }, + notationContainer: { + display: "flex", + }, }); interface IDashboardProps { @@ -155,11 +154,9 @@ const Dashboard = ({ classes }: IDashboardProps) => { return ( + - - MinIO Console - {error !== "" && {error}} {loading ? ( @@ -167,22 +164,33 @@ const Dashboard = ({ classes }: IDashboardProps) => { ) : ( - + - Total Buckets + All Buckets {usage ? prettyNumber(usage.buckets) : 0} - - + + + + + + + Usage + + + + {usage ? prettyUsage(usage.usage + "") : 0} + + @@ -197,21 +205,6 @@ const Dashboard = ({ classes }: IDashboardProps) => { - - - - - - - - Usage - - - - {usage ? prettyUsage(usage.usage + "") : 0} - - - )} diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx index c85236480..3b5ac37db 100644 --- a/portal-ui/src/screens/Console/Groups/Groups.tsx +++ b/portal-ui/src/screens/Console/Groups/Groups.tsx @@ -31,6 +31,8 @@ import AddGroup from "../Groups/AddGroup"; import DeleteGroup from "./DeleteGroup"; import TableWrapper from "../Common/TableWrapper/TableWrapper"; import SetPolicy from "../Policies/SetPolicy"; +import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; +import PageHeader from "../Common/PageHeader/PageHeader"; interface IGroupsProps { classes: any; @@ -84,6 +86,7 @@ const styles = (theme: Theme) => borderRadius: 5, boxShadow: "0px 3px 6px #00000012", }, + ...containerForHeader(theme.spacing(4)), }); const Groups = ({ classes }: IGroupsProps) => { @@ -215,71 +218,68 @@ const Groups = ({ classes }: IGroupsProps) => { }} /> )} + - - Groups - - -
- - {error !== "" ? {error} : } - - - - - ), - }} - onChange={(e) => { - setFilter(e.target.value); - }} - /> - - + + {error !== "" ? {error} : } + + + + + ), + }} + onChange={(e) => { + setFilter(e.target.value); + }} + /> + + - -
- - - + +
+ + + + diff --git a/portal-ui/src/screens/Console/Heal/Heal.tsx b/portal-ui/src/screens/Console/Heal/Heal.tsx index 96981d9f9..b862516fe 100644 --- a/portal-ui/src/screens/Console/Heal/Heal.tsx +++ b/portal-ui/src/screens/Console/Heal/Heal.tsx @@ -15,6 +15,8 @@ import { FormControl, MenuItem, Select } from "@material-ui/core"; import { BucketList, Bucket } from "../Watch/types"; import { HealStatus, colorH } from "./types"; import { niceBytes } from "../../../common/utils"; +import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; +import PageHeader from "../Common/PageHeader/PageHeader"; const styles = (theme: Theme) => createStyles({ @@ -58,6 +60,7 @@ const styles = (theme: Theme) => lastElementWPadding: { paddingRight: "78", }, + ...containerForHeader(theme.spacing(4)), }); interface IHeal { @@ -195,130 +198,127 @@ const Heal = ({ classes }: IHeal) => { })); return ( + - - Heal - - -
- - - - { + setBucketName(e.target.value as string); + }} + className={classes.fieldContainer} + disabled={false} + > + + Select Bucket - ))} - - - { - setPrefix(e.target.value); + {bucketNames.map((option) => ( + + {option.label} + + ))} + + + { + setPrefix(e.target.value); + }} + /> + + + {"Recursive"} + { + setRecursive(e.target.checked); + }} + disabled={false} + /> + {"Force Start"} + { + setForceStart(e.target.checked); + }} + disabled={false} + /> + {"Force Stop"} + { + setForceStop(e.target.checked); + }} + disabled={false} + /> + {""} + + + +
+ + - - {"Recursive"} - { - setRecursive(e.target.checked); - }} - disabled={false} - /> - {"Force Start"} - { - setForceStart(e.target.checked); - }} - disabled={false} - /> - {"Force Stop"} - { - setForceStop(e.target.checked); - }} - disabled={false} - /> - {""} +
+ Size scanned: {hStatus.sizeScanned} +
+ Objects healed: {hStatus.objectsHealed} / {hStatus.objectsScanned} +
+ Healing time: {hStatus.healDuration}s - -
- - - -
- Size scanned: {hStatus.sizeScanned} -
- Objects healed: {hStatus.objectsHealed} / {hStatus.objectsScanned} -
- Healing time: {hStatus.healDuration}s - ); diff --git a/portal-ui/src/screens/Console/Logs/Logs.tsx b/portal-ui/src/screens/Console/Logs/Logs.tsx index f13c2b796..51371c835 100644 --- a/portal-ui/src/screens/Console/Logs/Logs.tsx +++ b/portal-ui/src/screens/Console/Logs/Logs.tsx @@ -23,6 +23,9 @@ import { createStyles, Theme, withStyles } from "@material-ui/core/styles"; import { timeFromDate } from "../../../common/utils"; import { isNullOrUndefined } from "util"; import { wsProtocol } from "../../../utils/wsUtils"; +import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; +import { Grid } from "@material-ui/core"; +import PageHeader from "../Common/PageHeader/PageHeader"; const styles = (theme: Theme) => createStyles({ @@ -54,6 +57,7 @@ const styles = (theme: Theme) => ansidefault: { color: "black", }, + ...containerForHeader(theme.spacing(4)), }); interface ILogs { @@ -243,16 +247,20 @@ const Logs = ({ }; return ( -
-

Logs

-
-
    - {messages.map((m) => { - return renderLog(m); - })} -
-
-
+ + + + +
+
    + {messages.map((m) => { + return renderLog(m); + })} +
+
+ + + ); }; diff --git a/portal-ui/src/screens/Console/Menu/Menu.tsx b/portal-ui/src/screens/Console/Menu/Menu.tsx index d517a25a7..8c2a91d7c 100644 --- a/portal-ui/src/screens/Console/Menu/Menu.tsx +++ b/portal-ui/src/screens/Console/Menu/Menu.tsx @@ -58,44 +58,53 @@ import { clearSession } from "../../../common/utils"; const styles = (theme: Theme) => createStyles({ logo: { - paddingTop: "42px", - marginBottom: "20px", - textAlign: "center", + paddingTop: 25, + marginBottom: 30, + paddingLeft: 45, "& img": { - width: "120px", + width: 120, }, }, menuList: { "& .active": { - borderTopLeftRadius: "3px", - borderBottomLeftRadius: "3px", + borderTopLeftRadius: 2, + borderBottomLeftRadius: 2, color: "#fff", - background: - "transparent linear-gradient(90deg, #362585 0%, #362585 7%, #281B6F 39%, #1F1661 100%) 0% 0% no-repeat padding-box;", - boxShadow: "4px 4px 4px #A5A5A512", - fontWeight: 700, + backgroundColor: "rgba(255, 255, 255, .18)", "& .MuiSvgIcon-root": { color: "white", }, "& .MuiTypography-root": { color: "#fff", + fontWeight: 700, }, }, - paddingLeft: "30px", "& .MuiSvgIcon-root": { fontSize: 16, - color: "#362585", + color: "rgba(255, 255, 255, 0.8)", maxWidth: 14, }, "& .MuiListItemIcon-root": { - minWidth: "25px", + minWidth: 25, }, "& .MuiTypography-root": { - fontSize: "12px", - color: "#2e2e2e", + fontSize: 12, + color: "rgba(255, 255, 255, 0.8)", }, "& .MuiListItem-gutters": { paddingRight: 0, + fontWeight: 300, + }, + "& .MuiListItem-root": { + padding: "2px 0 2px 16px", + marginBottom: 8, + marginLeft: 30, + width: "calc(100% - 30px)", + }, + "& .MuiCollapse-container .MuiCollapse-wrapper .MuiCollapse-wrapperInner .MuiDivider-root": { + backgroundColor: "rgba(112,112,112,0.5)", + marginBottom: 12, + height: 1, }, }, extraMargin: { @@ -104,31 +113,34 @@ const styles = (theme: Theme) => }, }, groupTitle: { - color: "#220c7c", + color: "#fff", fontSize: 10, textTransform: "uppercase", fontWeight: 700, marginBottom: 3, cursor: "pointer", userSelect: "none", + display: "flex", + justifyContent: "space-between", }, subTitleMenu: { fontWeight: 700, marginLeft: 10, "&.MuiTypography-root": { fontSize: 13, - color: "#220c7c", + color: "#fff", }, }, selectorArrow: { - marginLeft: 3, + marginRight: 20, marginTop: 1, display: "inline-block", width: 0, height: 0, borderStyle: "solid", - borderWidth: "3px 2.5px 0 2.5px", - borderColor: "#220C7C transparent transparent transparent", + borderWidth: "4px 4px 0 4px", + borderColor: + "rgba(255, 255, 255, .29) transparent transparent transparent", transform: "rotateZ(0deg)", transitionDuration: "0.2s", }, @@ -362,7 +374,7 @@ const Menu = ({ userLoggedIn, classes, pages }: IMenuProps) => { } }} > - {groupMember.label} + {groupMember.label} {groupMember.collapsible && ( createStyles({ errorBlock: { - color: "red" + color: "red", }, strongText: { - fontWeight: 700 + fontWeight: 700, }, keyName: { - marginLeft: 5 + marginLeft: 5, }, actionsTray: { textAlign: "right", "& button": { - marginLeft: 10 - } + marginLeft: 10, + }, }, searchField: { background: "#FFFFFF", padding: 12, borderRadius: 5, - boxShadow: "0px 3px 6px #00000012" + boxShadow: "0px 3px 6px #00000012", }, iconText: { - lineHeight: "24px" - } + lineHeight: "24px", + }, + ...containerForHeader(theme.spacing(4)), }); const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => { @@ -96,7 +99,7 @@ const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => { setError(""); setIsLoading(false); }) - .catch(err => { + .catch((err) => { setError(err); setIsLoading(false); }); @@ -115,8 +118,8 @@ const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => { type: "delete", onClick: (row: any) => { //confirmDeleteBucket(row.name); - } - } + }, + }, ]; const filteredRecords = records.filter((b: TransformedEndpointItem) => { @@ -136,7 +139,7 @@ const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => {
{ }} /> )} + - - Lambda Notification Targets - - -
- - {error !== "" && {error}} - - { - setFilter(event.target.value); - }} - InputProps={{ - disableUnderline: true, - startAdornment: ( - - - - ) - }} - /> - - - -
- - - { - setPage(newPage); - }, - onChangeRowsPerPage: ( - event: React.ChangeEvent - ) => { - const rPP = parseInt(event.target.value, 10); - setRowsPerPage(rPP); - }, - ActionsComponent: MinTablePaginationActions - }} - /> + + {error !== "" && {error}} + + { + setFilter(event.target.value); + }} + InputProps={{ + disableUnderline: true, + startAdornment: ( + + + + ), + }} + /> + + + +
+ + + { + setPage(newPage); + }, + onChangeRowsPerPage: ( + event: React.ChangeEvent + ) => { + const rPP = parseInt(event.target.value, 10); + setRowsPerPage(rPP); + }, + ActionsComponent: MinTablePaginationActions, + }} + /> + diff --git a/portal-ui/src/screens/Console/ObjectBrowser/ObjectBrowser.tsx b/portal-ui/src/screens/Console/ObjectBrowser/ObjectBrowser.tsx index 99a2d75b8..ab80a9f70 100644 --- a/portal-ui/src/screens/Console/ObjectBrowser/ObjectBrowser.tsx +++ b/portal-ui/src/screens/Console/ObjectBrowser/ObjectBrowser.tsx @@ -19,6 +19,8 @@ import get from "lodash/get"; import { createStyles, Theme, withStyles } from "@material-ui/core/styles"; import { Grid, Typography } from "@material-ui/core"; import BrowseBuckets from "./BrowseBuckets"; +import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; +import PageHeader from "../Common/PageHeader/PageHeader"; interface IObjectBrowserProps { match: any; @@ -67,6 +69,7 @@ const styles = (theme: Theme) => lastElementWPadding: { paddingRight: "78", }, + ...containerForHeader(theme.spacing(4)), }); const ObjectBrowser = ({ match, classes }: IObjectBrowserProps) => { @@ -74,11 +77,11 @@ const ObjectBrowser = ({ match, classes }: IObjectBrowserProps) => { return ( + - - Object Browser + + {pathIn === "/object-browser" && } - {pathIn === "/object-browser" && } ); diff --git a/portal-ui/src/screens/Console/Policies/Policies.tsx b/portal-ui/src/screens/Console/Policies/Policies.tsx index c25d07c33..66812df8f 100644 --- a/portal-ui/src/screens/Console/Policies/Policies.tsx +++ b/portal-ui/src/screens/Console/Policies/Policies.tsx @@ -30,6 +30,8 @@ import AddPolicy from "./AddPolicy"; import DeletePolicy from "./DeletePolicy"; import TableWrapper from "../Common/TableWrapper/TableWrapper"; import api from "../../../common/api"; +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 IPoliciesProps { @@ -222,70 +225,67 @@ const Policies = ({ classes }: IPoliciesProps) => { closeDeleteModalAndRefresh={closeDeleteModalAndRefresh} /> )} + - - IAM Policies - - -
- - - { - setPage(0); - setFilterPolicies(val.target.value); - }} - InputProps={{ - disableUnderline: true, - startAdornment: ( - - - - ), - }} - /> - - - -
- - - + + + { + setPage(0); + setFilterPolicies(val.target.value); + }} + InputProps={{ + disableUnderline: true, + startAdornment: ( + + + + ), + }} + /> + + + +
+ + + + diff --git a/portal-ui/src/screens/Console/RemoteBuckets/RemoteBuckets.tsx b/portal-ui/src/screens/Console/RemoteBuckets/RemoteBuckets.tsx index bbf19419e..01eb24edf 100644 --- a/portal-ui/src/screens/Console/RemoteBuckets/RemoteBuckets.tsx +++ b/portal-ui/src/screens/Console/RemoteBuckets/RemoteBuckets.tsx @@ -31,6 +31,8 @@ import { MinTablePaginationActions } from "../../../common/MinTablePaginationAct import { CreateIcon } from "../../../icons"; import { IRemoteBucket, IRemoteBucketsResponse } from "./types"; import DeleteRemoteBucket from "./DeleteRemoteBucket"; +import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; +import PageHeader from "../Common/PageHeader/PageHeader"; const styles = (theme: Theme) => createStyles({ @@ -74,6 +76,7 @@ const styles = (theme: Theme) => borderRadius: 5, boxShadow: "0px 3px 6px #00000012", }, + ...containerForHeader(theme.spacing(4)), }); interface IRemoteListBucketsProps { @@ -203,73 +206,70 @@ const RemoteBucketsList = ({ classes }: IRemoteListBucketsProps) => { deleteOpen={deleteScreenOpen} /> )} + - - Remote Buckets - - -
- - - { - setFilterBuckets(val.target.value); - }} - InputProps={{ - disableUnderline: true, - startAdornment: ( - - - - ), - }} - /> - - - -
- - - + + + { + setFilterBuckets(val.target.value); + }} + InputProps={{ + disableUnderline: true, + startAdornment: ( + + + + ), + }} + /> + + + +
+ + + + diff --git a/portal-ui/src/screens/Console/ServiceAccounts/ServiceAccounts.tsx b/portal-ui/src/screens/Console/ServiceAccounts/ServiceAccounts.tsx index b86d2052d..517256424 100644 --- a/portal-ui/src/screens/Console/ServiceAccounts/ServiceAccounts.tsx +++ b/portal-ui/src/screens/Console/ServiceAccounts/ServiceAccounts.tsx @@ -31,6 +31,8 @@ import InputAdornment from "@material-ui/core/InputAdornment"; import SearchIcon from "@material-ui/icons/Search"; import TableWrapper from "../Common/TableWrapper/TableWrapper"; import { stringSort } from "../../../utils/sortFunctions"; +import PageHeader from "../Common/PageHeader/PageHeader"; +import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; const styles = (theme: Theme) => createStyles({ @@ -85,6 +87,7 @@ const styles = (theme: Theme) => borderRadius: 5, boxShadow: "0px 3px 6px #00000012", }, + ...containerForHeader(theme.spacing(4)), }); interface IServiceAccountsProps { @@ -225,81 +228,78 @@ const ServiceAccounts = ({ classes }: IServiceAccountsProps) => { entity="Service Account" /> )} + - - Service Accounts - - -
- - - - - - ), - }} - onChange={(e) => { - setFilter(e.target.value); - setPage(0); - }} - /> - - - -
- - {error !== "" && ( - - + + + + + ), + }} + onChange={(e) => { + setFilter(e.target.value); + setPage(0); + }} + /> + + + +
+ + {error !== "" && ( + + + {error} + + + )} + + - )} - - diff --git a/portal-ui/src/screens/Console/Trace/Trace.tsx b/portal-ui/src/screens/Console/Trace/Trace.tsx index caf27ff6c..f611bfa20 100644 --- a/portal-ui/src/screens/Console/Trace/Trace.tsx +++ b/portal-ui/src/screens/Console/Trace/Trace.tsx @@ -23,6 +23,9 @@ import { TraceMessage } from "./types"; import { createStyles, Theme, withStyles } from "@material-ui/core/styles"; import { niceBytes, timeFromDate } from "../../../common/utils"; import { wsProtocol } from "../../../utils/wsUtils"; +import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; +import PageHeader from "../Common/PageHeader/PageHeader"; +import { Grid } from "@material-ui/core"; const styles = (theme: Theme) => createStyles({ @@ -41,6 +44,7 @@ const styles = (theme: Theme) => borderBottom: "1px solid #dedede", }, }, + ...containerForHeader(theme.spacing(4)), }); interface ITrace { @@ -93,23 +97,27 @@ const Trace = ({ }, [traceMessageReceived]); return ( -
-

Trace

-
-
    - {messages.map((m) => { - return ( -
  • - {timeFromDate(m.time)} - {m.api}[{m.statusCode} {m.statusMsg}]{" "} - {m.api} {m.host} {m.client} {m.callStats.duration} ↑{" "} - {niceBytes(m.callStats.rx + "")} ↓{" "} - {niceBytes(m.callStats.tx + "")} -
    • - ); - })} -
-
-
+ + + + +
+
    + {messages.map((m) => { + return ( +
  • + {timeFromDate(m.time)} - {m.api}[{m.statusCode}{" "} + {m.statusMsg}] {m.api} {m.host} {m.client}{" "} + {m.callStats.duration} ↑ {niceBytes(m.callStats.rx + "")} ↓{" "} + {niceBytes(m.callStats.tx + "")} +
    • + ); + })} +
+
+ + + ); }; diff --git a/portal-ui/src/screens/Console/Users/Users.tsx b/portal-ui/src/screens/Console/Users/Users.tsx index ddf52ec2a..ff63c4cc7 100644 --- a/portal-ui/src/screens/Console/Users/Users.tsx +++ b/portal-ui/src/screens/Console/Users/Users.tsx @@ -36,6 +36,8 @@ import AddToGroup from "./AddToGroup"; import TableWrapper from "../Common/TableWrapper/TableWrapper"; import DescriptionIcon from "@material-ui/icons/Description"; import SetPolicy from "../Policies/SetPolicy"; +import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; +import PageHeader from "../Common/PageHeader/PageHeader"; const styles = (theme: Theme) => createStyles({ @@ -84,6 +86,7 @@ const styles = (theme: Theme) => borderRadius: 5, boxShadow: "0px 3px 6px #00000012", }, + ...containerForHeader(theme.spacing(4)), }); interface IUsersProps { @@ -307,90 +310,86 @@ class Users extends React.Component { }} /> )} - + - - Users - - -
- - - - - - ), - }} - onChange={(e) => { - this.setState({ filter: e.target.value, page: 0 }); - }} - /> - + - - + }} + > + Create User + + - -
- - - + +
+ + + + diff --git a/portal-ui/src/screens/Console/Watch/Watch.tsx b/portal-ui/src/screens/Console/Watch/Watch.tsx index a7ba4eed0..ec17da731 100644 --- a/portal-ui/src/screens/Console/Watch/Watch.tsx +++ b/portal-ui/src/screens/Console/Watch/Watch.tsx @@ -25,6 +25,8 @@ import { niceBytes, timeFromDate } from "../../../common/utils"; import { wsProtocol } from "../../../utils/wsUtils"; import api from "../../../common/api"; import { FormControl, MenuItem, Select } from "@material-ui/core"; +import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; +import PageHeader from "../Common/PageHeader/PageHeader"; const styles = (theme: Theme) => createStyles({ @@ -65,6 +67,7 @@ const styles = (theme: Theme) => minWidth: "206px", boxShadow: "0px 3px 6px #00000012", }, + ...containerForHeader(theme.spacing(4)), }); interface IWatch { @@ -155,94 +158,91 @@ const Watch = ({ })); return ( + - - Watch - - -
- - - - { + setBucketName(e.target.value as string); + }} + className={classes.fieldContainer} + disabled={start} > - Select Bucket - - {bucketNames.map((option) => ( - {option.label} + Select Bucket - ))} - - - { - setPrefix(e.target.value); - }} - /> - { - setSuffix(e.target.value); - }} - /> - - - -
+ {bucketNames.map((option) => ( + + {option.label} + + ))} + + + { + setPrefix(e.target.value); + }} + /> + { + setSuffix(e.target.value); + }} + /> + + + +
+ +
+
    + {messages.map((m) => { + return ( +
  • + {timeFromDate(m.Time)} - {niceBytes(m.Size + "")} - {m.Type}{" "} + - {m.Path} +
    • + ); + })} +
+
-
-
    - {messages.map((m) => { - return ( -
  • - {timeFromDate(m.Time)} - {niceBytes(m.Size + "")} - {m.Type} -{" "} - {m.Path} -
    • - ); - })} -
-
); }; diff --git a/yarn.lock b/yarn.lock index 2cdad7d18..fb57ccd13 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,147 +2,3 @@ # yarn lockfile v1 -big.js@^5.2.2: - version "5.2.2" - resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" - integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== - -dom-walk@^0.1.0: - version "0.1.2" - resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84" - integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w== - -emojis-list@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" - integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== - -fast-levenshtein@^2.0.6: - version "2.0.6" - resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" - integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= - -global@^4.3.0: - version "4.4.0" - resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406" - integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w== - dependencies: - min-document "^2.19.0" - process "^0.11.10" - -hoist-non-react-statics@^3.3.0: - version "3.3.2" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" - integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== - dependencies: - react-is "^16.7.0" - -"js-tokens@^3.0.0 || ^4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" - integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== - -json5@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe" - integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow== - dependencies: - minimist "^1.2.0" - -loader-utils@^1.1.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" - integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== - dependencies: - big.js "^5.2.2" - emojis-list "^3.0.0" - json5 "^1.0.1" - -loose-envify@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" - integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== - dependencies: - js-tokens "^3.0.0 || ^4.0.0" - -min-document@^2.19.0: - version "2.19.0" - resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685" - integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU= - dependencies: - dom-walk "^0.1.0" - -minimist@^1.2.0: - version "1.2.5" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" - integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== - -object-assign@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" - integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= - -process@^0.11.10: - version "0.11.10" - resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" - integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI= - -prop-types@^15.6.1: - version "15.7.2" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" - integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== - dependencies: - loose-envify "^1.4.0" - object-assign "^4.1.1" - react-is "^16.8.1" - -react-app-rewire-hot-loader@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/react-app-rewire-hot-loader/-/react-app-rewire-hot-loader-2.0.1.tgz#9b47d299dac4d861dafdf18b49c3698d0ff04a52" - integrity sha512-XTUPOv5q0zJeEtXECfilDPfqCiktSVbIyupiqigIHOO8EMZec2YfNpwZzqDWMu3yfaEHRs54qRCcCgRR/1w3EQ== - -react-app-rewired@^2.1.6: - version "2.1.6" - resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.1.6.tgz#33ee3076a7f34d6a7c94e649cac67e7c8c580de8" - integrity sha512-06flj0kK5tf/RN4naRv/sn6j3sQd7rsURoRLKLpffXDzJeNiAaTNic+0I8Basojy5WDwREkTqrMLewSAjcb13w== - dependencies: - semver "^5.6.0" - -react-hot-loader@^4.13.0: - version "4.13.0" - resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.13.0.tgz#c27e9408581c2a678f5316e69c061b226dc6a202" - integrity sha512-JrLlvUPqh6wIkrK2hZDfOyq/Uh/WeVEr8nc7hkn2/3Ul0sx1Kr5y4kOGNacNRoj7RhwLNcQ3Udf1KJXrqc0ZtA== - dependencies: - fast-levenshtein "^2.0.6" - global "^4.3.0" - hoist-non-react-statics "^3.3.0" - loader-utils "^1.1.0" - prop-types "^15.6.1" - react-lifecycles-compat "^3.0.4" - shallowequal "^1.1.0" - source-map "^0.7.3" - -react-is@^16.7.0, react-is@^16.8.1: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" - integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== - -react-lifecycles-compat@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" - integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== - -semver@^5.6.0: - version "5.7.1" - resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" - integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== - -shallowequal@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" - integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== - -source-map@^0.7.3: - version "0.7.3" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" - integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==