From a3f45f1bb8fe347c91b2b56a6018275f6ddff89c Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Fri, 15 May 2020 19:50:03 +0300
Subject: [PATCH] Problems: show maintenance icon with host name

---
 .../components/Problems/Problems.tsx          | 21 +++++++++++++++++--
 src/sass/_panel-problems.scss                 |  5 +++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/panel-triggers/components/Problems/Problems.tsx b/src/panel-triggers/components/Problems/Problems.tsx
index 8f4993d..0ab1e90 100644
--- a/src/panel-triggers/components/Problems/Problems.tsx
+++ b/src/panel-triggers/components/Problems/Problems.tsx
@@ -11,6 +11,7 @@ import { AckProblemData } from '../Modal';
 import GFHeartIcon from '../GFHeartIcon';
 import { ProblemsPanelOptions, GFTimeRange, RTCell, TriggerSeverity, RTResized } from '../../types';
 import { ProblemDTO, ZBXEvent, ZBXTag, ZBXAlert } from '../../../datasource-zabbix/types';
+import FAIcon from '../FAIcon';
 
 export interface ProblemListProps {
   problems: ProblemDTO[];
@@ -88,10 +89,12 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
     const highlightNewerThan = options.highlightNewEvents && options.highlightNewerThan;
     const statusCell = props => StatusCell(props, highlightNewerThan);
     const statusIconCell = props => StatusIconCell(props, highlightNewerThan);
+    const hostNameCell = props => <HostCell name={props.original.host} maintenance={props.original.maintenance} />;
+    const hostTechNameCell = props => <HostCell name={props.original.hostTechName} maintenance={props.original.maintenance} />;
 
     const columns = [
-      { Header: 'Host', accessor: 'host', show: options.hostField },
-      { Header: 'Host (Technical Name)', accessor: 'hostTechName', show: options.hostTechNameField },
+      { Header: 'Host', id: 'host', show: options.hostField, Cell: hostNameCell },
+      { Header: 'Host (Technical Name)', id: 'hostTechName', show: options.hostTechNameField, Cell: hostTechNameCell },
       { Header: 'Host Groups', accessor: 'groups', show: options.hostGroups, Cell: GroupCell },
       { Header: 'Proxy', accessor: 'proxy', show: options.hostProxy },
       {
@@ -178,6 +181,20 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
   }
 }
 
+interface HostCellProps {
+  name: string;
+  maintenance: boolean;
+}
+
+const HostCell: React.FC<HostCellProps> = ({ name, maintenance }) => {
+  return (
+    <div>
+      <span style={{ paddingRight: '0.4rem' }}>{name}</span>
+      {maintenance && <FAIcon customClass="fired" icon="wrench" />}
+    </div>
+  );
+};
+
 function SeverityCell(
   props: RTCell<ProblemDTO>,
   problemSeverityDesc: TriggerSeverity[],
diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss
index 87ba864..e0277a0 100644
--- a/src/sass/_panel-problems.scss
+++ b/src/sass/_panel-problems.scss
@@ -7,6 +7,11 @@
     i {
       width: 1rem;
     }
+
+    &.fired {
+      color: $problem-statusbar-fired;
+      text-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.5);
+    }
   }
 
   // <ReactTable /> styles