diff --git a/src/components/IOC/IOCBadge.js b/src/components/IOC/IOCBadge.js index 8682ef2b30df87fcd0b8362d520f29a03abba9f7..4c08d8f0f6bd3b591bb8e7d0b693b59d0c7f84b8 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 0000000000000000000000000000000000000000..9e2cb06015e75a4c19855687c73b60b8bc41abb0 --- /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 0000000000000000000000000000000000000000..30b14367fa68e0ad93f9f13a60d1a481a82684b2 --- /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