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

Ux Tools screens (#1261)

Browse Source 
Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Prakash Senthil Vel
2021-11-28 07:22:06 +00:00
committed by GitHub
parent 400892565d
commit 347c6aba3b
10 changed files with 737 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx
View File

@@ -95,6 +95,9 @@ const styles = (theme: Theme) =>
fontWeight: "bold",
color: "#081C42",
},
"@media (max-width: 900px)": {
width: 103,
},
},
dateSelectorFormOverride: {
width: "100%",

36
portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
View File

@@ -1166,3 +1166,39 @@ export const deleteDialogStyles = {
},
},
};
export const advancedFilterToggleStyles: any = {
advancedButton: {
flexGrow: 1,
alignItems: "flex-end",
display: "flex",
justifyContent: "flex-end",
},
advancedConfiguration: {
color: "#2781B0",
fontSize: 10,
textDecoration: "underline",
border: "none",
backgroundColor: "transparent",
cursor: "pointer",
alignItems: "center",
display: "flex",
float: "right",
"&:hover": {
color: "#07193E",
},
"& svg": {
width: 10,
alignSelf: "center",
marginLeft: 5,
},
},
advancedOpen: {
transform: "rotateZ(-90deg) translateX(-4px) translateY(2px)",
},
advancedClosed: {
transform: "rotateZ(90deg)",
},
};

213
portal-ui/src/screens/Console/Heal/Heal.tsx
View File

@@ -46,6 +46,7 @@ import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWr
import PageHeader from "../Common/PageHeader/PageHeader";
import api from "../../../common/api";
import BackLink from "../../../common/BackLink";
import PageLayout from "../Common/Layout/PageLayout";
const styles = (theme: Theme) =>
createStyles({
@@ -69,6 +70,7 @@ const styles = (theme: Theme) =>
border: "#EAEDEE 1px solid",
borderRadius: 3,
padding: "19px 38px",
marginTop: 15,
},
scanInfo: {
marginTop: 20,
@@ -79,8 +81,31 @@ const styles = (theme: Theme) =>
scanData: {
fontSize: 13,
},
noMinWidthLabel: {
fontWeight: 400,
},
formBox: {
padding: 15,
border: "1px solid #EAEAEA",
},
buttonBar: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
},
bucketField: {
flex: 1,
},
prefixField: {
...searchField.searchField,
marginLeft: 10,
flex: 1,
},
actionsTray: {
...actionsTray.actionsTray,
marginBottom: 0,
},
...inlineCheckboxes,
...actionsTray,
...searchField,
...containerForHeader(theme.spacing(4)),
});
@@ -93,7 +118,6 @@ interface IHeal {
const SelectStyled = withStyles((theme: Theme) =>
createStyles({
root: {
width: 450,
lineHeight: "50px",
marginRight: 15,
"label + &": {
@@ -107,7 +131,6 @@ const SelectStyled = withStyles((theme: Theme) =>
height: 50,
fontSize: 13,
lineHeight: "50px",
width: 450,
},
})
)(InputBase);
@@ -248,97 +271,99 @@ const Heal = ({ classes, distributedSetup }: IHeal) => {
return (
<React.Fragment>
<PageHeader label="Heal" />
<Grid container className={classes.container}>
<Grid item xs={12}>
<BackLink to="/tools" label="Return to Tools" />
</Grid>
<Grid item xs={12} className={classes.actionsTray}>
<FormControl variant="outlined">
<Select
id="bucket-name"
name="bucket-name"
value={bucketName}
onChange={(e) => {
setBucketName(e.target.value as string);
}}
className={classes.searchField}
input={<SelectStyled />}
displayEmpty
>
<MenuItem value="" key={`select-bucket-name-default`}>
Select Bucket
</MenuItem>
{bucketNames.map((option) => (
<MenuItem
value={option.value}
key={`select-bucket-name-${option.label}`}
>
{option.label}
<BackLink to="/tools" label="Return to Tools" />
<PageLayout>
<Grid xs={12} className={classes.formBox}>
<Grid item xs={12} className={classes.actionsTray}>
<FormControl variant="outlined" className={classes.bucketField}>
<Select
label="Bucket"
id="bucket-name"
name="bucket-name"
value={bucketName}
onChange={(e) => {
setBucketName(e.target.value as string);
}}
className={classes.searchField}
input={<SelectStyled />}
displayEmpty
>
<MenuItem value="" key={`select-bucket-name-default`}>
Select Bucket
</MenuItem>
))}
</Select>
</FormControl>
<TextField
placeholder="Prefix"
className={classes.searchField}
id="prefix-resource"
label=""
disabled={false}
InputProps={{
disableUnderline: true,
}}
onChange={(e) => {
setPrefix(e.target.value);
}}
variant="standard"
/>
<Button
type="submit"
variant="contained"
color="primary"
disabled={start}
onClick={() => setStart(true)}
>
Start
</Button>
</Grid>
<Grid item xs={12} className={classes.inlineCheckboxes}>
<CheckboxWrapper
name="recursive"
id="recursive"
value="recursive"
checked={recursive}
onChange={(e) => {
setRecursive(e.target.checked);
}}
disabled={false}
label="Recursive"
/>
<CheckboxWrapper
name="forceStart"
id="forceStart"
value="forceStart"
checked={forceStart}
onChange={(e) => {
setForceStart(e.target.checked);
}}
disabled={false}
label="Force Start"
/>
<CheckboxWrapper
name="forceStop"
id="forceStop"
value="forceStop"
checked={forceStop}
onChange={(e) => {
setForceStop(e.target.checked);
}}
disabled={false}
label="Force Stop"
/>
</Grid>
<Grid item xs={12}>
<br />
{bucketNames.map((option) => (
<MenuItem
value={option.value}
key={`select-bucket-name-${option.label}`}
>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
<TextField
label="Prefix"
className={classes.prefixField}
id="prefix-resource"
disabled={false}
InputProps={{
disableUnderline: true,
}}
onChange={(e) => {
setPrefix(e.target.value);
}}
variant="standard"
/>
</Grid>
<Grid item xs={12} className={classes.inlineCheckboxes}>
<CheckboxWrapper
name="recursive"
id="recursive"
classes={classes}
value="recursive"
checked={recursive}
onChange={(e) => {
setRecursive(e.target.checked);
}}
disabled={false}
label="Recursive"
/>
<CheckboxWrapper
name="forceStart"
id="forceStart"
classes={classes}
value="forceStart"
checked={forceStart}
onChange={(e) => {
setForceStart(e.target.checked);
}}
disabled={false}
label="Force Start"
/>
<CheckboxWrapper
name="forceStop"
id="forceStop"
classes={classes}
value="forceStop"
checked={forceStop}
onChange={(e) => {
setForceStop(e.target.checked);
}}
disabled={false}
label="Force Stop"
/>
</Grid>
<Grid item xs={12} className={classes.buttonBar}>
<Button
type="submit"
variant="contained"
color="primary"
disabled={start}
onClick={() => setStart(true)}
>
Start
</Button>
</Grid>
</Grid>
<Grid item xs={12} className={classes.graphContainer}>
<HorizontalBar
@@ -370,7 +395,7 @@ const Heal = ({ classes, distributedSetup }: IHeal) => {
</div>
</Grid>
</Grid>
</Grid>
</PageLayout>
</React.Fragment>
);
};

13
portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
View File

@@ -47,6 +47,7 @@ import { setServerDiagStat, setSnackBarMessage } from "../../../actions";
import CircularProgress from "@mui/material/CircularProgress";
import BackLink from "../../../common/BackLink";
import TestWrapper from "../Common/TestWrapper/TestWrapper";
import PageLayout from "../Common/Layout/PageLayout";
const styles = (theme: Theme) =>
createStyles({
@@ -133,7 +134,7 @@ const HealthInfo = ({
const [diagStarted, setDiagStarted] = useState<boolean>(false);
const [downloadDisabled, setDownloadDisabled] = useState(true);
const [localMessage, setMessage] = useState<string>("");
const [title, setTitle] = useState<string>("Start new Diagnostic");
const [title, setTitle] = useState<string>("New Diagnostic");
useEffect(() => {
if (serverDiagnosticStatus === DiagStatInProgress) {
@@ -242,11 +243,9 @@ const HealthInfo = ({
return (
<Fragment>
<PageHeader label="Diagnostic" />
<BackLink to="/tools" label="Return to Tools" />
<Grid container className={classes.container}>
<Grid item xs={12}>
<BackLink to="/tools" label="Return to Tools" />
</Grid>
<PageLayout>
<Grid item xs={12} className={classes.boxy}>
<TestWrapper title={title} advancedVisible={false}>
<Grid container className={classes.buttons}>
@@ -306,7 +305,7 @@ const HealthInfo = ({
disabled={startDiagnostic}
onClick={() => setStartDiagnostic(true)}
>
Start new Diagnostic
Start New Diagnostic
</Button>
</Grid>
</Fragment>
@@ -316,7 +315,7 @@ const HealthInfo = ({
</Grid>
</TestWrapper>
</Grid>
</Grid>
</PageLayout>
</Fragment>
);
};

51
portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
View File

@@ -20,8 +20,6 @@ import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { connect } from "react-redux";
import { Grid } from "@mui/material";
import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
import moment from "moment/moment";
import { AppState } from "../../../../store";
import { logMessageReceived, logResetMessages } from "../actions";
@@ -34,19 +32,20 @@ import {
logsCommon,
searchField,
} from "../../Common/FormComponents/common/styleLibrary";
import SearchIcon from "../../../../icons/SearchIcon";
import PageHeader from "../../Common/PageHeader/PageHeader";
import BackLink from "../../../../common/BackLink";
import PageLayout from "../../Common/Layout/PageLayout";
import SearchBox from "../../Common/SearchBox";
const styles = (theme: Theme) =>
createStyles({
logList: {
background: "#fff",
minHeight: 400,
height: "calc(100vh - 304px)",
height: "calc(100vh - 280px)",
overflow: "auto",
fontSize: 13,
padding: "25px 45px 0",
padding: "15px 15px 0",
border: "1px solid #EAEDEE",
borderRadius: 4,
},
@@ -330,41 +329,17 @@ const ErrorLogs = ({
return (
<Fragment>
<PageHeader label="Logs" />
<Grid container className={classes.container}>
<Grid item xs={12}>
<BackLink to="/tools" label="Return to Tools" />
</Grid>
<Grid item xs={12}>
<Grid container className={classes.logsSubContainer}>
<Grid item xs={12} className={classes.actionsTray}>
<TextField
placeholder="Highlight Line"
className={classes.searchField}
id="search-resource"
label=""
onChange={(val) => {
setHighlight(val.target.value);
}}
InputProps={{
disableUnderline: true,
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
variant="standard"
/>
</Grid>
<Grid item xs={12}>
<br />
</Grid>
<Grid item xs={12}>
<div className={classes.logList}>{renderLines}</div>
</Grid>
<BackLink to="/tools" label="Return to Tools" />
<PageLayout>
<Grid xs={12}>
<Grid item xs={12} className={classes.actionsTray}>
<SearchBox placeholder="Highlight Line" onChange={setHighlight} />
</Grid>
<Grid item xs={12}>
<div className={classes.logList}>{renderLines}</div>
</Grid>
</Grid>
</Grid>
</PageLayout>
</Fragment>
);
};

454
portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
View File

@@ -21,13 +21,11 @@ import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Button, Grid } from "@mui/material";
import { ArrowDropUp } from "@mui/icons-material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import {
actionsTray,
advancedFilterToggleStyles,
containerForHeader,
logsCommon,
searchField,
tableStyles,
} from "../../Common/FormComponents/common/styleLibrary";
import { IReqInfoSearchResults, ISearchResponse } from "./types";
import { niceBytes, nsToSeconds } from "../../../../common/utils";
@@ -42,6 +40,8 @@ import { LogSearchColumnLabels } from "./utils";
import DateRangeSelector from "../../Common/FormComponents/DateRangeSelector/DateRangeSelector";
import PageHeader from "../../Common/PageHeader/PageHeader";
import BackLink from "../../../../common/BackLink";
import PageLayout from "../../Common/Layout/PageLayout";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
interface ILogSearchProps {
classes: any;
@@ -51,45 +51,20 @@ interface ILogSearchProps {
const styles = (theme: Theme) =>
createStyles({
inputBar: {
flexGrow: 1,
marginLeft: 15,
},
advancedLabel: {
display: "flex",
alignItems: "center",
color: "#091C42",
border: 0,
backgroundColor: "transparent",
cursor: "pointer",
"&:focus, &:active": {
outline: "none",
},
},
advancedLabelContainer: {
marginTop: 10,
},
getInformationContainer: {
textAlign: "right",
},
orderButton: {
width: 93,
},
recordsLabel: {
alignSelf: "center",
marginLeft: 15,
},
blockCollapsed: {
height: 0,
display: "none",
overflowY: "hidden",
transitionDuration: "0.3s",
},
filterOpen: {
height: 200,
display: "block",
marginBottom: 12,
},
endLineAction: {
marginBottom: 15,
padding: "0 15px 0 15px",
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
},
filtersContainer: {
display: "flex",
@@ -98,10 +73,6 @@ const styles = (theme: Theme) =>
},
innerContainer: {
backgroundColor: "#fff",
border: "#EAEDEE 1px solid",
borderRadius: 3,
padding: 10,
marginBottom: 15,
},
noticeLabel: {
marginLeft: 15,
@@ -111,18 +82,56 @@ const styles = (theme: Theme) =>
},
tableFOpen: {
height: "calc(100vh - 561px)",
height: "calc(100vh - 520px)",
},
tableFClosed: {
height: "calc(100vh - 349px)",
height: "calc(100vh - 320px)",
},
"@global": {
".overrideMargin": {
marginLeft: 0,
...tableStyles,
...advancedFilterToggleStyles,
buttonKit: {
"& div": {
height: 35,
},
"& .MuiOutlinedInput-notchedOutline": {
border: 0,
height: 28,
color: "#000000",
},
},
...searchField,
...actionsTray,
searchOptions: {
display: "flex",
padding: 15,
"@media (max-width: 900px)": {
flexFlow: "column",
},
},
selectorLabel: {
"& + div": {
"@media (max-width: 900px)": {
width: 110,
},
},
"@media (max-width: 900px)": {
marginLeft: 5,
},
},
formBox: {
border: "1px solid #EAEAEA",
marginBottom: 15,
},
dateRangePicker: {
"& div": {
marginBottom: 0,
},
},
advancedButton: {
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
},
advancedFilterOptions: {},
...logsCommon,
...containerForHeader(theme.spacing(4)),
});
@@ -289,103 +298,107 @@ const LogsSearchMain = ({
)}
<PageHeader label="Audit Logs" />
<Grid container className={classes.container}>
<Grid item xs={12}>
<BackLink to="/tools" label="Return to Tools" />
</Grid>
<Grid container className={classes.logsSubContainer}>
<Grid
item
xs={12}
className={`${classes.actionsTray} ${classes.timeContainers}`}
>
<DateRangeSelector
setTimeEnd={setTimeEnd}
setTimeStart={setTimeStart}
timeEnd={timeEnd}
timeStart={timeStart}
/>
</Grid>
<Grid item xs={12} className={`${classes.advancedLabelContainer}`}>
<div
className={`${classes.blockCollapsed} ${
filterOpen ? classes.filterOpen : ""
}`}
>
<div className={classes.innerContainer}>
<div className={classes.noticeLabel}>
Enable your preferred options to get filtered records.
<br />
You can use '*' to match any character, '.' to signify a
single character or '\' to scape an special character (E.g.
mybucket-*)
</div>
<div className={classes.filtersContainer}>
<FilterInputWrapper
onChange={setBucket}
value={bucket}
label={"Bucket"}
id="bucket"
name="bucket"
/>
<FilterInputWrapper
onChange={setApiName}
value={apiName}
label={"API Name"}
id="api_name"
name="api_name"
/>
<FilterInputWrapper
onChange={setUserAgent}
value={userAgent}
label={"User Agent"}
id="user_agent"
name="user_agent"
/>
</div>
<div className={classes.filtersContainer}>
<FilterInputWrapper
onChange={setObject}
value={object}
label={"Object"}
id="object"
name="object"
/>
<FilterInputWrapper
onChange={setRequestID}
value={requestID}
label={"Request ID"}
id="request_id"
name="request_id"
/>
<FilterInputWrapper
onChange={setResponseStatus}
value={responseStatus}
label={"Response Status"}
id="response_status"
name="response_status"
/>
</div>
</div>
<BackLink to="/tools" label="Return to Tools" />
<PageLayout>
<Grid xs={12} className={classes.formBox}>
<Grid item xs={12} className={`${classes.searchOptions}`}>
<div className={classes.dateRangePicker}>
<DateRangeSelector
classes={classes}
setTimeEnd={setTimeEnd}
setTimeStart={setTimeStart}
timeEnd={timeEnd}
timeStart={timeStart}
/>
</div>
</Grid>
<Grid
item
xs={12}
className={`${classes.actionsTray} ${classes.endLineAction}`}
>
<div>
<Grid item className={classes.advancedButton}>
<button
type="button"
className={`${classes.advancedLabel} overrideMargin`}
onClick={() => {
setFilterOpen(!filterOpen);
}}
className={classes.advancedConfiguration}
>
Advanced Filters{" "}
{filterOpen ? <ArrowDropUp /> : <ArrowDropDownIcon />}
{filterOpen ? "Hide" : "Show"} advanced Filters{" "}
<span
className={
filterOpen ? classes.advancedOpen : classes.advancedClosed
}
>
<ArrowForwardIosIcon />
</span>
</button>
</Grid>
</Grid>
<Grid
item
xs={12}
className={`${classes.blockCollapsed} ${
filterOpen ? classes.filterOpen : ""
}`}
>
<div className={classes.innerContainer}>
<div className={classes.noticeLabel}>
Enable your preferred options to get filtered records.
<br />
You can use '*' to match any character, '.' to signify a single
character or '\' to scape an special character (E.g. mybucket-*)
</div>
<div className={classes.filtersContainer}>
<FilterInputWrapper
classes={classes}
onChange={setBucket}
value={bucket}
label={"Bucket"}
id="bucket"
name="bucket"
/>
<FilterInputWrapper
classes={classes}
onChange={setApiName}
value={apiName}
label={"API Name"}
id="api_name"
name="api_name"
/>
<FilterInputWrapper
classes={classes}
onChange={setUserAgent}
value={userAgent}
label={"User Agent"}
id="user_agent"
name="user_agent"
/>
</div>
<div className={classes.filtersContainer}>
<FilterInputWrapper
classes={classes}
onChange={setObject}
value={object}
label={"Object"}
id="object"
name="object"
/>
<FilterInputWrapper
classes={classes}
onChange={setRequestID}
value={requestID}
label={"Request ID"}
id="request_id"
name="request_id"
/>
<FilterInputWrapper
classes={classes}
onChange={setResponseStatus}
value={responseStatus}
label={"Response Status"}
id="response_status"
name="response_status"
/>
</div>
</div>
</Grid>
<Grid item xs={12} className={classes.endLineAction}>
<Button
type="button"
variant="contained"
@@ -395,93 +408,92 @@ const LogsSearchMain = ({
Get Information
</Button>
</Grid>
<Grid item xs={12}>
<TableWrapper
columns={[
{
label: LogSearchColumnLabels.time,
elementKey: "time",
enableSort: true,
},
{
label: LogSearchColumnLabels.api_name,
elementKey: "api_name",
},
{ label: LogSearchColumnLabels.bucket, elementKey: "bucket" },
{ label: LogSearchColumnLabels.object, elementKey: "object" },
{
label: LogSearchColumnLabels.remote_host,
elementKey: "remote_host",
},
{
label: LogSearchColumnLabels.request_id,
elementKey: "request_id",
},
{
label: LogSearchColumnLabels.user_agent,
elementKey: "user_agent",
},
{
label: LogSearchColumnLabels.response_status,
elementKey: "response_status",
renderFunction: (element) => (
<Fragment>
<span>
{element.response_status_code} (
{element.response_status})
</span>
</Fragment>
),
renderFullObject: true,
},
{
label: LogSearchColumnLabels.request_content_length,
elementKey: "request_content_length",
renderFunction: niceBytes,
},
{
label: LogSearchColumnLabels.response_content_length,
elementKey: "response_content_length",
renderFunction: niceBytes,
},
{
label: LogSearchColumnLabels.time_to_response_ns,
elementKey: "time_to_response_ns",
renderFunction: nsToSeconds,
contentTextAlign: "right",
},
]}
isLoading={loading}
records={records}
entityName="Logs"
customEmptyMessage={"There is no information with this criteria"}
idField="request_id"
columnsSelector
columnsShown={columnsShown}
onColumnChange={selectColumn}
customPaperHeight={
filterOpen ? classes.tableFOpen : classes.tableFClosed
}
sortConfig={{
currentSort: "time",
currentDirection: sortOrder,
triggerSort: sortChange,
}}
infiniteScrollConfig={{
recordsCount: 1000000,
loadMoreRecords: loadMoreRecords,
}}
itemActions={[
{
type: "view",
onClick: openExtraInformation,
},
]}
textSelectable
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.tableBlock}>
<TableWrapper
columns={[
{
label: LogSearchColumnLabels.time,
elementKey: "time",
enableSort: true,
},
{
label: LogSearchColumnLabels.api_name,
elementKey: "api_name",
},
{ label: LogSearchColumnLabels.bucket, elementKey: "bucket" },
{ label: LogSearchColumnLabels.object, elementKey: "object" },
{
label: LogSearchColumnLabels.remote_host,
elementKey: "remote_host",
},
{
label: LogSearchColumnLabels.request_id,
elementKey: "request_id",
},
{
label: LogSearchColumnLabels.user_agent,
elementKey: "user_agent",
},
{
label: LogSearchColumnLabels.response_status,
elementKey: "response_status",
renderFunction: (element) => (
<Fragment>
<span>
{element.response_status_code} ({element.response_status})
</span>
</Fragment>
),
renderFullObject: true,
},
{
label: LogSearchColumnLabels.request_content_length,
elementKey: "request_content_length",
renderFunction: niceBytes,
},
{
label: LogSearchColumnLabels.response_content_length,
elementKey: "response_content_length",
renderFunction: niceBytes,
},
{
label: LogSearchColumnLabels.time_to_response_ns,
elementKey: "time_to_response_ns",
renderFunction: nsToSeconds,
contentTextAlign: "right",
},
]}
isLoading={loading}
records={records}
entityName="Logs"
customEmptyMessage={"There is no information with this criteria"}
idField="request_id"
columnsSelector
columnsShown={columnsShown}
onColumnChange={selectColumn}
customPaperHeight={
filterOpen ? classes.tableFOpen : classes.tableFClosed
}
sortConfig={{
currentSort: "time",
currentDirection: sortOrder,
triggerSort: sortChange,
}}
infiniteScrollConfig={{
recordsCount: 1000000,
loadMoreRecords: loadMoreRecords,
}}
itemActions={[
{
type: "view",
onClick: openExtraInformation,
},
]}
textSelectable
/>
</Grid>
</PageLayout>
</Fragment>
);
};

44
portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
View File

@@ -25,6 +25,7 @@ import moment from "moment/moment";
import PageHeader from "../Common/PageHeader/PageHeader";
import {
actionsTray,
advancedFilterToggleStyles,
containerForHeader,
searchField,
} from "../Common/FormComponents/common/styleLibrary";
@@ -36,6 +37,7 @@ import BackLink from "../../../common/BackLink";
import ProgressBarWrapper from "../Common/ProgressBarWrapper/ProgressBarWrapper";
import InputUnitMenu from "../Common/FormComponents/InputUnitMenu/InputUnitMenu";
import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
import PageLayout from "../Common/Layout/PageLayout";
interface ISpeedtest {
classes: any;
@@ -43,33 +45,6 @@ interface ISpeedtest {
const styles = (theme: Theme) =>
createStyles({
advancedConfiguration: {
color: "#2781B0",
fontSize: 10,
textDecoration: "underline",
border: "none",
backgroundColor: "transparent",
cursor: "pointer",
alignItems: "center",
display: "flex",
float: "right",
"&:hover": {
color: "#07193E",
},
"& svg": {
width: 10,
alignSelf: "center",
marginLeft: 5,
},
},
advancedOpen: {
transform: "rotateZ(-90deg) translateX(-4px) translateY(2px)",
},
advancedClosed: {
transform: "rotateZ(90deg)",
},
advancedContent: {
backgroundColor: "#FBFAFA",
maxHeight: 0,
@@ -83,12 +58,6 @@ const styles = (theme: Theme) =>
paddingBottom: 15,
},
},
advancedButton: {
flexGrow: 1,
alignItems: "flex-end",
display: "flex",
justifyContent: "flex-end",
},
progressContainer: {
padding: "0 15px",
},
@@ -99,6 +68,7 @@ const styles = (theme: Theme) =>
advancedOption: {
marginTop: 20,
},
...advancedFilterToggleStyles,
...actionsTray,
...searchField,
...containerForHeader(theme.spacing(4)),
@@ -215,11 +185,9 @@ const Speedtest = ({ classes }: ISpeedtest) => {
return (
<Fragment>
<PageHeader label="Speedtest" />
<BackLink to="/tools" label="Return to Tools" />
<Grid container className={classes.container}>
<Grid item xs={12}>
<BackLink to="/tools" label="Return to Tools" />
</Grid>
<PageLayout>
<Grid item xs={12} className={classes.boxy}>
<Grid container>
<Grid item>
@@ -384,7 +352,7 @@ const Speedtest = ({ classes }: ISpeedtest) => {
</Grid>
</Grid>
</Grid>
</Grid>
</PageLayout>
</Fragment>
);
};

5
portal-ui/src/screens/Console/Tools/ToolsPanel/ToolsList.tsx
View File

@@ -28,6 +28,7 @@ import {
} from "../../Common/FormComponents/common/styleLibrary";
import PageHeader from "../../Common/PageHeader/PageHeader";
import SettingsCard from "../../Common/SettingsCard/SettingsCard";
import PageLayout from "../../Common/Layout/PageLayout";
interface IConfigurationOptions {
classes: any;
@@ -78,7 +79,7 @@ const ToolsList = ({ classes }: IConfigurationOptions) => {
return (
<Fragment>
<PageHeader label={"Tools"} />
<Grid container className={classes.container}>
<PageLayout>
<Grid item xs={12}>
<Grid item xs={12}>
<div className={classes.settingsOptionsContainer}>
@@ -92,7 +93,7 @@ const ToolsList = ({ classes }: IConfigurationOptions) => {
</div>
</Grid>
</Grid>
</Grid>
</PageLayout>
</Fragment>
);
};

521
portal-ui/src/screens/Console/Trace/Trace.tsx
View File

@@ -36,12 +36,14 @@ import {
hrClass,
inlineCheckboxes,
searchField,
tableStyles,
} from "../Common/FormComponents/common/styleLibrary";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import PageHeader from "../Common/PageHeader/PageHeader";
import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
import moment from "moment/moment";
import BackLink from "../../../common/BackLink";
import PageLayout from "../Common/Layout/PageLayout";
const styles = (theme: Theme) =>
createStyles({
@@ -71,18 +73,14 @@ const styles = (theme: Theme) =>
timeItem: {
width: 100,
},
labelCheckboxes: {
fontSize: 16,
fontWeight: 700,
paddingTop: 19,
},
startButton: {
textAlign: "right",
},
...actionsTray,
...searchField,
...hrClass,
...inlineCheckboxes,
...tableStyles,
searchField: {
...searchField.searchField,
margin: "0 5px",
@@ -96,6 +94,39 @@ const styles = (theme: Theme) =>
tableWrapper: {
height: "calc(100vh - 292px)",
},
inlineCheckboxes: {
...inlineCheckboxes.inlineCheckboxes,
alignItems: "center",
"@media (max-width: 900px)": {
flexFlow: "column",
alignItems: "flex-start",
},
},
checkBoxLabel: {
marginTop: 10,
fontSize: 16,
fontWeight: 500,
},
formBox: {
border: "1px solid #EAEAEA",
padding: 15,
marginBottom: 15,
},
midColumnCheckboxes: {
display: "flex",
},
separatorBar: {
fontSize: 16,
fontWeight: 700,
paddingTop: 19,
"@media (max-width: 900px)": {
display: "none",
},
},
noMinWidthLabel: {
fontWeight: 400,
},
...containerForHeader(theme.spacing(4)),
});
@@ -193,248 +224,250 @@ const Trace = ({
return (
<Fragment>
<PageHeader label={"Trace"} />
<Grid container className={classes.container}>
<Grid item xs={12}>
<BackLink to="/tools" label="Return to Tools" />
</Grid>
<Grid item xs={12} className={classes.actionsTray}>
<TextField
placeholder="Status Code"
className={classes.searchField}
id="status-code"
label=""
InputProps={{
disableUnderline: true,
}}
value={statusCode}
onChange={(e) => {
setStatusCode(e.target.value);
}}
disabled={traceStarted}
variant="standard"
/>
<TextField
placeholder="Method"
className={classes.searchField}
id="method"
label=""
InputProps={{
disableUnderline: true,
}}
value={method}
onChange={(e) => {
setMethod(e.target.value);
}}
disabled={traceStarted}
variant="standard"
/>
<TextField
placeholder="Function Name"
className={classes.searchField}
id="func-name"
label=""
disabled={traceStarted}
InputProps={{
disableUnderline: true,
}}
value={func}
onChange={(e) => {
setFunc(e.target.value);
}}
variant="standard"
/>
<TextField
placeholder="Path"
className={classes.searchField}
id="path"
label=""
disabled={traceStarted}
InputProps={{
disableUnderline: true,
}}
value={path}
onChange={(e) => {
setPath(e.target.value);
}}
variant="standard"
/>
<TextField
type="number"
className={classes.searchField}
id="fthreshold"
label="Response Threshold"
disabled={traceStarted}
InputProps={{
disableUnderline: true,
}}
inputProps={{
min: 0,
}}
value={threshold}
onChange={(e) => {
setThreshold(parseInt(e.target.value));
}}
variant="standard"
/>
</Grid>
<Grid item xs={12} className={classes.inlineCheckboxes}>
<span className={classes.labelCheckboxes}>Calls to trace:</span>
<CheckboxWrapper
checked={all}
id={"all_calls"}
name={"all_calls"}
label={"All"}
onChange={(item) => {
setAll(item.target.checked);
}}
value={"all"}
disabled={traceStarted}
/>
<CheckboxWrapper
checked={s3 || all}
id={"s3_calls"}
name={"s3_calls"}
label={"S3"}
onChange={(item) => {
setS3(item.target.checked);
}}
value={"s3"}
disabled={all || traceStarted}
/>
<CheckboxWrapper
checked={internal || all}
id={"internal_calls"}
name={"internal_calls"}
label={"Internal"}
onChange={(item) => {
setInternal(item.target.checked);
}}
value={"internal"}
disabled={all || traceStarted}
/>
<CheckboxWrapper
checked={storage || all}
id={"storage_calls"}
name={"storage_calls"}
label={"Storage"}
onChange={(item) => {
setStorage(item.target.checked);
}}
value={"storage"}
disabled={all || traceStarted}
/>
<CheckboxWrapper
checked={os || all}
id={"os_calls"}
name={"os_calls"}
label={"OS"}
onChange={(item) => {
setOS(item.target.checked);
}}
value={"os"}
disabled={all || traceStarted}
/>
<span className={classes.labelCheckboxes}>
&nbsp; &nbsp; &nbsp; | &nbsp; &nbsp; &nbsp;
</span>
<CheckboxWrapper
checked={errors}
id={"only_errors"}
name={"only_errors"}
label={"Display only Errors"}
onChange={(item) => {
setErrors(item.target.checked);
}}
value={"only_errors"}
disabled={traceStarted}
/>
</Grid>
<Grid item xs={12} className={classes.startButton}>
{!traceStarted && (
<Button
type="submit"
variant="contained"
color="primary"
<BackLink to="/tools" label="Return to Tools" />
<PageLayout>
<Grid xs={12} className={classes.formBox}>
<Grid item xs={12} className={classes.actionsTray}>
<TextField
className={classes.searchField}
id="status-code"
label="Status Code"
InputProps={{
disableUnderline: true,
}}
value={statusCode}
onChange={(e) => {
setStatusCode(e.target.value);
}}
disabled={traceStarted}
onClick={startTrace}
>
Start
</Button>
)}
{traceStarted && (
<Button
type="button"
variant="contained"
color="primary"
onClick={stopTrace}
>
Stop
</Button>
)}
variant="standard"
/>
<TextField
className={classes.searchField}
id="method"
label="Method"
InputProps={{
disableUnderline: true,
}}
value={method}
onChange={(e) => {
setMethod(e.target.value);
}}
disabled={traceStarted}
variant="standard"
/>
<TextField
label="Function Name"
className={classes.searchField}
id="func-name"
disabled={traceStarted}
InputProps={{
disableUnderline: true,
}}
value={func}
onChange={(e) => {
setFunc(e.target.value);
}}
variant="standard"
/>
<TextField
className={classes.searchField}
id="path"
label="Path"
disabled={traceStarted}
InputProps={{
disableUnderline: true,
}}
value={path}
onChange={(e) => {
setPath(e.target.value);
}}
variant="standard"
/>
<TextField
type="number"
className={classes.searchField}
id="fthreshold"
label="Response Threshold"
disabled={traceStarted}
InputProps={{
disableUnderline: true,
}}
inputProps={{
min: 0,
}}
value={threshold}
onChange={(e) => {
setThreshold(parseInt(e.target.value));
}}
variant="standard"
/>
</Grid>
<Grid item xs={12} className={classes.inlineCheckboxes}>
<div className={classes.checkBoxLabel}>Calls to trace:</div>
<div className={classes.midColumnCheckboxes}>
<CheckboxWrapper
checked={all}
classes={classes}
id={"all_calls"}
name={"all_calls"}
label={"All"}
onChange={(item) => {
setAll(item.target.checked);
}}
value={"all"}
disabled={traceStarted}
/>
<CheckboxWrapper
checked={s3 || all}
id={"s3_calls"}
classes={classes}
name={"s3_calls"}
label={"S3"}
onChange={(item) => {
setS3(item.target.checked);
}}
value={"s3"}
disabled={all || traceStarted}
/>
<CheckboxWrapper
checked={internal || all}
id={"internal_calls"}
classes={classes}
name={"internal_calls"}
label={"Internal"}
onChange={(item) => {
setInternal(item.target.checked);
}}
value={"internal"}
disabled={all || traceStarted}
/>
<CheckboxWrapper
checked={storage || all}
id={"storage_calls"}
classes={classes}
name={"storage_calls"}
label={"Storage"}
onChange={(item) => {
setStorage(item.target.checked);
}}
value={"storage"}
disabled={all || traceStarted}
/>
<CheckboxWrapper
checked={os || all}
id={"os_calls"}
classes={classes}
name={"os_calls"}
label={"OS"}
onChange={(item) => {
setOS(item.target.checked);
}}
value={"os"}
disabled={all || traceStarted}
/>
<span className={classes.separatorBar}>
&nbsp; &nbsp; &nbsp; | &nbsp; &nbsp; &nbsp;
</span>
</div>
<CheckboxWrapper
checked={errors}
id={"only_errors"}
classes={classes}
name={"only_errors"}
label={"Display only Errors"}
onChange={(item) => {
setErrors(item.target.checked);
}}
value={"only_errors"}
disabled={traceStarted}
/>
</Grid>
<Grid item xs={12} className={classes.startButton}>
{!traceStarted && (
<Button
type="submit"
variant="contained"
color="primary"
disabled={traceStarted}
onClick={startTrace}
>
Start
</Button>
)}
{traceStarted && (
<Button
type="button"
variant="contained"
color="primary"
onClick={stopTrace}
>
Stop
</Button>
)}
</Grid>
</Grid>
<Grid item xs={12}>
<br />
</Grid>
<TableWrapper
itemActions={[]}
columns={[
{
label: "Time",
elementKey: "ptime",
renderFunction: (time: Date) => {
const timeParse = new Date(time);
return timeFromDate(timeParse);
<Grid item xs={12} className={classes.tableBlock}>
<TableWrapper
itemActions={[]}
columns={[
{
label: "Time",
elementKey: "ptime",
renderFunction: (time: Date) => {
const timeParse = new Date(time);
return timeFromDate(timeParse);
},
globalClass: classes.timeItem,
},
globalClass: classes.timeItem,
},
{ label: "Name", elementKey: "api" },
{
label: "Status",
elementKey: "",
renderFunction: (fullElement: TraceMessage) =>
`${fullElement.statusCode} ${fullElement.statusMsg}`,
renderFullObject: true,
},
{
label: "Location",
elementKey: "configuration_id",
renderFunction: (fullElement: TraceMessage) =>
`${fullElement.host} ${fullElement.client}`,
renderFullObject: true,
},
{
label: "Load Time",
elementKey: "callStats.duration",
globalClass: classes.timeItem,
},
{
label: "Upload",
elementKey: "callStats.rx",
renderFunction: niceBytes,
globalClass: classes.sizeItem,
},
{
label: "Download",
elementKey: "callStats.tx",
renderFunction: niceBytes,
globalClass: classes.sizeItem,
},
]}
isLoading={false}
records={messages}
entityName="Traces"
idField="api"
customEmptyMessage={
traceStarted
? "No Traced elements received yet"
: "Trace is not started yet"
}
customPaperHeight={classes.tableWrapper}
autoScrollToBottom
/>
</Grid>
{ label: "Name", elementKey: "api" },
{
label: "Status",
elementKey: "",
renderFunction: (fullElement: TraceMessage) =>
`${fullElement.statusCode} ${fullElement.statusMsg}`,
renderFullObject: true,
},
{
label: "Location",
elementKey: "configuration_id",
renderFunction: (fullElement: TraceMessage) =>
`${fullElement.host} ${fullElement.client}`,
renderFullObject: true,
},
{
label: "Load Time",
elementKey: "callStats.duration",
globalClass: classes.timeItem,
},
{
label: "Upload",
elementKey: "callStats.rx",
renderFunction: niceBytes,
globalClass: classes.sizeItem,
},
{
label: "Download",
elementKey: "callStats.tx",
renderFunction: niceBytes,
globalClass: classes.sizeItem,
},
]}
isLoading={false}
records={messages}
entityName="Traces"
idField="api"
customEmptyMessage={
traceStarted
? "No Traced elements received yet"
: "Trace is not started yet"
}
customPaperHeight={classes.tableWrapper}
autoScrollToBottom
/>
</Grid>
</PageLayout>
</Fragment>
);
};

92
portal-ui/src/screens/Console/Watch/Watch.tsx
View File

@@ -37,34 +37,29 @@ import {
actionsTray,
containerForHeader,
searchField,
tableStyles,
} from "../Common/FormComponents/common/styleLibrary";
import { ErrorResponseHandler } from "../../../common/types";
import TableWrapper from "../Common/TableWrapper/TableWrapper";
import PageHeader from "../Common/PageHeader/PageHeader";
import api from "../../../common/api";
import BackLink from "../../../common/BackLink";
import PageLayout from "../Common/Layout/PageLayout";
const styles = (theme: Theme) =>
createStyles({
watchList: {
background: "white",
height: "400px",
overflow: "auto",
"& ul": {
margin: "4px",
padding: "0px",
},
"& ul li": {
listStyle: "none",
margin: "0px",
padding: "0px",
borderBottom: "1px solid #dedede",
},
},
searchPrefix: {
flexGrow: 1,
marginLeft: 15,
},
watchTableHeight: {
height: "calc(100vh - 270px)",
},
bucketField: {
flexGrow: 2,
minWidth: 200,
},
...tableStyles,
...actionsTray,
...searchField,
...containerForHeader(theme.spacing(4)),
@@ -73,7 +68,6 @@ const styles = (theme: Theme) =>
const SelectStyled = withStyles((theme: Theme) =>
createStyles({
root: {
width: 450,
lineHeight: "50px",
"label + &": {
marginTop: theme.spacing(3),
@@ -86,7 +80,6 @@ const SelectStyled = withStyles((theme: Theme) =>
height: 50,
fontSize: 13,
lineHeight: "50px",
width: 450,
},
})
)(InputBase);
@@ -191,13 +184,11 @@ const Watch = ({
return (
<React.Fragment>
<PageHeader label="Watch" />
<Grid container className={classes.container}>
<Grid item xs={12}>
<BackLink to="/tools" label="Return to Tools" />
</Grid>
<BackLink to="/tools" label="Return to Tools" />
<PageLayout>
<Grid item xs={12}>
<Grid item xs={12} className={classes.actionsTray}>
<FormControl variant="outlined">
<FormControl variant="outlined" className={classes.bucketField}>
<Select
id="bucket-name"
name="bucket-name"
@@ -227,10 +218,9 @@ const Watch = ({
</Select>
</FormControl>
<TextField
placeholder="Prefix"
className={`${classes.searchField} ${classes.searchPrefix}`}
id="prefix-resource"
label=""
label="Prefix"
disabled={start}
InputProps={{
disableUnderline: true,
@@ -241,10 +231,9 @@ const Watch = ({
variant="standard"
/>
<TextField
placeholder="Suffix"
className={`${classes.searchField} ${classes.searchPrefix}`}
id="suffix-resource"
label=""
label="Suffix"
disabled={start}
InputProps={{
disableUnderline: true,
@@ -264,32 +253,33 @@ const Watch = ({
Start
</Button>
</Grid>
<Grid item xs={12}>
<br />
</Grid>
<TableWrapper
columns={[
{
label: "Time",
elementKey: "Time",
renderFunction: timeFromDate,
},
{
label: "Size",
elementKey: "Size",
renderFunction: niceBytes,
},
{ label: "Type", elementKey: "Type" },
{ label: "Path", elementKey: "Path" },
]}
records={messages}
entityName={"Watch"}
customEmptyMessage={"No Changes at this time"}
idField={"watch_table"}
isLoading={false}
/>
<div className={classes.tableBlock}>
<TableWrapper
columns={[
{
label: "Time",
elementKey: "Time",
renderFunction: timeFromDate,
},
{
label: "Size",
elementKey: "Size",
renderFunction: niceBytes,
},
{ label: "Type", elementKey: "Type" },
{ label: "Path", elementKey: "Path" },
]}
records={messages}
entityName={"Watch"}
customEmptyMessage={"No Changes at this time"}
idField={"watch_table"}
isLoading={false}
customPaperHeight={classes.watchTableHeight}
/>
</div>
</Grid>
</Grid>
</PageLayout>
</React.Fragment>
);
};