Chore: Convert problems to functional component (#2125)

This is a prerequisite for ugrading the react-table to v8.
- No logic change is introduced. 
- Update DataSourceRef imports. The old import was deprecated.

src/panel-triggers/ProblemsPanel.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import _ from 'lodash';
-import { DataSourceRef, dateMath, PanelProps } from '@grafana/data';
+import { dateMath, PanelProps } from '@grafana/data';
+import { DataSourceRef } from '@grafana/schema';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { contextSrv } from 'grafana/app/core/core';
 import { ProblemsPanelOptions, RTResized } from './types';
 import { ZabbixMetricsQuery } from '../datasource/types/query';
 import { ProblemDTO, ZBXQueryUpdatedEvent, ZBXTag } from '../datasource/types';
 import { APIExecuteScriptResponse } from '../datasource/zabbix/connectors/zabbix_api/types';
-import ProblemList from './components/Problems/Problems';
+import { ProblemList } from './components/Problems/Problems';
 import { AckProblemData } from './components/AckModal';
 import AlertList from './components/AlertList/AlertList';
 

src/panel-triggers/components/AlertList/AlertCard.tsx

@@ -11,7 +11,7 @@ import AlertAcknowledges from './AlertAcknowledges';
 import AlertIcon from './AlertIcon';
 import { ProblemDTO, ZBXTag } from '../../../datasource/types';
 import { ModalController } from '../../../components';
-import { DataSourceRef } from '@grafana/data';
+import { DataSourceRef } from '@grafana/schema';
 import { Tooltip } from '@grafana/ui';
 import { getDataSourceSrv } from '@grafana/runtime';
 

src/panel-triggers/components/AlertList/AlertList.tsx

@@ -4,7 +4,7 @@ import { ProblemsPanelOptions } from '../../types';
 import { AckProblemData } from '../AckModal';
 import AlertCard from './AlertCard';
 import { ProblemDTO, ZBXTag } from '../../../datasource/types';
-import { DataSourceRef } from '@grafana/data';
+import { DataSourceRef } from '@grafana/schema';
 
 export interface AlertListProps {
   problems: ProblemDTO[];

src/panel-triggers/components/EventTag.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { css } from '@emotion/css';
 import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
-import { DataSourceRef, GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
+import { DataSourceRef } from '@grafana/schema';
 import { ZBXTag } from '../../datasource/types';
 
 const TAG_COLORS = [

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

@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { css } from '@emotion/css';
 // eslint-disable-next-line
 import moment from 'moment';
-import { TimeRange, DataSourceRef, GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2, TimeRange } from '@grafana/data';
+import { DataSourceRef } from '@grafana/schema';
 import { Tooltip, useStyles2 } from '@grafana/ui';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXTag } from '../../../datasource/types';

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, useRef, useState, useMemo } from 'react';
 import { cx } from '@emotion/css';
 import ReactTable from 'react-table-6';
 import _ from 'lodash';
@@ -13,7 +13,8 @@ import { ProblemsPanelOptions, RTCell, RTResized, TriggerSeverity } from '../../
 import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXTag } from '../../../datasource/types';
 import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource/zabbix/connectors/zabbix_api/types';
 import { AckCell } from './AckCell';
-import { DataSourceRef, TimeRange } from '@grafana/data';
+import { TimeRange } from '@grafana/data';
+import { DataSourceRef } from '@grafana/schema';
 import { reportInteraction } from '@grafana/runtime';
 
 export interface ProblemListProps {
@@ -35,93 +36,81 @@ export interface ProblemListProps {
   onColumnResize?: (newResized: RTResized) => void;
 }
 
-interface ProblemListState {
+export const ProblemList = (props: ProblemListProps) => {
-  expanded: any;
+  const {
-  expandedProblems: any;
+    pageSize,
-  page: number;
+    fontSize,
-}
+    problems,
+    panelOptions,
+    onProblemAck,
+    onPageSizeChange,
+    onColumnResize,
+    onTagClick,
+    loading,
+    timeRange,
+    panelId,
+    getProblemEvents,
+    getProblemAlerts,
+    getScripts,
+    onExecuteScript,
+  } = props;
 
-export default class ProblemList extends PureComponent<ProblemListProps, ProblemListState> {
+  const [expanded, setExpanded] = useState({});
-  rootWidth: number;
+  const [expandedProblems, setExpandedProblems] = useState({});
-  rootRef: any;
+  const [page, setPage] = useState(0);
+  const rootRef = useRef(null);
 
-  constructor(props: ProblemListProps) {
+  // Default pageSize to 10 if not provided
-    super(props);
+  const effectivePageSize = pageSize || 10;
-    this.rootWidth = 0;
-    this.state = {
-      expanded: {},
-      expandedProblems: {},
-      page: 0,
-    };
-  }
 
-  setRootRef = (ref: any) => {
+  const handleProblemAck = (problem: ProblemDTO, data: AckProblemData) => {
-    this.rootRef = ref;
+    return onProblemAck!(problem, data);
   };
 
-  handleProblemAck = (problem: ProblemDTO, data: AckProblemData) => {
+  const handlePageSizeChange = (pageSize, pageIndex) => {
-    return this.props.onProblemAck!(problem, data);
+    onPageSizeChange?.(pageSize, pageIndex);
   };
 
-  onExecuteScript = (problem: ProblemDTO, data: AckProblemData) => {};
+  const handleResizedChange = (newResized, event) => {
-
+    onColumnResize?.(newResized);
-  handlePageSizeChange = (pageSize, pageIndex) => {
-    if (this.props.onPageSizeChange) {
-      this.props.onPageSizeChange(pageSize, pageIndex);
-    }
   };
 
-  handleResizedChange = (newResized, event) => {
+  const handleExpandedChange = (expandedChange: any, event: any) => {
-    if (this.props.onColumnResize) {
-      this.props.onColumnResize(newResized);
-    }
-  };
-
-  handleExpandedChange = (expanded: any, event: any) => {
     reportInteraction('grafana_zabbix_panel_row_expanded', {});
+    const newExpandedProblems = {};
 
-    const { problems, pageSize } = this.props;
+    for (const row in expandedChange) {
-    const { page } = this.state;
-    const expandedProblems = {};
-
-    for (const row in expanded) {
       const rowId = Number(row);
-      const problemIndex = pageSize * page + rowId;
+      const problemIndex = effectivePageSize * page + rowId;
-      if (expanded[row] && problemIndex < problems.length) {
+      if (expandedChange[row] && problemIndex < problems.length) {
         const expandedProblem = problems[problemIndex].eventid;
         if (expandedProblem) {
-          expandedProblems[expandedProblem] = true;
+          newExpandedProblems[expandedProblem] = true;
         }
       }
     }
 
-    const nextExpanded = { ...this.state.expanded };
+    const nextExpanded = { ...expanded };
-    nextExpanded[page] = expanded;
+    nextExpanded[page] = expandedChange;
 
-    const nextExpandedProblems = { ...this.state.expandedProblems };
+    const nextExpandedProblems = { ...expandedProblems };
-    nextExpandedProblems[page] = expandedProblems;
+    nextExpandedProblems[page] = newExpandedProblems;
 
-    this.setState({
+    setExpanded(nextExpanded);
-      expanded: nextExpanded,
+    setExpandedProblems(nextExpandedProblems);
-      expandedProblems: nextExpandedProblems,
-    });
   };
 
-  handleTagClick = (tag: ZBXTag, datasource: DataSourceRef, ctrlKey?: boolean, shiftKey?: boolean) => {
+  const handleTagClick = (tag: ZBXTag, datasource: DataSourceRef, ctrlKey?: boolean, shiftKey?: boolean) => {
-    if (this.props.onTagClick) {
+    onTagClick?.(tag, datasource, ctrlKey, shiftKey);
-      this.props.onTagClick(tag, datasource, ctrlKey, shiftKey);
-    }
   };
 
-  getExpandedPage = (page: number) => {
+  const getExpandedPage = (page: number) => {
-    const { problems, pageSize } = this.props;
-    const { expandedProblems } = this.state;
     const expandedProblemsPage = expandedProblems[page] || {};
     const expandedPage = {};
 
     // Go through the page and search for expanded problems
-    const startIndex = pageSize * page;
+    const startIndex = effectivePageSize * page;
-    const endIndex = Math.min(startIndex + pageSize, problems.length);
+    const endIndex = Math.min(startIndex + effectivePageSize, problems.length);
     for (let i = startIndex; i < endIndex; i++) {
       const problem = problems[i];
       if (expandedProblemsPage[problem.eventid]) {
@@ -132,10 +121,9 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
     return expandedPage;
   };
 
-  buildColumns() {
+  const columns = useMemo(() => {
     const result = [];
-    const options = this.props.panelOptions;
+    const highlightNewerThan = panelOptions.highlightNewEvents && panelOptions.highlightNewerThan;
-    const highlightNewerThan = options.highlightNewEvents && options.highlightNewerThan;
     const statusCell = (props) => StatusCell(props, highlightNewerThan);
     const statusIconCell = (props) => StatusIconCell(props, highlightNewerThan);
     const hostNameCell = (props) => (
@@ -145,14 +133,19 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
       <HostCell name={props.original.hostTechName} maintenance={props.original.hostInMaintenance} />
     );
 
-    const columns = [
+    const allColumns = [
-      { Header: 'Host', id: 'host', show: options.hostField, Cell: hostNameCell },
+      { Header: 'Host', id: 'host', show: panelOptions.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: 'Host (Technical Name)',
-      { Header: 'Proxy', accessor: 'proxy', show: options.hostProxy },
+        id: 'hostTechName',
+        show: panelOptions.hostTechNameField,
+        Cell: hostTechNameCell,
+      },
+      { Header: 'Host Groups', accessor: 'groups', show: panelOptions.hostGroups, Cell: GroupCell },
+      { Header: 'Proxy', accessor: 'proxy', show: panelOptions.hostProxy },
       {
         Header: 'Severity',
-        show: options.severityField,
+        show: panelOptions.severityField,
         className: 'problem-severity',
         width: 120,
         accessor: (problem) => problem.priority,
@@ -160,43 +153,43 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
         Cell: (props) =>
           SeverityCell(
             props,
-            options.triggerSeverity,
+            panelOptions.triggerSeverity,
-            options.markAckEvents,
+            panelOptions.markAckEvents,
-            options.ackEventColor,
+            panelOptions.ackEventColor,
-            options.okEventColor
+            panelOptions.okEventColor
           ),
       },
       {
         Header: '',
         id: 'statusIcon',
-        show: options.statusIcon,
+        show: panelOptions.statusIcon,
         className: 'problem-status-icon',
         width: 50,
         accessor: 'value',
         Cell: statusIconCell,
       },
-      { Header: 'Status', accessor: 'value', show: options.statusField, width: 100, Cell: statusCell },
+      { Header: 'Status', accessor: 'value', show: panelOptions.statusField, width: 100, Cell: statusCell },
       { Header: 'Problem', accessor: 'name', minWidth: 200, Cell: ProblemCell },
-      { Header: 'Operational data', accessor: 'opdata', show: options.opdataField, width: 150, Cell: OpdataCell },
+      { Header: 'Operational data', accessor: 'opdata', show: panelOptions.opdataField, width: 150, Cell: OpdataCell },
       {
         Header: 'Ack',
         id: 'ack',
-        show: options.ackField,
+        show: panelOptions.ackField,
         width: 70,
         Cell: (props) => <AckCell {...props} />,
       },
       {
         Header: 'Tags',
         accessor: 'tags',
-        show: options.showTags,
+        show: panelOptions.showTags,
         className: 'problem-tags',
-        Cell: (props) => <TagCell {...props} onTagClick={this.handleTagClick} />,
+        Cell: (props) => <TagCell {...props} onTagClick={handleTagClick} />,
       },
       {
         Header: 'Age',
         className: 'problem-age',
         width: 100,
-        show: options.ageField,
+        show: panelOptions.ageField,
         accessor: 'timestamp',
         id: 'age',
         Cell: AgeCell,
@@ -207,75 +200,72 @@ export default class ProblemList extends PureComponent<ProblemListProps, Problem
         width: 150,
         accessor: 'timestamp',
         id: 'lastchange',
-        Cell: (props) => LastChangeCell(props, options.customLastChangeFormat && options.lastChangeFormat),
+        Cell: (props) => LastChangeCell(props, panelOptions.customLastChangeFormat && panelOptions.lastChangeFormat),
       },
       { Header: '', className: 'custom-expander', width: 60, expander: true, Expander: CustomExpander },
     ];
-    for (const column of columns) {
+    for (const column of allColumns) {
       if (column.show || column.show === undefined) {
         delete column.show;
         result.push(column);
       }
     }
     return result;
-  }
+  }, [panelOptions, handleTagClick]);
 
-  render() {
+  const pageSizeOptions = useMemo(() => {
-    const columns = this.buildColumns();
+    let options = [5, 10, 20, 25, 50, 100];
-    this.rootWidth = this.rootRef && this.rootRef.clientWidth;
-    const { pageSize, fontSize, panelOptions } = this.props;
-    const panelClass = cx('panel-problems', { [`font-size--${fontSize}`]: !!fontSize });
-    let pageSizeOptions = [5, 10, 20, 25, 50, 100];
     if (pageSize) {
-      pageSizeOptions.push(pageSize);
+      options.push(pageSize);
-      pageSizeOptions = _.uniq(_.sortBy(pageSizeOptions));
+      options = _.uniq(_.sortBy(options));
     }
+    return options;
+  }, [pageSize]);
 
   return (
-      <div className={panelClass} ref={this.setRootRef}>
+    <div className={cx('panel-problems', { [`font-size--${fontSize}`]: !!fontSize })} ref={rootRef}>
       <ReactTable
-          data={this.props.problems}
+        data={problems}
         columns={columns}
         defaultPageSize={10}
-          pageSize={pageSize}
+        pageSize={effectivePageSize}
         pageSizeOptions={pageSizeOptions}
         resized={panelOptions.resizedColumns}
         minRows={0}
-          loading={this.props.loading}
+        loading={loading}
         noDataText="No problems found"
         SubComponent={(props) => (
           <ProblemDetails
             {...props}
-              rootWidth={this.rootWidth}
+            rootWidth={rootRef?.current?.clientWidth || 0}
-              timeRange={this.props.timeRange}
+            timeRange={timeRange}
             showTimeline={panelOptions.problemTimeline}
             allowDangerousHTML={panelOptions.allowDangerousHTML}
-              panelId={this.props.panelId}
+            panelId={panelId}
-              getProblemEvents={this.props.getProblemEvents}
+            getProblemEvents={getProblemEvents}
-              getProblemAlerts={this.props.getProblemAlerts}
+            getProblemAlerts={getProblemAlerts}
-              getScripts={this.props.getScripts}
+            getScripts={getScripts}
-              onProblemAck={this.handleProblemAck}
+            onProblemAck={handleProblemAck}
-              onExecuteScript={this.props.onExecuteScript}
+            onExecuteScript={onExecuteScript}
-              onTagClick={this.handleTagClick}
+            onTagClick={handleTagClick}
             subRows={false}
           />
         )}
-          expanded={this.getExpandedPage(this.state.page)}
+        expanded={getExpandedPage(page)}
-          onExpandedChange={this.handleExpandedChange}
+        onExpandedChange={handleExpandedChange}
-          onPageChange={(page) => {
+        onPageChange={(newPage) => {
           reportInteraction('grafana_zabbix_panel_page_change', {
-              action: page > this.state.page ? 'next' : 'prev',
+            action: newPage > page ? 'next' : 'prev',
           });
 
-            this.setState({ page });
+          setPage(newPage);
         }}
-          onPageSizeChange={this.handlePageSizeChange}
+        onPageSizeChange={handlePageSizeChange}
-          onResizedChange={this.handleResizedChange}
+        onResizedChange={handleResizedChange}
       />
     </div>
   );
-  }
+};
-}
 
 interface HostCellProps {
   name: string;