+ 
+ {value}
+
+ ) : (
+ {value}
+ )}
+ copyToClipboard(value)}>
+ 
+ Copy
+
+
)}
+
+ 
+
+ )}
+
+ );
+};
+
+export default PageTitle;
diff --git a/src/common/utils/svgIcons.ts b/src/common/utils/svgIcons.ts
index 49a0514..9f6aaeb 100644
--- a/src/common/utils/svgIcons.ts
+++ b/src/common/utils/svgIcons.ts
@@ -1,3 +1,21 @@
import openDexLogo from "../../assets/OpenDEXLogo.svg";
+import expandIcon from "../../assets/icon-expand.svg";
+import readyIcon from "../../assets/icon-ready.svg";
+import syncingIcon from "../../assets/icon-syncing.svg";
+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 };
+export {
+ openDexLogo,
+ expandIcon,
+ readyIcon,
+ syncingIcon,
+ copyIcon,
+ notificationIcon,
+ notificationActiveIcon,
+ downloadIcon,
+ collapseIcon,
+};
diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx
index d89aba1..d79e9f1 100644
--- a/src/dashboard/Dashboard.tsx
+++ b/src/dashboard/Dashboard.tsx
@@ -44,7 +44,7 @@ const useStyles = makeStyles((theme: Theme) =>
content: {
marginLeft: drawerWidth,
backgroundColor: theme.palette.background.default,
- padding: theme.spacing(3),
+ padding: theme.spacing(4),
height: "100vh",
display: "flex",
flexDirection: "column",
diff --git a/src/dashboard/overview/Overview.tsx b/src/dashboard/overview/Overview.tsx
index d28e2ca..d6d020c 100644
--- a/src/dashboard/overview/Overview.tsx
+++ b/src/dashboard/overview/Overview.tsx
@@ -11,6 +11,7 @@ import DashboardContent, {
DashboardContentState,
} from "../DashboardContent";
import OverviewItem from "./OverviewItem";
+import PageTitle from "../../common/components/data-display/text/PageTitle";
type PropsType = DashboardContentProps & WithStyles{title}
+ {false && ( +
+
+ {this.state.initialLoadCompleted ? (
+ this.state.statuses &&
+ this.state.statuses
+ .filter(this.statusFilter)
+ .sort(
+ (a, b) =>
+ this.sortingOrderByService(a.service) -
+ this.sortingOrderByService(b.service)
+ )
+ .map((status) => (
+
+
+ ))
+ ) : (
+
+
);
}
}
diff --git a/src/dashboard/overview/OverviewItem.tsx b/src/dashboard/overview/OverviewItem.tsx
index 356cd96..c57a821 100644
--- a/src/dashboard/overview/OverviewItem.tsx
+++ b/src/dashboard/overview/OverviewItem.tsx
@@ -1,27 +1,24 @@
-import {
- createStyles,
- Divider,
- 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";
import Typography from "@material-ui/core/Typography";
-import GetAppOutlinedIcon from "@material-ui/icons/GetAppOutlined";
import React, { ReactElement, useState } from "react";
-import { Subject } from "rxjs";
-import api from "../../api";
-import Snackbar from "../../common/components/data-display/feedback/Snackbar";
-import LabeledRow from "../../common/components/data-display/LabeledRow";
-import IconButton from "../../common/components/input/buttons/IconButton";
-import TextButton from "../../common/components/input/buttons/TextButton";
-import { formatDateTimeForFilename } from "../../common/utils/dateUtil";
import { isServiceReady } from "../../common/utils/serviceUtil";
import { SERVICES_WITH_ADDITIONAL_INFO } from "../../constants";
import { Status } from "../../models/Status";
import ServiceDetails from "./ServiceDetails";
+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;
@@ -29,58 +26,73 @@ export type OverviewItemProps = {
opendexdNotReady?: boolean;
};
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- cardHeader: {
- padding: theme.spacing(3),
- },
- cardContent: {
- padding: 0,
- "&:last-child": {
- paddingBottom: 0,
- },
- },
- statusDot: {
- height: 10,
- width: 10,
- borderRadius: "50%",
- display: "inline-block",
- marginRight: 10,
- },
- active: {
- backgroundColor: theme.palette.success.light,
- },
- inactive: {
- backgroundColor: theme.palette.error.light,
- },
- })
-);
+const getCardHeaderBackgroundImage = (props: OverviewItemProps) => {
+ if (isServiceReady(props.status)) {
+ return "linear-gradient(to right, #1f995a, #00e64d)";
+ } else {
+ return "linear-gradient(to left, #fea900, #f15a24 0%)";
+ }
+};
-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();
+const useStyles = makeStyles(() => ({
+ cardHeader: (props: OverviewItemProps) => ({
+ padding: "12px 16px 12px 24px",
+ backgroundImage: getCardHeaderBackgroundImage(props),
+ justifyContent: "space-between",
+ alignItems: "center",
+ }),
+ cardHeading: {
+ fontSize: "20px",
+ color: "#000000",
+ },
+ cardContainer: {
+ padding: 0,
+ "&:last-child": {
+ paddingBottom: 0,
},
- error: handleError,
- });
-};
+ },
+ cardContent: {
+ fontSize: "16px",
+ display: "flex",
+ padding: "35px 25px",
+ },
+ cardContentStatusText: {
+ color: "#979797",
+ },
+ cardContentStatusValueText: {
+ color: "#f2f2f2",
+ },
+ expandIcon: {
+ cursor: "pointer",
+ },
+ expandIconContainer: {
+ verticalAlign: "middle",
+ },
+ 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
+
+
+
{isDetailsIconVisible(status) && (
- setDetailsOpen(true)}
- icon={open_in_full }
- tooltipTitle="Details"
- />
- )}
-
-
-
-
- {props.status.service}
-
-
-
- {isDownloadLogsEnabled(status) && (
-
- downloadLogs(status.service, () =>
- errorMsgOpenSubject?.next(true)
- )
- }
- size="small"
- startIcon={
+
)}
-
-
+
-
{detailsOpen && (
setDetailsOpen(false)}
+ titleBackground={getCardHeaderBackgroundImage(props)}
/>
)}
@@ -166,7 +213,7 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => {
openSubject={errorMsgOpenSubject}
type="error"
>
-
+
);
};
diff --git a/src/dashboard/overview/ServiceDetails.tsx b/src/dashboard/overview/ServiceDetails.tsx
index 5ec1075..6fd34bb 100644
--- a/src/dashboard/overview/ServiceDetails.tsx
+++ b/src/dashboard/overview/ServiceDetails.tsx
@@ -1,49 +1,90 @@
-import { createStyles, makeStyles, Theme } from "@material-ui/core";
+import { makeStyles, Theme } from "@material-ui/core";
import React, { ReactElement } from "react";
-import Dialog from "../../common/components/layout/dialog/Dialog";
import { drawerWidth } from "../../common/components/navigation/Menu";
import { Status } from "../../models/Status";
import ServiceDetailsContent from "./ServiceDetailsContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Dialog from "@material-ui/core/Dialog";
+import DialogContent from "@material-ui/core/DialogContent";
+import { collapseIcon } from "../../common/utils/svgIcons";
+import ButtonBase from "@material-ui/core/ButtonBase";
export type ServiceDetailsProps = {
status: Status;
+ statusIcon: string;
handleClose: () => void;
+ titleBackground: string;
};
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- dialog: {
- position: "absolute",
- left: drawerWidth,
- top: 0,
- margin: theme.spacing(3),
- width: "100%",
- maxWidth: `calc(100% - ${drawerWidth + theme.spacing(3) * 2}px)`,
- backgroundColor: theme.palette.background.default,
- },
- })
-);
+const useStyles = makeStyles((theme: Theme) => ({
+ dialog: {
+ position: "absolute",
+ left: drawerWidth,
+ top: 80,
+ margin: theme.spacing(3),
+ width: "100%",
+ maxWidth: `calc(100% - ${drawerWidth + theme.spacing(3) * 2}px)`,
+ backgroundColor: theme.palette.background.default,
+ borderRadius: 0,
+ },
+ dialogTitle: {
+ fontSize: "18px",
+ color: "#000000",
+ },
+ dialogTitleContainer: (props: ServiceDetailsProps) => ({
+ backgroundImage: props.titleBackground,
+ padding: "8px",
+ }),
+ dialogTitleContent: {
+ display: "flex",
+ alignItems: "center",
+ padding: "5px 15px",
+ },
+ logsAndCloseContainer: {
+ display: "flex",
+ marginLeft: "auto",
+ alignItems: "center",
+ },
+ dialogContent: {
+ padding: 0,
+ },
+}));
const ServiceDetails = (props: ServiceDetailsProps): ReactElement => {
- const { status, handleClose } = props;
- const classes = useStyles();
-
- const title = `General ${status.service} info`;
+ const { status, handleClose, statusIcon } = props;
+ const classes = useStyles(props);
return (
-
- }
- />
+
+
+
+ {props.status.service}
+
+
+
+
+ {isDownloadLogsEnabled(status) && (
+
+
+
+
+
+ downloadLogs(status.service, () =>
+ errorMsgOpenSubject?.next(true)
+ )
+ }
+ >
+ 
+ Download Logs
+
+
+ )}
+
+ })
+
Status:
++ {props.status.status} +
+
+
+
);
};
diff --git a/src/dashboard/overview/ServiceDetailsContent.tsx b/src/dashboard/overview/ServiceDetailsContent.tsx
index 61197f5..54216eb 100644
--- a/src/dashboard/overview/ServiceDetailsContent.tsx
+++ b/src/dashboard/overview/ServiceDetailsContent.tsx
@@ -18,6 +18,7 @@ import LabeledRow from "../../common/components/data-display/LabeledRow";
export type ServiceDetailsContentProps = {
status: Status;
closeDetails: () => void;
+ statusIcon: string;
};
type InfoRow = {
@@ -29,7 +30,8 @@ type InfoRow = {
const useStyles = makeStyles((theme: Theme) =>
createStyles({
content: {
- padding: 0,
+ padding: "20px",
+ backgroundColor: "#161616",
},
textRow: {
padding: theme.spacing(3),
@@ -125,7 +127,7 @@ const createLndRows = (lndInfo: LndInfo): InfoRow[] => [
const ServiceDetailsContent = (
props: ServiceDetailsContentProps
): ReactElement => {
- const { status, closeDetails } = props;
+ const { status, closeDetails, statusIcon } = props;
const classes = useStyles();
const [rows, setRows] = useState