Migrate problems panel to React (#1532)

* Replace default angular app config editor

* Problems panel: migrate module to ts

* Problems panel options editor to react

* Problems panel react WIP

* Fix explore button

* Problems panel alert list layout WIP

* Refactor

* Minor tweaks on panel options

* remove outdated tests

* Update typescript

* Draft for tag event handling

* Remove unused files

src/panel-triggers/components/Problems/ProblemDetails.tsx

@@ -1,24 +1,24 @@
 import React, { FC, PureComponent } from 'react';
 import moment from 'moment';
-import { TimeRange, DataSourceRef } from "@grafana/data";
+import { TimeRange, DataSourceRef } from '@grafana/data';
 import { Tooltip } from '@grafana/ui';
 import { getDataSourceSrv } from '@grafana/runtime';
 import * as utils from '../../../datasource-zabbix/utils';
 import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXGroup, ZBXHost, ZBXTag } from '../../../datasource-zabbix/types';
 import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource-zabbix/zabbix/connectors/zabbix_api/types';
-import { GFTimeRange, RTRow, ZBXItem } from '../../types';
 import { AckModal, AckProblemData } from '../AckModal';
 import EventTag from '../EventTag';
 import AcknowledgesList from './AcknowledgesList';
 import ProblemTimeline from './ProblemTimeline';
 import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController } from '../../../components';
 import { ExecScriptData, ExecScriptModal } from '../ExecScriptModal';
-import ProblemStatusBar from "./ProblemStatusBar";
+import ProblemStatusBar from './ProblemStatusBar';
+import { ZBXItem } from '../../../datasource-zabbix/types';
+import { RTRow } from '../../types';
 
 interface ProblemDetailsProps extends RTRow<ProblemDTO> {
   rootWidth: number;
-  timeRange: GFTimeRange;
-  range: TimeRange;
+  timeRange: TimeRange;
   showTimeline?: boolean;
   panelId?: number;
   getProblemEvents: (problem: ProblemDTO) => Promise<ZBXEvent[]>;
@@ -65,16 +65,14 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
 
   fetchProblemEvents() {
     const problem = this.props.original;
-    this.props.getProblemEvents(problem)
-    .then(events => {
+    this.props.getProblemEvents(problem).then((events) => {
       this.setState({ events });
     });
   }
 
   fetchProblemAlerts() {
     const problem = this.props.original;
-    this.props.getProblemAlerts(problem)
-    .then(alerts => {
+    this.props.getProblemAlerts(problem).then((alerts) => {
       this.setState({ alerts });
     });
   }
@@ -97,15 +95,15 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
   render() {
     const problem = this.props.original as ProblemDTO;
     const alerts = this.state.alerts;
-    const { rootWidth, panelId, range } = this.props;
+    const { rootWidth, panelId, timeRange } = this.props;
     const displayClass = this.state.show ? 'show' : '';
     const wideLayout = rootWidth > 1200;
-    const compactStatusBar = rootWidth < 800 || problem.acknowledges && wideLayout && rootWidth < 1400;
+    const compactStatusBar = rootWidth < 800 || (problem.acknowledges && wideLayout && rootWidth < 1400);
     const age = moment.unix(problem.timestamp).fromNow(true);
     const showAcknowledges = problem.acknowledges && problem.acknowledges.length !== 0;
     const problemSeverity = Number(problem.severity);
 
-    let dsName: string = (this.props.original.datasource as string);
+    let dsName: string = this.props.original.datasource as string;
     if ((this.props.original.datasource as DataSourceRef)?.uid) {
       const dsInstance = getDataSourceSrv().getInstanceSettings((this.props.original.datasource as DataSourceRef).uid);
       dsName = dsInstance.name;
@@ -117,106 +115,111 @@ export class ProblemDetails extends PureComponent<ProblemDetailsProps, ProblemDe
           <div className="problem-details">
             <div className="problem-details-head">
               <div className="problem-actions-left">
-                <ExploreButton problem={problem} panelId={panelId} range={range}/>
+                <ExploreButton problem={problem} panelId={panelId} range={timeRange} />
               </div>
-              {problem.showAckButton &&
-              <div className="problem-actions">
-                <ModalController>
-                  {({ showModal, hideModal }) => (
-                    <ExecScriptButton
-                      className="problem-action-button"
-                      onClick={() => {
-                        showModal(ExecScriptModal, {
-                          getScripts: this.getScripts,
-                          onSubmit: this.onExecuteScript,
-                          onDismiss: hideModal,
-                        });
-                      }}
-                    />
-                  )}
-                </ModalController>
-                <ModalController>
-                  {({ showModal, hideModal }) => (
-                    <AckButton
-                      className="problem-action-button"
-                      onClick={() => {
-                        showModal(AckModal, {
-                          canClose: problem.manual_close === '1',
-                          severity: problemSeverity,
-                          onSubmit: this.ackProblem,
-                          onDismiss: hideModal,
-                        });
-                      }}
-                    />
-                  )}
-                </ModalController>
-              </div>
-              }
-              <ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'}/>
+              {problem.showAckButton && (
+                <div className="problem-actions">
+                  <ModalController>
+                    {({ showModal, hideModal }) => (
+                      <ExecScriptButton
+                        className="problem-action-button"
+                        onClick={() => {
+                          showModal(ExecScriptModal, {
+                            getScripts: this.getScripts,
+                            onSubmit: this.onExecuteScript,
+                            onDismiss: hideModal,
+                          });
+                        }}
+                      />
+                    )}
+                  </ModalController>
+                  <ModalController>
+                    {({ showModal, hideModal }) => (
+                      <AckButton
+                        className="problem-action-button"
+                        onClick={() => {
+                          showModal(AckModal, {
+                            canClose: problem.manual_close === '1',
+                            severity: problemSeverity,
+                            onSubmit: this.ackProblem,
+                            onDismiss: hideModal,
+                          });
+                        }}
+                      />
+                    )}
+                  </ModalController>
+                </div>
+              )}
+              <ProblemStatusBar problem={problem} alerts={alerts} className={compactStatusBar && 'compact'} />
             </div>
             <div className="problem-details-row">
               <div className="problem-value-container">
                 <div className="problem-age">
-                  <FAIcon icon="clock-o"/>
+                  <FAIcon icon="clock-o" />
                   <span>{age}</span>
                 </div>
-                {problem.items && <ProblemItems items={problem.items}/>}
+                {problem.items && <ProblemItems items={problem.items} />}
               </div>
             </div>
-            {problem.comments &&
-            <div className="problem-description-row">
-              <div className="problem-description">
-                <Tooltip placement="right" content={problem.comments}>
-                  <span className="description-label">Description:&nbsp;</span>
-                </Tooltip>
-                <span>{problem.comments}</span>
+            {problem.comments && (
+              <div className="problem-description-row">
+                <div className="problem-description">
+                  <Tooltip placement="right" content={problem.comments}>
+                    <span className="description-label">Description:&nbsp;</span>
+                  </Tooltip>
+                  <span>{problem.comments}</span>
+                </div>
+              </div>
+            )}
+            {problem.tags && problem.tags.length > 0 && (
+              <div className="problem-tags">
+                {problem.tags &&
+                  problem.tags.map((tag) => (
+                    <EventTag
+                      key={tag.tag + tag.value}
+                      tag={tag}
+                      datasource={problem.datasource}
+                      highlight={tag.tag === problem.correlation_tag}
+                      onClick={this.handleTagClick}
+                    />
+                  ))}
+              </div>
+            )}
+            {this.props.showTimeline && this.state.events.length > 0 && (
+              <ProblemTimeline events={this.state.events} timeRange={this.props.timeRange} />
+            )}
+            {showAcknowledges && !wideLayout && (
+              <div className="problem-ack-container">
+                <h6>
+                  <FAIcon icon="reply-all" /> Acknowledges
+                </h6>
+                <AcknowledgesList acknowledges={problem.acknowledges} />
+              </div>
+            )}
+          </div>
+          {showAcknowledges && wideLayout && (
+            <div className="problem-details-middle">
+              <div className="problem-ack-container">
+                <h6>
+                  <FAIcon icon="reply-all" /> Acknowledges
+                </h6>
+                <AcknowledgesList acknowledges={problem.acknowledges} />
               </div>
             </div>
-            }
-            {problem.tags && problem.tags.length > 0 &&
-            <div className="problem-tags">
-              {problem.tags && problem.tags.map(tag =>
-                <EventTag
-                  key={tag.tag + tag.value}
-                  tag={tag}
-                  datasource={problem.datasource}
-                  highlight={tag.tag === problem.correlation_tag}
-                  onClick={this.handleTagClick}
-                />)
-              }
-            </div>
-            }
-            {this.props.showTimeline && this.state.events.length > 0 &&
-            <ProblemTimeline events={this.state.events} timeRange={this.props.timeRange}/>
-            }
-            {showAcknowledges && !wideLayout &&
-            <div className="problem-ack-container">
-              <h6><FAIcon icon="reply-all"/> Acknowledges</h6>
-              <AcknowledgesList acknowledges={problem.acknowledges}/>
-            </div>
-            }
-          </div>
-          {showAcknowledges && wideLayout &&
-          <div className="problem-details-middle">
-            <div className="problem-ack-container">
-              <h6><FAIcon icon="reply-all"/> Acknowledges</h6>
-              <AcknowledgesList acknowledges={problem.acknowledges}/>
-            </div>
-          </div>
-          }
+          )}
           <div className="problem-details-right">
             <div className="problem-details-right-item">
-              <FAIcon icon="database"/>
+              <FAIcon icon="database" />
               <span>{dsName}</span>
             </div>
-            {problem.proxy &&
-            <div className="problem-details-right-item">
-              <FAIcon icon="cloud"/>
-              <span>{problem.proxy}</span>
-            </div>
-            }
-            {problem.groups && <ProblemGroups groups={problem.groups} className="problem-details-right-item"/>}
-            {problem.hosts && <ProblemHosts hosts={problem.hosts} className="problem-details-right-item"/>}
+            {problem.proxy && (
+              <div className="problem-details-right-item">
+                <FAIcon icon="cloud" />
+                <span>{problem.proxy}</span>
+              </div>
+            )}
+            {problem.groups && <ProblemGroups groups={problem.groups} className="problem-details-right-item" />}
+            {problem.hosts && <ProblemHosts hosts={problem.hosts} className="problem-details-right-item" />}
           </div>
         </div>
       </div>
@@ -232,11 +235,17 @@ interface ProblemItemProps {
 function ProblemItem(props: ProblemItemProps) {
   const { item, showName } = props;
   const itemName = utils.expandItemName(item.name, item.key_);
-  const tooltipContent = () => <>{itemName}<br/>{item.lastvalue}</>;
+  const tooltipContent = () => (
+    <>
+      {itemName}
+      <br />
+      {item.lastvalue}
+    </>
+  );
 
   return (
     <div className="problem-item">
-      <FAIcon icon="thermometer-three-quarters"/>
+      <FAIcon icon="thermometer-three-quarters" />
       {showName && <span className="problem-item-name">{item.name}: </span>}
       <Tooltip placement="top-start" content={tooltipContent}>
         <span className="problem-item-value">{item.lastvalue}</span>
@@ -252,10 +261,11 @@ interface ProblemItemsProps {
 const ProblemItems: FC<ProblemItemsProps> = ({ items }) => {
   return (
     <div className="problem-items-row">
-      {items.length > 1 ?
-        items.map(item => <ProblemItem item={item} key={item.itemid} showName={true}/>) :
-        <ProblemItem item={items[0]}/>
-      }
+      {items.length > 1 ? (
+        items.map((item) => <ProblemItem item={item} key={item.itemid} showName={true} />)
+      ) : (
+        <ProblemItem item={items[0]} />
+      )}
     </div>
   );
 };
@@ -267,9 +277,9 @@ interface ProblemGroupsProps {
 
 class ProblemGroups extends PureComponent<ProblemGroupsProps> {
   render() {
-    return this.props.groups.map(g => (
+    return this.props.groups.map((g) => (
       <div className={this.props.className || ''} key={g.groupid}>
-        <FAIcon icon="folder"/>
+        <FAIcon icon="folder" />
         <span>{g.name}</span>
       </div>
     ));
@@ -283,9 +293,9 @@ interface ProblemHostsProps {
 
 class ProblemHosts extends PureComponent<ProblemHostsProps> {
   render() {
-    return this.props.hosts.map(h => (
+    return this.props.hosts.map((h) => (
       <div className={this.props.className || ''} key={h.hostid}>
-        <FAIcon icon="server"/>
+        <FAIcon icon="server" />
         <span>{h.name}</span>
       </div>
     ));