From 4c52a4d981243edf0910be6d55ac6e83217c6eb3 Mon Sep 17 00:00:00 2001
From: John Sparger <john.sparger@ess.eu>
Date: Thu, 11 Feb 2021 10:32:51 +0100
Subject: [PATCH] created reusable IconBadge component. Updated IOCBadge to use
it. Also Created IOCIcons
---
src/components/IOC/IOCBadge.js | 52 ++----------------------
src/components/IOC/IOCIcons.js | 27 ++++++++++++
src/components/common/Badge/IconBadge.js | 30 ++++++++++++++
3 files changed, 60 insertions(+), 49 deletions(-)
create mode 100644 src/components/IOC/IOCIcons.js
create mode 100644 src/components/common/Badge/IconBadge.js
diff --git a/src/components/IOC/IOCBadge.js b/src/components/IOC/IOCBadge.js
index 8682ef2b..4c08d8f0 100644
--- a/src/components/IOC/IOCBadge.js
+++ b/src/components/IOC/IOCBadge.js
@@ -1,55 +1,9 @@
import React from "react";
-import { Grid, Typography, useTheme } from "@material-ui/core";
-import { Brightness1, ErrorOutline, RadioButtonUnchecked } from "@material-ui/icons";
-
-export function IOCSummary({ icon, title, subheader }) {
- return (
- <Grid container alignItems="center">
- <Grid item xs={2} sm={1}>
- <Grid container>
- <Grid item xs={12}>
- {icon}
- </Grid>
- </Grid>
- </Grid>
- <Grid item xs={10} sm={11}>
- <Grid container>
- <Grid item xs={12} zeroMinWidth>
- <Typography noWrap color="textPrimary">
- {title}
- </Typography>
- </Grid>
- <Grid item xs={12} zeroMinWidth>
- <Typography noWrap color="textSecondary">
- {subheader}
- </Typography>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- );
-}
+import { IconBadge } from "../common/Badge/IconBadge";
+import { IOCStatusIcon } from "./IOCIcons";
export function IOCBadge({ ioc }) {
- const theme = useTheme();
-
- const statusBulbColors = {
- "ok": theme.palette.success.light,
- "down": theme.palette.text.disabled,
- "unreachable": theme.palette.secondary.light,
- "undeployed": theme.palette.text.disabled,
- };
-
- const statusBulbIcons = {
- "ok": <Brightness1 />,
- "down": <Brightness1 />,
- "unreachable": <ErrorOutline />,
- "undeployed": <RadioButtonUnchecked />,
- }
-
- const iconStyle = { fill: statusBulbColors[ioc.status] };
- const icon = React.cloneElement(statusBulbIcons[ioc.status], { style: iconStyle });
return (
- <IOCSummary icon={icon} title={ioc.name} subheader={ioc.host || "---"} />
+ <IconBadge icon={<IOCStatusIcon ioc={ioc} />} title={ioc.name} subheader={ioc.host || "---"} />
)
}
\ No newline at end of file
diff --git a/src/components/IOC/IOCIcons.js b/src/components/IOC/IOCIcons.js
new file mode 100644
index 00000000..9e2cb060
--- /dev/null
+++ b/src/components/IOC/IOCIcons.js
@@ -0,0 +1,27 @@
+import { useTheme } from "@material-ui/core";
+import { Brightness1, ErrorOutline, RadioButtonUnchecked } from "@material-ui/icons";
+import React from "react";
+
+export function IOCStatusIcon({ ioc }) {
+
+ const theme = useTheme();
+
+ const statusBulbColors = {
+ "ok": theme.palette.success.light,
+ "down": theme.palette.text.disabled,
+ "unreachable": theme.palette.secondary.light,
+ "undeployed": theme.palette.text.disabled,
+ };
+
+ const statusBulbIcons = {
+ "ok": <Brightness1 />,
+ "down": <Brightness1 />,
+ "unreachable": <ErrorOutline />,
+ "undeployed": <RadioButtonUnchecked />,
+ }
+
+ const iconStyle = { fill: statusBulbColors[ioc.status] };
+ const icon = React.cloneElement(statusBulbIcons[ioc.status], { style: iconStyle });
+
+ return icon;
+}
diff --git a/src/components/common/Badge/IconBadge.js b/src/components/common/Badge/IconBadge.js
new file mode 100644
index 00000000..30b14367
--- /dev/null
+++ b/src/components/common/Badge/IconBadge.js
@@ -0,0 +1,30 @@
+import { Grid, Typography } from "@material-ui/core";
+import React from "react";
+
+export function IconBadge({ icon, title, subheader }) {
+ return (
+ <Grid container alignItems="center">
+ <Grid item xs={2} sm={1}>
+ <Grid container>
+ <Grid item xs={12}>
+ {icon}
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={10} sm={11}>
+ <Grid container>
+ <Grid item xs={12} zeroMinWidth>
+ <Typography noWrap color="textPrimary">
+ {title}
+ </Typography>
+ </Grid>
+ <Grid item xs={12} zeroMinWidth>
+ <Typography noWrap color="textSecondary">
+ {subheader}
+ </Typography>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ );
+}
\ No newline at end of file
--
GitLab