From 347c6aba3b473af280f1898104fedc590b420ac7 Mon Sep 17 00:00:00 2001
From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com>
Date: Sun, 28 Nov 2021 07:22:06 +0000
Subject: [PATCH] Ux Tools screens (#1261)

Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../DateTimePickerWrapper.tsx                 |   3 +
 .../FormComponents/common/styleLibrary.ts     |  36 ++
 portal-ui/src/screens/Console/Heal/Heal.tsx   | 213 +++----
 .../screens/Console/HealthInfo/HealthInfo.tsx |  13 +-
 .../Console/Logs/ErrorLogs/ErrorLogs.tsx      |  51 +-
 .../Console/Logs/LogSearch/LogsSearchMain.tsx | 454 +++++++--------
 .../screens/Console/Speedtest/Speedtest.tsx   |  44 +-
 .../Console/Tools/ToolsPanel/ToolsList.tsx    |   5 +-
 portal-ui/src/screens/Console/Trace/Trace.tsx | 521 ++++++++++--------
 portal-ui/src/screens/Console/Watch/Watch.tsx |  92 ++--
 10 files changed, 737 insertions(+), 695 deletions(-)

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx
index bddca57cd..0e518d896 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx
@@ -95,6 +95,9 @@ const styles = (theme: Theme) =>
         fontWeight: "bold",
         color: "#081C42",
       },
+      "@media (max-width: 900px)": {
+        width: 103,
+      },
     },
     dateSelectorFormOverride: {
       width: "100%",
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 5f0801fb9..cff7c5b7f 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -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)",
+  },
+};
diff --git a/portal-ui/src/screens/Console/Heal/Heal.tsx b/portal-ui/src/screens/Console/Heal/Heal.tsx
index 9e4b3472d..4251e8e1c 100644
--- a/portal-ui/src/screens/Console/Heal/Heal.tsx
+++ b/portal-ui/src/screens/Console/Heal/Heal.tsx
@@ -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>
   );
 };
diff --git a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
index 02a1e52a4..1a31b6423 100644
--- a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
+++ b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
@@ -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>
   );
 };
diff --git a/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx b/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
index 3b6a0fe06..ce60d5fc0 100644
--- a/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
+++ b/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
@@ -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>
   );
 };
diff --git a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
index 42fe92688..ed29cb113 100644
--- a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
+++ b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
@@ -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>
   );
 };
diff --git a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
index 8d752e50b..25860fa0c 100644
--- a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
@@ -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>
   );
 };
diff --git a/portal-ui/src/screens/Console/Tools/ToolsPanel/ToolsList.tsx b/portal-ui/src/screens/Console/Tools/ToolsPanel/ToolsList.tsx
index 50eb01edd..e59e543b3 100644
--- a/portal-ui/src/screens/Console/Tools/ToolsPanel/ToolsList.tsx
+++ b/portal-ui/src/screens/Console/Tools/ToolsPanel/ToolsList.tsx
@@ -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>
   );
 };
diff --git a/portal-ui/src/screens/Console/Trace/Trace.tsx b/portal-ui/src/screens/Console/Trace/Trace.tsx
index 2865f692b..a52059712 100644
--- a/portal-ui/src/screens/Console/Trace/Trace.tsx
+++ b/portal-ui/src/screens/Console/Trace/Trace.tsx
@@ -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>
   );
 };
diff --git a/portal-ui/src/screens/Console/Watch/Watch.tsx b/portal-ui/src/screens/Console/Watch/Watch.tsx
index 7eeda7f78..b6fa65d48 100644
--- a/portal-ui/src/screens/Console/Watch/Watch.tsx
+++ b/portal-ui/src/screens/Console/Watch/Watch.tsx
@@ -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>
   );
 };