Skip to content
Snippets Groups Projects
Commit d3190ae2 authored by Alexander Madsen's avatar Alexander Madsen
Browse files

ICSHWI-11718 Implement new state icons

parent 4479a2f6
No related branches found
No related tags found
2 merge requests!270Merging develop branch to master in order to create RC,!264ICSHWI-11718 Implement new state icons
Hide whitespace changes
Inline Side-by-side
Showing
with 258 additions and 138 deletions
src/components/IOC/IOCIcons/IOCIcons.js
+ 101
− 44
View file @ d3190ae2
import { Tooltip, useTheme } from "@material-ui/core";
import { PlayArrow, Stop, HelpOutline } from "@material-ui/icons";
import React from "react"; import React from "react";
import { Tooltip, useTheme } from "@material-ui/core";
import {
Brightness1,
Cancel,
Error,
RadioButtonUnchecked,
ErrorOutline,
HelpOutline,
PlayCircleFilled,
PauseCircleFilled
} from "@material-ui/icons";
export function IOCStatusIcon({ ioc }) { export function IOCStatusIcon({ ioc }) {
const theme = useTheme(); const theme = useTheme();
const statusBulbColors = { let { active, alert, alerts, activeDeployment } = ioc;
true: theme.palette.status.ok,
false: theme.palette.status.fail,
null: theme.palette.text.disabled
};
const statusBulbIcons = { const iconConfig = {
true: ( active: {
<Tooltip title="Active"> title: "Active",
<PlayArrow /> icon: <Brightness1 />
</Tooltip> },
), disabled: {
false: ( title: "Disabled",
<Tooltip title="Inactive"> icon: <Cancel />
<Stop /> },
</Tooltip> alert: {
), title: "Alert",
null: ( icon: <Error />
<Tooltip title="Unknown"> },
<HelpOutline /> inactive: {
</Tooltip> title: "Inactive",
) icon: <RadioButtonUnchecked />
},
"inactive alert": {
title: "Alert",
icon: <ErrorOutline />
},
null: {
title: "Unknown",
icon: <HelpOutline />
}
}; };
let state = ioc.active ?? null; let status = null;
if (!ioc.activeDeployment) state = null;
if (active === null) active = undefined;
if (typeof alerts === "object") alert = alerts?.[0]?.type;
alert = alert?.toLowerCase();
if (active && (alert === undefined || alert === "info")) {
// Active status / running
status = "active";
} else if (active === false && (alert === undefined || alert === "info")) {
// stopped/paused
status = "disabled";
} else if (active !== undefined && alert !== undefined && alert !== "info") {
// warning/error
status = "alert";
} else if (
(active === undefined || activeDeployment === null) &&
(alert === undefined || alert === "info")
) {
// Inactive status
status = "inactive";
} else if (
(active === undefined || activeDeployment === null) &&
alert !== undefined &&
alert !== "info"
) {
// inactive with warning/error
status = "inactive alert";
} else {
// unknown fallback state
status = null;
}
const iconStyle = { fill: statusBulbColors[state] }; const iconStyle = { fill: theme.palette.status.icons };
const icon = React.cloneElement(statusBulbIcons[state], { style: iconStyle }); const iconTitle = iconConfig[status].title;
const statusIcon = iconConfig[status].icon;
return icon; return (
<Tooltip
title={iconTitle}
style={iconStyle}
>
{statusIcon}
</Tooltip>
);
} }
export function CommandTypeIcon({ type, colorStyle = "colors" }) { export function CommandTypeIcon({ type, colorStyle = "colors" }) {
...@@ -47,8 +100,8 @@ export function CommandTypeIcon({ type, colorStyle = "colors" }) { ...@@ -47,8 +100,8 @@ export function CommandTypeIcon({ type, colorStyle = "colors" }) {
}; };
const commandTypeBlack = { const commandTypeBlack = {
start: theme.black, start: theme.palette.status.icons,
stop: theme.black stop: theme.palette.status.icons
}; };
const colorConfig = { const colorConfig = {
...@@ -57,22 +110,26 @@ export function CommandTypeIcon({ type, colorStyle = "colors" }) { ...@@ -57,22 +110,26 @@ export function CommandTypeIcon({ type, colorStyle = "colors" }) {
}; };
const commandTypeIcons = { const commandTypeIcons = {
start: ( start: {
<Tooltip title="Start IOC"> title: "Set to active",
<PlayArrow /> icon: <PlayCircleFilled />
</Tooltip> },
), stop: {
stop: ( title: "Set to inactive",
<Tooltip title="Stop IOC"> icon: <PauseCircleFilled />
<Stop /> }
</Tooltip>
)
}; };
const iconStyle = { fill: colorConfig[colorStyle][type.toLowerCase()] }; const iconStyle = { fill: colorConfig[colorStyle][type.toLowerCase()] };
const icon = React.cloneElement(commandTypeIcons[type.toLowerCase()], { const iconTitle = commandTypeIcons[type.toLowerCase()].title;
style: iconStyle const statusIcon = commandTypeIcons[type.toLowerCase()].icon;
});
return icon; return (
<Tooltip
title={iconTitle}
style={iconStyle}
>
{statusIcon}
</Tooltip>
);
} }
src/components/IOC/IOCManage/IOCManage.js
+ 0
− 1
View file @ d3190ae2
...@@ -137,7 +137,6 @@ export function IOCManage({ ...@@ -137,7 +137,6 @@ export function IOCManage({
let content = <></>; let content = <></>;
if (ioc) { if (ioc) {
console.log({ ...ioc });
const managedIOC = { ...ioc }; const managedIOC = { ...ioc };
const formInit = { const formInit = {
......
src/components/deployments/DeploymentIcons.js
+ 47
− 34
View file @ d3190ae2
...@@ -4,34 +4,30 @@ import { ...@@ -4,34 +4,30 @@ import {
ErrorOutline, ErrorOutline,
RotateRightOutlined, RotateRightOutlined,
QueueOutlined, QueueOutlined,
ClearOutlined AddCircleOutline,
RemoveCircleOutline
} from "@material-ui/icons"; } from "@material-ui/icons";
import { Tooltip } from "@material-ui/core"; import { Tooltip } from "@material-ui/core";
import { theme } from "../../style/Theme"; import { theme } from "../../style/Theme";
import { RocketLaunch } from "../../icons/RocketLaunch";
export function DeploymentStatusIcon({ status }) { export function DeploymentStatusIcon({ status }) {
const deploymentStatusIcons = { const deploymentStatusIcons = {
successful: ( successful: {
<Tooltip title="Successful"> title: "Successful",
<CheckCircleOutline /> icon: <CheckCircleOutline />
</Tooltip> },
), failed: {
failed: ( title: "Failed",
<Tooltip title="Failed"> icon: <ErrorOutline />
<ErrorOutline /> },
</Tooltip> running: {
), title: "Running",
running: ( icon: <RotateRightOutlined />
<Tooltip title="Running"> },
<RotateRightOutlined /> queued: {
</Tooltip> title: "Queued",
), icon: <QueueOutlined />
queued: ( }
<Tooltip title="Queued">
<QueueOutlined />
</Tooltip>
)
}; };
const deploymentStatusColors = { const deploymentStatusColors = {
...@@ -43,24 +39,41 @@ export function DeploymentStatusIcon({ status }) { ...@@ -43,24 +39,41 @@ export function DeploymentStatusIcon({ status }) {
const state = status.toLowerCase(); const state = status.toLowerCase();
const iconStyle = { fill: deploymentStatusColors[state] }; const iconStyle = { fill: deploymentStatusColors[state] };
const icon = React.cloneElement(deploymentStatusIcons[state], { const iconTitle = deploymentStatusIcons[state].title;
style: iconStyle const statusIcon = deploymentStatusIcons[state].icon;
});
return icon; return (
<Tooltip
title={iconTitle}
style={iconStyle}
>
{statusIcon}
</Tooltip>
);
} }
export function DeploymentTypeIcon({ type }) { export function DeploymentTypeIcon({ type }) {
const deploymentTypeIcons = { const deploymentTypeIcons = {
deploy: <RocketLaunch />, deploy: {
undeploy: ( title: "Deployment",
<Tooltip title="Undeployment"> icon: <AddCircleOutline />
<ClearOutlined /> },
</Tooltip> undeploy: {
) title: "Undeployment",
icon: <RemoveCircleOutline />
}
}; };
const icon = React.cloneElement(deploymentTypeIcons[type.toLowerCase()]); const iconStyle = { fill: theme.palette.status.icons };
const iconTitle = deploymentTypeIcons[type.toLowerCase()].title;
const statusIcon = deploymentTypeIcons[type.toLowerCase()].icon;
return icon; return (
<Tooltip
title={iconTitle}
style={iconStyle}
>
{statusIcon}
</Tooltip>
);
} }
src/components/host/HostIcons.js
+ 73
− 27
View file @ d3190ae2
import { Tooltip, useTheme } from "@material-ui/core";
import { Brightness1, ErrorOutline, HelpOutline } from "@material-ui/icons";
import React from "react"; import React from "react";
import { Tooltip, useTheme } from "@material-ui/core";
import {
Brightness1,
ErrorOutline,
Error,
RadioButtonUnchecked,
HelpOutline
} from "@material-ui/icons";
export function HostStatusIcon({ host }) { export function HostStatusIcon({ host }) {
const theme = useTheme(); const theme = useTheme();
const statusBulbColors = { let { status, alert, alerts } = host;
available: theme.palette.status.ok,
unreachable: theme.palette.status.fail,
null: theme.palette.text.disabled
};
const statusBulbIcons = { const iconConfig = {
available: ( available: {
<Tooltip title="Available"> title: "Active",
<Brightness1 /> icon: <Brightness1 />
</Tooltip> },
), alert: {
unreachable: ( title: "Alert",
<Tooltip title="Unreachable"> icon: <Error />
<ErrorOutline /> },
</Tooltip> inactive: {
), title: "Inactive",
null: ( icon: <RadioButtonUnchecked />
<Tooltip title="Unknown"> },
<HelpOutline /> "inactive alert": {
</Tooltip> title: "Alert",
) icon: <ErrorOutline />
},
null: {
title: "Unknown",
icon: <HelpOutline />
}
}; };
let state = host.status ? host.status.toLowerCase() : null; let state = null;
status = status?.toLowerCase();
if (typeof alerts === "object") alert = alerts?.[0]?.type;
alert = alert?.toLowerCase();
if (status === "available" && (alert === undefined || alert === "info")) {
// Available status / no error or warning
state = "available";
} else if (
status === "available" &&
(alert === "warning" || alert === "error")
) {
// Available status / with error or warning
state = "alert";
} else if (
status === "unreachable" &&
(alert === undefined || alert === "info")
) {
// Unreachable status / no error or warning
state = "inactive";
} else if (
status === "unreachable" &&
(alert === "warning" || alert === "error")
) {
// Unreachable status / with error or warning
state = "inactive alert";
} else {
// unknown fallback state
state = null;
}
const iconStyle = { fill: statusBulbColors[state] }; const iconStyle = { fill: theme.palette.status.icons };
const icon = React.cloneElement(statusBulbIcons[state], { style: iconStyle }); const iconTitle = iconConfig[state].title;
const statusIcon = iconConfig[state].icon;
return icon; return (
<Tooltip
title={iconTitle}
style={iconStyle}
>
{statusIcon}
</Tooltip>
);
} }
src/components/host/HostTable.spec.js
+ 1
− 1
View file @ d3190ae2
...@@ -7,7 +7,7 @@ const { Populated } = composeStories(stories); ...@@ -7,7 +7,7 @@ const { Populated } = composeStories(stories);
const textColumns = ["host", "description", "network", "scope", "device type"]; const textColumns = ["host", "description", "network", "scope", "device type"];
const columns = ["status"].concat(textColumns); const columns = ["status"].concat(textColumns);
const firstRowData = [ const firstRowData = [
"Available", "Active",
"mebt-vm-ioc01", "mebt-vm-ioc01",
"MEBT RF SSPA (Buncher Amplifier) IOC", "MEBT RF SSPA (Buncher Amplifier) IOC",
"ChannelAccess-ACC", "ChannelAccess-ACC",
......
src/components/records/RecordIcons.js
+ 32
− 28
View file @ d3190ae2
import { Tooltip, useTheme } from "@material-ui/core";
import { Brightness1, HelpOutline } from "@material-ui/icons";
import React from "react"; import React from "react";
import { Tooltip, useTheme } from "@material-ui/core";
import {
Brightness1,
RadioButtonUnchecked,
HelpOutline
} from "@material-ui/icons";
export function RecordStatusIcon({ record }) { export function RecordStatusIcon({ record }) {
const theme = useTheme(); const theme = useTheme();
const statusBulbColors = { let { pvStatus } = record;
active: theme.palette.status.ok,
inactive: theme.palette.text.disabled,
null: theme.palette.text.disabled
};
const statusBulbIcons = { const iconConfig = {
active: ( active: {
<Tooltip title="Active"> title: "Active",
<Brightness1 /> icon: <Brightness1 />
</Tooltip> },
), inactive: {
inactive: ( title: "Inactive",
<Tooltip title="Inactive"> icon: <RadioButtonUnchecked />
<HelpOutline /> },
</Tooltip> null: {
), title: "Unknown",
null: ( icon: <HelpOutline />
<Tooltip title="Unknown"> }
<HelpOutline />
</Tooltip>
)
}; };
let state = record.pvStatus ? record.pvStatus.toLowerCase() : null; let state = pvStatus ? pvStatus.toLowerCase() : null;
const iconStyle = { fill: theme.palette.status.icons };
const iconStyle = { fill: statusBulbColors[state] }; const iconTitle = iconConfig[state].title;
const icon = React.cloneElement(statusBulbIcons[state], { style: iconStyle }); const statusIcon = iconConfig[state].icon;
return icon; return (
<Tooltip
title={iconTitle}
style={iconStyle}
>
{statusIcon}
</Tooltip>
);
} }
src/style/Theme.js
+ 4
− 3
View file @ d3190ae2
import { createMuiTheme } from "@material-ui/core/styles"; import { createTheme } from "@material-ui/core/styles";
import { chartColors } from "./Palette"; import { chartColors } from "./Palette";
import createBreakpoints from "@material-ui/core/styles/createBreakpoints"; import createBreakpoints from "@material-ui/core/styles/createBreakpoints";
const breakpoints = createBreakpoints({}); const breakpoints = createBreakpoints({});
export const theme = createMuiTheme({ export const theme = createTheme({
breakpoints, breakpoints,
overrides: { overrides: {
MuiTooltip: { MuiTooltip: {
...@@ -52,7 +52,8 @@ export const theme = createMuiTheme({ ...@@ -52,7 +52,8 @@ export const theme = createMuiTheme({
ok: "#4caf50", ok: "#4caf50",
fail: "#aa2e25", fail: "#aa2e25",
neutral: "#000", neutral: "#000",
progress: "#ffc107" progress: "#ffc107",
icons: "#454545"
}, },
graph: chartColors graph: chartColors
}, },
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment