style: use isServiceReady to determine ready status, move Download Logs back outside Overview item, use collapse icon instead of expand, created PageTitle component to be reusable with all views

Author: scorebreaker

src/assets/icon-collapse.svg

@@ -7,15 +7,15 @@ import ButtonBase from "@material-ui/core/ButtonBase";
 type LabeledRowProps = {
   label: string;
   value: string | number;
-  paddingSpacing?: number;
   showCopyIcon?: boolean;
+  padding?: string;
   reserveSpaceForCopyIcon?: boolean;
   statusIcon?: string;
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   cell: (props: LabeledRowProps) => ({
-    padding: theme.spacing(props.paddingSpacing ?? 2),
+    padding: props.padding ? props.padding : "15px 40px",
     wordWrap: "break-word",
     whiteSpace: "pre-wrap",
     fontSize: "16px",

src/common/components/data-display/LabeledRow.tsx

@@ -0,0 +1,47 @@
+import React, { ReactElement } from "react";
+import { Icon } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
+import { notificationIcon } from "../../../utils/svgIcons";
+
+type PageTitleProps = {
+  title: string;
+};
+
+const useStyles = makeStyles(() => ({
+  headingContainer: {
+    display: "flex",
+    alignItems: "center",
+  },
+  heading: {
+    fontSize: "30px",
+    fontWeight: 500,
+  },
+  notificationIconContainer: {
+    marginLeft: "auto",
+  },
+  notificationIcon: {
+    cursor: "pointer",
+  },
+}));
+
+const PageTitle = (props: PageTitleProps): ReactElement => {
+  const { title } = props;
+  const classes = useStyles();
+
+  return (
+    <div className={classes.headingContainer}>
+      <h1 className={classes.heading}>{title}</h1>
+      {false && (
+        <Icon className={classes.notificationIconContainer}>
+          <img
+            src={notificationIcon}
+            alt="notifications"
+            className={classes.notificationIcon}
+          />
+        </Icon>
+      )}
+    </div>
+  );
+};
+
+export default PageTitle;

src/common/components/data-display/text/PageTitle.tsx

@@ -6,6 +6,7 @@ import copyIcon from "../../assets/icon-copy.svg";
 import notificationIcon from "../../assets/icon-notification.svg";
 import notificationActiveIcon from "../../assets/icon-notification-active.svg";
 import downloadIcon from "../../assets/icon-download-log.svg";
+import collapseIcon from "../../assets/icon-collapse.svg";
 
 export {
   openDexLogo,
@@ -16,4 +17,5 @@ export {
   notificationIcon,
   notificationActiveIcon,
   downloadIcon,
+  collapseIcon
 };

src/common/utils/svgIcons.ts

@@ -1,4 +1,4 @@
-import { createStyles, withStyles, WithStyles, Icon } from "@material-ui/core";
+import { createStyles, withStyles, WithStyles } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
 import { inject, observer } from "mobx-react";
 import React, { ReactElement } from "react";
@@ -11,7 +11,7 @@ import DashboardContent, {
   DashboardContentState,
 } from "../DashboardContent";
 import OverviewItem from "./OverviewItem";
-import { notificationIcon } from "../../common/utils/svgIcons";
+import PageTitle from "../../common/components/data-display/text/PageTitle";
 
 type PropsType = DashboardContentProps & WithStyles<typeof styles>;
 
@@ -82,20 +82,7 @@ class Overview extends DashboardContent<PropsType, StateType> {
 
     return (
       <div>
-        <div className={classes.headingContainer}>
-          <h1 className={classes.heading}>Overview</h1>
-          <Icon
-            onClick={() => this.handleSelectNotifications()}
-            className={classes.notificationIconContainer}
-          >
-            <img
-              src={notificationIcon}
-              alt="notifications"
-              className={classes.notificationIcon}
-            />
-          </Icon>
-        </div>
-
+        <PageTitle title="Overview" />
         <Grid container spacing={2} className={classes.wrapper}>
           {this.state.initialLoadCompleted ? (
             this.state.statuses &&

src/dashboard/overview/Overview.tsx

@@ -1,4 +1,4 @@
-import { Icon, makeStyles, Theme } from "@material-ui/core";
+import { Icon, makeStyles } from "@material-ui/core";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Grid from "@material-ui/core/Grid";
@@ -12,7 +12,13 @@ import {
   expandIcon,
   readyIcon,
   syncingIcon,
+  downloadIcon,
 } from "../../common/utils/svgIcons";
+import ButtonBase from "@material-ui/core/ButtonBase";
+import api from "../../api";
+import { formatDateTimeForFilename } from "../../common/utils/dateUtil";
+import { Subject } from "rxjs";
+import Snackbar from "../../common/components/data-display/feedback/Snackbar";
 
 export type OverviewItemProps = {
   status: Status;
@@ -21,14 +27,14 @@ export type OverviewItemProps = {
 };
 
 const getCardHeaderBackgroundImage = (props: OverviewItemProps) => {
-  if (props.status.status.includes("Ready")) {
+  if (isServiceReady(props.status)) {
     return "linear-gradient(to right, #1f995a, #00e64d)";
   } else {
     return "linear-gradient(to left, #fea900, #f15a24 0%)";
   }
 };
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
   cardHeader: (props: OverviewItemProps) => ({
     padding: "12px 16px 12px 24px",
     backgroundImage: getCardHeaderBackgroundImage(props),
@@ -56,19 +62,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   cardContentStatusValueText: {
     color: "#f2f2f2",
   },
-  statusDot: {
-    height: 10,
-    width: 10,
-    borderRadius: "50%",
-    display: "inline-block",
-    marginRight: 10,
-  },
-  active: {
-    backgroundColor: theme.palette.success.light,
-  },
-  inactive: {
-    backgroundColor: theme.palette.error.light,
-  },
   expandIcon: {
     cursor: "pointer",
   },
@@ -78,12 +71,28 @@ const useStyles = makeStyles((theme: Theme) => ({
   statusIcon: {
     padding: "0 10px",
   },
+  downloadIconContainer: {
+    fontSize: "14px",
+    color: "#000000",
+    textDecoration: "underline",
+  },
+  detailsIconContainer: {
+    display: "flex",
+    justifyContent: "flex-end",
+  },
+  titleAndLogsContainer: {
+    width: "66.6%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
 }));
 
 const OverviewItem = (props: OverviewItemProps): ReactElement => {
   const { status, opendexdLocked, opendexdNotReady } = props;
   const [detailsOpen, setDetailsOpen] = useState(false);
   const classes = useStyles(props);
+  const errorMsgOpenSubject = new Subject<boolean>();
 
   const isDetailsIconVisible = (status: Status): boolean => {
     return (
@@ -95,28 +104,72 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => {
   };
 
   const getStatusIcon = (status: Status) => {
-    if (status.status.includes("Ready")) {
+    if (isServiceReady(status)) {
       return readyIcon;
     } else {
       return syncingIcon;
     }
   };
 
+  const isDownloadLogsEnabled = (status: Status): boolean => {
+    return (
+      !status.status.includes("light mode") && status.status !== "Disabled"
+    );
+  };
+
+  const downloadLogs = (serviceName: string, handleError: () => void): void => {
+    api.logs$(serviceName).subscribe({
+      next: (resp: string) => {
+        const blob = new Blob([resp]);
+        const url = URL.createObjectURL(blob);
+        const anchor = Object.assign(document.createElement("a"), {
+          href: url,
+          download: `${serviceName}_${formatDateTimeForFilename(
+            new Date()
+          )}.log`,
+          style: { display: "none" },
+        });
+        anchor.click();
+      },
+      error: handleError,
+    });
+  };
+
   return (
     <div>
       <Card square={true}>
         <Grid container className={classes.cardHeader}>
-          <Grid>
-            <Typography
-              component="span"
-              variant="body1"
-              className={classes.cardHeading}
-            >
-              {props.status.service}
-            </Typography>
-          </Grid>
+          <div className={classes.titleAndLogsContainer}>
+            <Grid>
+              <Typography
+                component="span"
+                variant="body1"
+                className={classes.cardHeading}
+              >
+                {props.status.service}
+              </Typography>
+            </Grid>
 
-          <Grid>
+            <Grid>
+              {isDownloadLogsEnabled(status) && (
+                <div>
+                  <ButtonBase
+                    className={classes.downloadIconContainer}
+                    onClick={() =>
+                      downloadLogs(status.service, () =>
+                        errorMsgOpenSubject?.next(true)
+                      )
+                    }
+                  >
+                    <img src={downloadIcon} alt="download logs" />
+                    Download Logs
+                  </ButtonBase>
+                </div>
+              )}
+            </Grid>
+          </div>
+
+          <Grid className={classes.detailsIconContainer}>
             {isDetailsIconVisible(status) && (
               <Icon
                 onClick={() => setDetailsOpen(true)}
@@ -154,6 +207,12 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => {
           titleBackground={getCardHeaderBackgroundImage(props)}
         />
       )}
+
+      <Snackbar
+        message={`Could not download the logs for ${status.service}`}
+        openSubject={errorMsgOpenSubject}
+        type="error"
+      ></Snackbar>
     </div>
   );
 };