React UI: More conversions to Function Components (#6259)

* React UI: More conversions to Function Components

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Address chat feedback over Riot

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/react-app/src/DataTable.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent, ReactNode } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 import { Alert, Table } from 'reactstrap';
 
@@ -41,19 +41,16 @@ interface Metric {
 
 type SampleValue = [number, string];
 
-class DataTable extends PureComponent<QueryResult> {
-  limitSeries(series: InstantSample[] | RangeSamples[]): InstantSample[] | RangeSamples[] {
+const limitSeries = <S extends InstantSample | RangeSamples>(series: S[]): S[] => {
   const maxSeries = 10000;
 
   if (series.length > maxSeries) {
     return series.slice(0, maxSeries);
   }
   return series;
-  }
-
-  render() {
-    const data = this.props.data;
+};
 
+const DataTable: FC<QueryResult> = ({ data }) => {
   if (data === null) {
     return <Alert color="light">No data queried yet</Alert>;
   }
@@ -66,7 +63,7 @@ class DataTable extends PureComponent<QueryResult> {
   let limited = false;
   switch (data.resultType) {
     case 'vector':
-        rows = (this.limitSeries(data.result) as InstantSample[]).map(
+      rows = (limitSeries(data.result) as InstantSample[]).map(
         (s: InstantSample, index: number): ReactNode => {
           return (
             <tr key={index}>
@@ -81,7 +78,7 @@ class DataTable extends PureComponent<QueryResult> {
       limited = rows.length !== data.result.length;
       break;
     case 'matrix':
-        rows = (this.limitSeries(data.result) as RangeSamples[]).map((s, index) => {
+      rows = (limitSeries(data.result) as RangeSamples[]).map((s, index) => {
         const valueText = s.values
           .map(v => {
             return [1] + ' @' + v[0];
@@ -130,7 +127,6 @@ class DataTable extends PureComponent<QueryResult> {
       </Table>
     </>
   );
-  }
-}
+};
 
 export default DataTable;

web/ui/react-app/src/Legend.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { FC } from 'react';
 
 import SeriesName from './SeriesName';
 
@@ -6,9 +6,11 @@ interface LegendProps {
   series: any; // TODO: Type this.
 }
 
-class Legend extends PureComponent<LegendProps> {
-  renderLegendItem(s: any) {
+const Legend: FC<LegendProps> = ({ series }) => {
   return (
+    <table className="graph-legend">
+      <tbody>
+        {series.map((s: any) => (
           <tr key={s.index} className="legend-item">
             <td>
               <div className="legend-swatch" style={{ backgroundColor: s.color }}></div>
@@ -17,20 +19,10 @@ class Legend extends PureComponent<LegendProps> {
               <SeriesName labels={s.labels} format={true} />
             </td>
           </tr>
-    );
-  }
-
-  render() {
-    return (
-      <table className="graph-legend">
-        <tbody>
-          {this.props.series.map((s: any) => {
-            return this.renderLegendItem(s);
-          })}
+        ))}
       </tbody>
     </table>
   );
-  }
-}
+};
 
 export default Legend;

web/ui/react-app/src/SeriesName.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { FC } from 'react';
 import metricToSeriesName from './MetricFormat';
 
 interface SeriesNameProps {
@@ -6,11 +6,9 @@ interface SeriesNameProps {
   format: boolean;
 }
 
-class SeriesName extends PureComponent<SeriesNameProps> {
-  renderFormatted(): React.ReactNode {
-    const labels = this.props.labels!;
-
-    const labelNodes: React.ReactNode[] = [];
+const SeriesName: FC<SeriesNameProps> = ({ labels, format }) => {
+  const renderFormatted = (): React.ReactElement => {
+    const labelNodes: React.ReactElement[] = [];
     let first = true;
     for (const label in labels) {
       if (label === '__name__') {
@@ -31,31 +29,24 @@ class SeriesName extends PureComponent<SeriesNameProps> {
 
     return (
       <>
-        <span className="legend-metric-name">{labels.__name__ || ''}</span>
+        <span className="legend-metric-name">{labels!.__name__ || ''}</span>
         <span className="legend-label-brace">{'{'}</span>
         {labelNodes}
         <span className="legend-label-brace">{'}'}</span>
       </>
     );
+  };
+
+  if (labels === null) {
+    return <>scalar</>;
   }
 
-  renderPlain() {
-    const labels = this.props.labels!;
-    return metricToSeriesName(labels);
-  }
-
-  render() {
-    if (this.props.labels === null) {
-      return 'scalar';
-    }
-
-    if (this.props.format) {
-      return this.renderFormatted();
+  if (format) {
+    return renderFormatted();
   }
   // Return a simple text node. This is much faster to scroll through
   // for longer lists (hundreds of items).
-    return this.renderPlain();
-  }
-}
+  return <>{metricToSeriesName(labels!)}</>;
+};
 
 export default SeriesName;