Unify react fetcher components (#6629)

* set useFetch loading flag to be true initially

Signed-off-by: blalov <boiskila@gmail.com>

* make extended props optional

Signed-off-by: blalov <boiskila@gmail.com>

* add status indicator to targets page

Signed-off-by: blalov <boiskila@gmail.com>

* add status indicator to tsdb status page

Signed-off-by: blalov <boiskila@gmail.com>

* spread response in Alerts

Signed-off-by: blalov <boiskila@gmail.com>

* disable eslint func retun type rule

Signed-off-by: blalov <boiskila@gmail.com>

* add status indicator to Service Discovery page

Signed-off-by: blalov <boiskila@gmail.com>

* refactor PanelList

Signed-off-by: blalov <boiskila@gmail.com>

* test fix

Signed-off-by: blalov <boiskila@gmail.com>

* use local storage hook in PanelList

Signed-off-by: blalov <boiskila@gmail.com>

* use 'useFetch' for fetching metrics

Signed-off-by: blalov <boiskila@gmail.com>

* left-overs

Signed-off-by: blalov <boiskila@gmail.com>

* remove targets page custom error message

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* adding components displayName

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* display more user friendly error messages

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* update status page snapshot

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* pr review changes

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* fix broken tests

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* fix typos

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

web/ui/react-app/.eslintrc.json

@@ -7,6 +7,7 @@
   ],
   "rules": {
     "@typescript-eslint/camelcase": "warn",
+    "@typescript-eslint/explicit-function-return-type": ["off"],
     "eol-last": [
       "error",
       "always"

web/ui/react-app/src/App.test.tsx

@@ -4,7 +4,7 @@ import App from './App';
 import Navigation from './Navbar';
 import { Container } from 'reactstrap';
 import { Router } from '@reach/router';
-import { Alerts, Config, Flags, Rules, Services, Status, Targets, TSDBStatus, PanelList } from './pages';
+import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList } from './pages';
 
 describe('App', () => {
   const app = shallow(<App pathPrefix="/path/prefix" />);
@@ -13,7 +13,7 @@ describe('App', () => {
     expect(app.find(Navigation)).toHaveLength(1);
   });
   it('routes', () => {
-    [Alerts, Config, Flags, Rules, Services, Status, Targets, TSDBStatus, PanelList].forEach(component => {
+    [Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList].forEach(component => {
       const c = app.find(component);
       expect(c).toHaveLength(1);
       expect(c.prop('pathPrefix')).toBe('/path/prefix');

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

@@ -4,7 +4,7 @@ import { Container } from 'reactstrap';
 
 import './App.css';
 import { Router, Redirect } from '@reach/router';
-import { Alerts, Config, Flags, Rules, Services, Status, Targets, TSDBStatus, PanelList } from './pages';
+import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList } from './pages';
 import PathPrefixProps from './types/PathPrefixProps';
 
 const App: FC<PathPrefixProps> = ({ pathPrefix }) => {
@@ -24,7 +24,7 @@ const App: FC<PathPrefixProps> = ({ pathPrefix }) => {
           <Config path="/config" pathPrefix={pathPrefix} />
           <Flags path="/flags" pathPrefix={pathPrefix} />
           <Rules path="/rules" pathPrefix={pathPrefix} />
-          <Services path="/service-discovery" pathPrefix={pathPrefix} />
+          <ServiceDiscovery path="/service-discovery" pathPrefix={pathPrefix} />
           <Status path="/status" pathPrefix={pathPrefix} />
           <TSDBStatus path="/tsdb-status" pathPrefix={pathPrefix} />
           <Targets path="/targets" pathPrefix={pathPrefix} />

web/ui/react-app/src/components/withStatusIndicator.tsx

@@ -7,12 +7,14 @@ interface StatusIndicatorProps {
   error?: Error;
   isLoading?: boolean;
   customErrorMsg?: JSX.Element;
+  componentTitle?: string;
 }
 
 export const withStatusIndicator = <T extends {}>(Component: ComponentType<T>): FC<StatusIndicatorProps & T> => ({
   error,
   isLoading,
   customErrorMsg,
+  componentTitle,
   ...rest
 }) => {
   if (error) {
@@ -22,7 +24,7 @@ export const withStatusIndicator = <T extends {}>(Component: ComponentType<T>):
           customErrorMsg
         ) : (
           <>
-            <strong>Error:</strong> Error fetching {Component.displayName}: {error.message}
+            <strong>Error:</strong> Error fetching {componentTitle || Component.displayName}: {error.message}
           </>
         )}
       </Alert>

web/ui/react-app/src/hooks/useFetch.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-export type APIResponse<T> = { status: string; data?: T };
+export type APIResponse<T> = { status: string; data: T };
 
 export interface FetchState<T> {
   response: APIResponse<T>;
@@ -9,15 +9,15 @@ export interface FetchState<T> {
 }
 
 export const useFetch = <T extends {}>(url: string, options?: RequestInit): FetchState<T> => {
-  const [response, setResponse] = useState<APIResponse<T>>({ status: 'start fetching' });
+  const [response, setResponse] = useState<APIResponse<T>>({ status: 'start fetching' } as any);
   const [error, setError] = useState<Error>();
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
-        const res = await fetch(url, { cache: 'no-cache', credentials: 'same-origin', ...options });
+        const res = await fetch(url, { cache: 'no-store', credentials: 'same-origin', ...options });
         if (!res.ok) {
           throw new Error(res.statusText);
         }

web/ui/react-app/src/hooks/useLocalStorage.tsx

@@ -1,8 +1,8 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 export function useLocalStorage<S>(localStorageKey: string, initialState: S): [S, Dispatch<SetStateAction<S>>] {
-  const localStorageState = JSON.parse(localStorage.getItem(localStorageKey) as string);
+  const localStorageState = JSON.parse(localStorage.getItem(localStorageKey) || JSON.stringify(initialState));
-  const [value, setValue] = useState(localStorageState || initialState);
+  const [value, setValue] = useState(localStorageState);
 
   useEffect(() => {
     const serializedState = JSON.stringify(value);

web/ui/react-app/src/pages/alerts/Alerts.tsx

@@ -20,14 +20,7 @@ const Alerts: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = '' })
     response.data.groups.forEach(el => el.rules.forEach(r => ruleStatsCount[r.state]++));
   }
 
-  return (
+  return <AlertsWithStatusIndicator statsCount={ruleStatsCount} {...response.data} error={error} isLoading={isLoading} />;
-    <AlertsWithStatusIndicator
-      statsCount={ruleStatsCount}
-      groups={response.data && response.data.groups}
-      error={error}
-      isLoading={isLoading}
-    />
-  );
 };
 
 export default Alerts;

web/ui/react-app/src/pages/graph/PanelList.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { mount, shallow } from 'enzyme';
+import { shallow } from 'enzyme';
-import PanelList from './PanelList';
+import PanelList, { PanelListContent } from './PanelList';
 import Checkbox from '../../components/Checkbox';
-import { Alert, Button } from 'reactstrap';
+import { Button } from 'reactstrap';
 import Panel from './Panel';
 
 describe('PanelList', () => {
@@ -14,31 +14,20 @@ describe('PanelList', () => {
       const panelList = shallow(<PanelList />);
       const checkbox = panelList.find(Checkbox).at(idx);
       expect(checkbox.prop('id')).toEqual(cb.id);
-      expect(checkbox.prop('wrapperStyles')).toEqual({
-        margin: '0 0 0 15px',
-        alignSelf: 'center',
-      });
       expect(checkbox.prop('defaultChecked')).toBe(false);
       expect(checkbox.children().text()).toBe(cb.label);
     });
   });
 
-  it('renders an alert when no data is queried yet', () => {
-    const panelList = mount(<PanelList />);
-    const alert = panelList.find(Alert);
-    expect(alert.prop('color')).toEqual('light');
-    expect(alert.children().text()).toEqual('No data queried yet');
-  });
-
   it('renders panels', () => {
-    const panelList = shallow(<PanelList />);
+    const panelList = shallow(<PanelListContent {...({ panels: [{}] } as any)} />);
     const panels = panelList.find(Panel);
     expect(panels.length).toBeGreaterThan(0);
   });
 
   it('renders a button to add a panel', () => {
-    const panelList = shallow(<PanelList />);
+    const panelList = shallow(<PanelListContent {...({ panels: [] } as any)} />);
-    const btn = panelList.find(Button).filterWhere(btn => btn.prop('className') === 'add-panel-btn');
+    const btn = panelList.find(Button);
     expect(btn.prop('color')).toEqual('primary');
     expect(btn.children().text()).toEqual('Add Panel');
   });

web/ui/react-app/src/pages/graph/PanelList.tsx

@@ -1,219 +1,170 @@
-import React, { Component, ChangeEvent } from 'react';
+import React, { FC, useState, useEffect } from 'react';
 import { RouteComponentProps } from '@reach/router';
-
+import { Alert, Button } from 'reactstrap';
-import { Alert, Button, Col, Row } from 'reactstrap';
 
 import Panel, { PanelOptions, PanelDefaultOptions } from './Panel';
 import Checkbox from '../../components/Checkbox';
 import PathPrefixProps from '../../types/PathPrefixProps';
-import { generateID, decodePanelOptionsFromQueryString, encodePanelOptionsToQueryString } from '../../utils';
+import { generateID, decodePanelOptionsFromQueryString, encodePanelOptionsToQueryString, callAll } from '../../utils';
+import { useFetch } from '../../hooks/useFetch';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
 
-export type MetricGroup = { title: string; items: string[] };
 export type PanelMeta = { key: string; options: PanelOptions; id: string };
 
-interface PanelListState {
+export const updateURL = (nextPanels: PanelMeta[]) => {
-  panels: PanelMeta[];
+  const query = encodePanelOptionsToQueryString(nextPanels);
-  pastQueries: string[];
+  window.history.pushState({}, '', query);
-  metricNames: string[];
-  fetchMetricsError: string | null;
-  timeDriftError: string | null;
-  useLocalTime: boolean;
-}
-
-class PanelList extends Component<RouteComponentProps & PathPrefixProps, PanelListState> {
-  constructor(props: RouteComponentProps & PathPrefixProps) {
-    super(props);
-
-    this.state = {
-      panels: decodePanelOptionsFromQueryString(window.location.search),
-      pastQueries: [],
-      metricNames: [],
-      fetchMetricsError: null,
-      timeDriftError: null,
-      useLocalTime: this.useLocalTime(),
 };
+
+interface PanelListProps extends PathPrefixProps, RouteComponentProps {
+  panels: PanelMeta[];
+  metrics: string[];
+  useLocalTime: boolean;
+  queryHistoryEnabled: boolean;
 }
 
-  componentDidMount() {
+export const PanelListContent: FC<PanelListProps> = ({
-    !this.state.panels.length && this.addPanel();
+  metrics = [],
-    fetch(`${this.props.pathPrefix}/api/v1/label/__name__/values`, { cache: 'no-store', credentials: 'same-origin' })
+  useLocalTime,
-      .then(resp => {
+  pathPrefix,
-        if (resp.ok) {
+  queryHistoryEnabled,
-          return resp.json();
+  ...rest
-        } else {
+}) => {
-          throw new Error('Unexpected response status when fetching metric names: ' + resp.statusText); // TODO extract error
+  const [panels, setPanels] = useState(rest.panels);
-        }
+  const [historyItems, setLocalStorageHistoryItems] = useLocalStorage<string[]>('history', []);
-      })
-      .then(json => {
-        this.setState({ metricNames: json.data });
-      })
-      .catch(error => this.setState({ fetchMetricsError: error.message }));
-
-    const browserTime = new Date().getTime() / 1000;
-    fetch(`${this.props.pathPrefix}/api/v1/query?query=time()`, { cache: 'no-store', credentials: 'same-origin' })
-      .then(resp => {
-        if (resp.ok) {
-          return resp.json();
-        } else {
-          throw new Error('Unexpected response status when fetching metric names: ' + resp.statusText); // TODO extract error
-        }
-      })
-      .then(json => {
-        const serverTime = json.data.result[0];
-        const delta = Math.abs(browserTime - serverTime);
-
-        if (delta >= 30) {
-          throw new Error(
-            'Detected ' +
-              delta +
-              ' seconds time difference between your browser and the server. Prometheus relies on accurate time and time drift might cause unexpected query results.'
-          );
-        }
-      })
-      .catch(error => this.setState({ timeDriftError: error.message }));
 
+  useEffect(() => {
+    !panels.length && addPanel();
     window.onpopstate = () => {
       const panels = decodePanelOptionsFromQueryString(window.location.search);
       if (panels.length > 0) {
-        this.setState({ panels });
+        setPanels(panels);
       }
     };
+    // We want useEffect to act only as componentDidMount, but react still complains about the empty dependencies list.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    this.updatePastQueries();
+  const handleExecuteQuery = (query: string) => {
-  }
+    const isSimpleMetric = metrics.indexOf(query) !== -1;
-
-  isHistoryEnabled = () => JSON.parse(localStorage.getItem('enable-query-history') || 'false') as boolean;
-
-  getHistoryItems = () => JSON.parse(localStorage.getItem('history') || '[]') as string[];
-
-  toggleQueryHistory = (e: ChangeEvent<HTMLInputElement>) => {
-    localStorage.setItem('enable-query-history', `${e.target.checked}`);
-    this.updatePastQueries();
-  };
-
-  updatePastQueries = () => {
-    this.setState({
-      pastQueries: this.isHistoryEnabled() ? this.getHistoryItems() : [],
-    });
-  };
-
-  useLocalTime = () => JSON.parse(localStorage.getItem('use-local-time') || 'false') as boolean;
-
-  toggleUseLocalTime = (e: ChangeEvent<HTMLInputElement>) => {
-    localStorage.setItem('use-local-time', `${e.target.checked}`);
-    this.setState({ useLocalTime: e.target.checked });
-  };
-
-  handleExecuteQuery = (query: string) => {
-    const isSimpleMetric = this.state.metricNames.indexOf(query) !== -1;
     if (isSimpleMetric || !query.length) {
       return;
     }
-    const historyItems = this.getHistoryItems();
     const extendedItems = historyItems.reduce(
       (acc, metric) => {
         return metric === query ? acc : [...acc, metric]; // Prevent adding query twice.
       },
       [query]
     );
-    localStorage.setItem('history', JSON.stringify(extendedItems.slice(0, 50)));
+    setLocalStorageHistoryItems(extendedItems.slice(0, 50));
-    this.updatePastQueries();
   };
 
-  updateURL() {
+  const addPanel = () => {
-    const query = encodePanelOptionsToQueryString(this.state.panels);
+    callAll(setPanels, updateURL)([
-    window.history.pushState({}, '', query);
-  }
-
-  handleOptionsChanged = (id: string, options: PanelOptions) => {
-    const updatedPanels = this.state.panels.map(p => (id === p.id ? { ...p, options } : p));
-    this.setState({ panels: updatedPanels }, this.updateURL);
-  };
-
-  addPanel = () => {
-    const { panels } = this.state;
-    const nextPanels = [
       ...panels,
       {
         id: generateID(),
         key: `${panels.length}`,
         options: PanelDefaultOptions,
       },
-    ];
+    ]);
-    this.setState({ panels: nextPanels }, this.updateURL);
   };
 
-  removePanel = (id: string) => {
-    this.setState(
-      {
-        panels: this.state.panels.reduce<PanelMeta[]>((acc, panel) => {
-          return panel.id !== id ? [...acc, { ...panel, key: `${acc.length}` }] : acc;
-        }, []),
-      },
-      this.updateURL
-    );
-  };
-
-  render() {
-    const { metricNames, pastQueries, timeDriftError, fetchMetricsError, panels } = this.state;
-    const { pathPrefix } = this.props;
   return (
     <>
-        <Row className="mb-2">
-          <Checkbox
-            id="query-history-checkbox"
-            wrapperStyles={{ margin: '0 0 0 15px', alignSelf: 'center' }}
-            onChange={this.toggleQueryHistory}
-            defaultChecked={this.isHistoryEnabled()}
-          >
-            Enable query history
-          </Checkbox>
-          <Checkbox
-            id="use-local-time-checkbox"
-            wrapperStyles={{ margin: '0 0 0 15px', alignSelf: 'center' }}
-            onChange={this.toggleUseLocalTime}
-            defaultChecked={this.useLocalTime()}
-          >
-            Use local time
-          </Checkbox>
-        </Row>
-        <Row>
-          <Col>
-            {timeDriftError && (
-              <Alert color="danger">
-                <strong>Warning:</strong> Error fetching server time: {timeDriftError}
-              </Alert>
-            )}
-          </Col>
-        </Row>
-        <Row>
-          <Col>
-            {fetchMetricsError && (
-              <Alert color="danger">
-                <strong>Warning:</strong> Error fetching metrics list: {fetchMetricsError}
-              </Alert>
-            )}
-          </Col>
-        </Row>
       {panels.map(({ id, options }) => (
         <Panel
-            onExecuteQuery={this.handleExecuteQuery}
+          onExecuteQuery={handleExecuteQuery}
           key={id}
           options={options}
-            onOptionsChanged={opts => this.handleOptionsChanged(id, opts)}
+          onOptionsChanged={opts =>
-            useLocalTime={this.state.useLocalTime}
+            callAll(setPanels, updateURL)(panels.map(p => (id === p.id ? { ...p, options: opts } : p)))
-            removePanel={() => this.removePanel(id)}
+          }
-            metricNames={metricNames}
+          removePanel={() =>
-            pastQueries={pastQueries}
+            callAll(setPanels, updateURL)(
+              panels.reduce<PanelMeta[]>(
+                (acc, panel) => (panel.id !== id ? [...acc, { ...panel, key: `${acc.length}` }] : acc),
+                []
+              )
+            )
+          }
+          useLocalTime={useLocalTime}
+          metricNames={metrics}
+          pastQueries={queryHistoryEnabled ? historyItems : []}
           pathPrefix={pathPrefix}
         />
       ))}
-        <Button color="primary" className="add-panel-btn" onClick={this.addPanel}>
+      <Button className="mb-3" color="primary" onClick={addPanel}>
         Add Panel
       </Button>
     </>
   );
+};
+
+const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = '' }) => {
+  const [delta, setDelta] = useState(0);
+  const [useLocalTime, setUseLocalTime] = useLocalStorage('use-local-time', false);
+  const [enableQueryHistory, setEnableQueryHistory] = useLocalStorage('enable-query-history', false);
+
+  const { response: metricsRes, error: metricsErr } = useFetch<string[]>(`${pathPrefix}/api/v1/label/__name__/values`);
+
+  const browserTime = new Date().getTime() / 1000;
+  const { response: timeRes, error: timeErr } = useFetch<{ result: number[] }>(`${pathPrefix}/api/v1/query?query=time()`);
+
+  useEffect(() => {
+    if (timeRes.data) {
+      const serverTime = timeRes.data.result[0];
+      setDelta(Math.abs(browserTime - serverTime));
     }
-}
+    /**
+     * React wants to include browserTime to useEffect dependencie list which will cause a delta change on every re-render
+     * Basically it's not recommended to disable this rule, but this is the only way to take control over the useEffect
+     * dependencies and to not include the browserTime variable.
+     **/
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeRes.data]);
+
+  return (
+    <>
+      <Checkbox
+        wrapperStyles={{ marginLeft: 3, display: 'inline-block' }}
+        id="query-history-checkbox"
+        onChange={({ target }) => setEnableQueryHistory(target.checked)}
+        defaultChecked={enableQueryHistory}
+      >
+        Enable query history
+      </Checkbox>
+      <Checkbox
+        wrapperStyles={{ marginLeft: 20, display: 'inline-block' }}
+        id="use-local-time-checkbox"
+        onChange={({ target }) => setUseLocalTime(target.checked)}
+        defaultChecked={useLocalTime}
+      >
+        Use local time
+      </Checkbox>
+      {(delta > 30 || timeErr) && (
+        <Alert color="danger">
+          <strong>Warning: </strong>
+          {timeErr && `Unexpected response status when fetching server time: ${timeErr.message}`}
+          {delta >= 30 &&
+            `Error fetching server time: Detected ${delta} seconds time difference between your browser and the server. Prometheus relies on accurate time and time drift might cause unexpected query results.`}
+        </Alert>
+      )}
+      {metricsErr && (
+        <Alert color="danger">
+          <strong>Warning: </strong>
+          Error fetching metrics list: Unexpected response status when fetching metric names: {metricsErr.message}
+        </Alert>
+      )}
+      <PanelListContent
+        panels={decodePanelOptionsFromQueryString(window.location.search)}
+        pathPrefix={pathPrefix}
+        useLocalTime={useLocalTime}
+        metrics={metricsRes.data}
+        queryHistoryEnabled={enableQueryHistory}
+      />
+    </>
+  );
+};
 
 export default PanelList;

web/ui/react-app/src/pages/index.ts

@@ -2,10 +2,10 @@ import Alerts from './alerts/Alerts';
 import Config from './config/Config';
 import Flags from './flags/Flags';
 import Rules from './rules/Rules';
-import Services from './serviceDiscovery/Services';
+import ServiceDiscovery from './serviceDiscovery/Services';
 import Status from './status/Status';
 import Targets from './targets/Targets';
 import PanelList from './graph/PanelList';
 import TSDBStatus from './tsdbStatus/TSDBStatus';
 
-export { Alerts, Config, Flags, Rules, Services, Status, Targets, TSDBStatus, PanelList };
+export { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList };

web/ui/react-app/src/pages/serviceDiscovery/Services.tsx

@@ -1,14 +1,13 @@
 import React, { FC } from 'react';
 import { RouteComponentProps } from '@reach/router';
 import PathPrefixProps from '../../types/PathPrefixProps';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { Alert } from 'reactstrap';
 import { useFetch } from '../../hooks/useFetch';
 import { LabelsTable } from './LabelsTable';
 import { Target, Labels, DroppedTarget } from '../targets/target';
 
-// TODO: Deduplicate with https://github.com/prometheus/prometheus/blob/213a8fe89a7308e73f22888a963cbf9375217cd6/web/ui/react-app/src/pages/targets/ScrapePoolList.tsx#L11-L14
+import { withStatusIndicator } from '../../components/withStatusIndicator';
+import { mapObjEntries } from '../../utils';
+
 interface ServiceMap {
   activeTargets: Target[];
   droppedTargets: DroppedTarget[];
@@ -20,14 +19,11 @@ export interface TargetLabels {
   isDropped: boolean;
 }
 
-const Services: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => {
+export const processSummary = (activeTargets: Target[], droppedTargets: DroppedTarget[]) => {
-  const { response, error } = useFetch<ServiceMap>(`${pathPrefix}/api/v1/targets`);
+  const targets: Record<string, { active: number; total: number }> = {};
-
-  const processSummary = (response: ServiceMap) => {
-    const targets: any = {};
 
   // Get targets of each type along with the total and active end points
-    for (const target of response.activeTargets) {
+  for (const target of activeTargets) {
     const { scrapePool: name } = target;
     if (!targets[name]) {
       targets[name] = {
@@ -38,7 +34,7 @@ const Services: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) =>
     targets[name].total++;
     targets[name].active++;
   }
-    for (const target of response.droppedTargets) {
+  for (const target of droppedTargets) {
     const { job: name } = target.discoveredLabels;
     if (!targets[name]) {
       targets[name] = {
@@ -52,10 +48,10 @@ const Services: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) =>
   return targets;
 };
 
-  const processTargets = (response: Target[], dropped: DroppedTarget[]) => {
+export const processTargets = (activeTargets: Target[], droppedTargets: DroppedTarget[]) => {
   const labels: Record<string, TargetLabels[]> = {};
 
-    for (const target of response) {
+  for (const target of activeTargets) {
     const name = target.scrapePool;
     if (!labels[name]) {
       labels[name] = [];
@@ -67,7 +63,7 @@ const Services: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) =>
     });
   }
 
-    for (const target of dropped) {
+  for (const target of droppedTargets) {
     const { job: name } = target.discoveredLabels;
     if (!labels[name]) {
       labels[name] = [];
@@ -82,38 +78,43 @@ const Services: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) =>
   return labels;
 };
 
-  if (error) {
+export const ServiceDiscoveryContent: FC<ServiceMap> = ({ activeTargets, droppedTargets }) => {
-    return (
+  const targets = processSummary(activeTargets, droppedTargets);
-      <Alert color="danger">
+  const labels = processTargets(activeTargets, droppedTargets);
-        <strong>Error:</strong> Error fetching Service-Discovery: {error.message}
-      </Alert>
-    );
-  } else if (response.data) {
-    const targets = processSummary(response.data);
-    const labels = processTargets(response.data.activeTargets, response.data.droppedTargets);
 
   return (
     <>
       <h2>Service Discovery</h2>
       <ul>
-          {Object.keys(targets).map((val, i) => (
+        {mapObjEntries(targets, ([k, v]) => (
-            <li key={i}>
+          <li key={k}>
-              <a href={'#' + val}>
+            <a href={'#' + k}>
-                {' '}
+              {k} ({v.active} / {v.total} active targets)
-                {val} ({targets[val].active} / {targets[val].total} active targets){' '}
             </a>
           </li>
         ))}
       </ul>
       <hr />
-        {Object.keys(labels).map((val: any, i) => {
+      {mapObjEntries(labels, ([k, v]) => {
-          const value = labels[val];
+        return <LabelsTable value={v} name={k} key={k} />;
-          return <LabelsTable value={value} name={val} key={Object.keys(labels)[i]} />;
       })}
     </>
   );
-  }
+};
-  return <FontAwesomeIcon icon={faSpinner} spin />;
+ServiceDiscoveryContent.displayName = 'ServiceDiscoveryContent';
+
+const ServicesWithStatusIndicator = withStatusIndicator(ServiceDiscoveryContent);
+
+const ServiceDiscovery: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => {
+  const { response, error, isLoading } = useFetch<ServiceMap>(`${pathPrefix}/api/v1/targets`);
+  return (
+    <ServicesWithStatusIndicator
+      {...response.data}
+      error={error}
+      isLoading={isLoading}
+      componentTitle="Service Discovery information"
+    />
+  );
 };
 
-export default Services;
+export default ServiceDiscovery;

web/ui/react-app/src/pages/status/Status.test.tsx

@@ -4,10 +4,6 @@ import toJson from 'enzyme-to-json';
 import { StatusContent } from './Status';
 
 describe('Status', () => {
-  it('should not fail with undefined data', () => {
-    const wrapper = shallow(<StatusContent data={[]} />);
-    expect(wrapper).toHaveLength(1);
-  });
   describe('Snapshot testing', () => {
     const response: any = [
       {
@@ -45,7 +41,7 @@ describe('Status', () => {
       },
     ];
     it('should match table snapshot', () => {
-      const wrapper = shallow(<StatusContent data={response} />);
+      const wrapper = shallow(<StatusContent data={response} title="Foo" />);
       expect(toJson(wrapper)).toMatchSnapshot();
       jest.restoreAllMocks();
     });

web/ui/react-app/src/pages/status/Status.tsx

@@ -5,19 +5,15 @@ import { withStatusIndicator } from '../../components/withStatusIndicator';
 import { useFetch } from '../../hooks/useFetch';
 import PathPrefixProps from '../../types/PathPrefixProps';
 
-const sectionTitles = ['Runtime Information', 'Build Information', 'Alertmanagers'];
-
-interface StatusConfig {
-  [k: string]: { title?: string; customizeValue?: (v: any, key: string) => any; customRow?: boolean; skip?: boolean };
-}
-
-type StatusPageState = { [k: string]: string };
-
 interface StatusPageProps {
-  data?: StatusPageState[];
+  data: Record<string, string>;
+  title: string;
 }
 
-export const statusConfig: StatusConfig = {
+export const statusConfig: Record<
+  string,
+  { title?: string; customizeValue?: (v: any, key: string) => any; customRow?: boolean; skip?: boolean }
+> = {
   startTime: { title: 'Start time', customizeValue: (v: string) => new Date(v).toUTCString() },
   CWD: { title: 'Working directory' },
   reloadConfigSuccess: {
@@ -56,16 +52,13 @@ export const statusConfig: StatusConfig = {
   droppedAlertmanagers: { skip: true },
 };
 
-export const StatusContent: FC<StatusPageProps> = ({ data = [] }) => {
+export const StatusContent: FC<StatusPageProps> = ({ data, title }) => {
   return (
     <>
-      {data.map((statuses, i) => {
+      <h2>{title}</h2>
-        return (
-          <Fragment key={i}>
-            <h2>{sectionTitles[i]}</h2>
       <Table className="h-auto" size="sm" bordered striped>
         <tbody>
-                {Object.entries(statuses).map(([k, v]) => {
+          {Object.entries(data).map(([k, v]) => {
             const { title = k, customizeValue = (val: any) => val, customRow, skip } = statusConfig[k] || {};
             if (skip) {
               return null;
@@ -84,9 +77,6 @@ export const StatusContent: FC<StatusPageProps> = ({ data = [] }) => {
           })}
         </tbody>
       </Table>
-          </Fragment>
-        );
-      })}
     </>
   );
 };
@@ -96,22 +86,27 @@ StatusContent.displayName = 'Status';
 
 const Status: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = '' }) => {
   const path = `${pathPrefix}/api/v1`;
-  const status = useFetch<StatusPageState>(`${path}/status/runtimeinfo`);
-  const runtime = useFetch<StatusPageState>(`${path}/status/buildinfo`);
-  const build = useFetch<StatusPageState>(`${path}/alertmanagers`);
-
-  let data;
-  if (status.response.data && runtime.response.data && build.response.data) {
-    data = [status.response.data, runtime.response.data, build.response.data];
-  }
 
+  return (
+    <>
+      {[
+        { fetchResult: useFetch<Record<string, string>>(`${path}/status/runtimeinfo`), title: 'Runtime Information' },
+        { fetchResult: useFetch<Record<string, string>>(`${path}/status/buildinfo`), title: 'Build Information' },
+        { fetchResult: useFetch<Record<string, string>>(`${path}/alertmanagers`), title: 'Alertmanagers' },
+      ].map(({ fetchResult, title }) => {
+        const { response, isLoading, error } = fetchResult;
         return (
           <StatusWithStatusIndicator
-      data={data}
+            data={response.data}
-      isLoading={status.isLoading || runtime.isLoading || build.isLoading}
+            title={title}
-      error={status.error || runtime.error || build.error}
+            isLoading={isLoading}
+            error={error}
+            componentTitle={title}
           />
         );
+      })}
+    </>
+  );
 };
 
 export default Status;

web/ui/react-app/src/pages/status/__snapshots__/Status.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Status Snapshot testing should match table snapshot 1`] = `
 <Fragment>
   <h2>
-    Runtime Information
+    Foo
   </h2>
   <Table
     bordered={true}
@@ -15,7 +15,7 @@ exports[`Status Snapshot testing should match table snapshot 1`] = `
   >
     <tbody>
       <tr
-        key="startTime"
+        key="0"
       >
         <th
           className="capitalize-title"
@@ -24,131 +24,17 @@ exports[`Status Snapshot testing should match table snapshot 1`] = `
               "width": "35%",
             }
           }
-        >
-          Start time
-        </th>
-        <td
-          className="text-break"
-        >
-          Wed, 30 Oct 2019 20:03:23 GMT
-        </td>
-      </tr>
-      <tr
-        key="CWD"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          Working directory
-        </th>
-        <td
-          className="text-break"
-        >
-          /home/boyskila/Desktop/prometheus
-        </td>
-      </tr>
-      <tr
-        key="reloadConfigSuccess"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          Configuration reload
-        </th>
-        <td
-          className="text-break"
-        >
-          Successful
-        </td>
-      </tr>
-      <tr
-        key="lastConfigTime"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          Last successful configuration reload
-        </th>
-        <td
-          className="text-break"
-        >
-          2019-10-30T22:03:23+02:00
-        </td>
-      </tr>
-      <tr
-        key="chunkCount"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          Head chunks
-        </th>
-        <td
-          className="text-break"
-        >
-          1383
-        </td>
-      </tr>
-      <tr
-        key="timeSeriesCount"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          Head time series
-        </th>
-        <td
-          className="text-break"
-        >
-          461
-        </td>
-      </tr>
-      <tr
-        key="corruptionCount"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          WAL corruptions
-        </th>
-        <td
-          className="text-break"
         >
           0
+        </th>
+        <td
+          className="text-break"
+        >
+          <Component />
         </td>
       </tr>
       <tr
-        key="goroutineCount"
+        key="1"
       >
         <th
           className="capitalize-title"
@@ -158,16 +44,16 @@ exports[`Status Snapshot testing should match table snapshot 1`] = `
             }
           }
         >
-          Goroutines
+          1
         </th>
         <td
           className="text-break"
         >
-          37
+          <Component />
         </td>
       </tr>
       <tr
-        key="GOMAXPROCS"
+        key="2"
       >
         <th
           className="capitalize-title"
@@ -177,274 +63,12 @@ exports[`Status Snapshot testing should match table snapshot 1`] = `
             }
           }
         >
-          GOMAXPROCS
+          2
         </th>
         <td
           className="text-break"
         >
-          4
+          <Component />
-        </td>
-      </tr>
-      <tr
-        key="GOGC"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          GOGC
-        </th>
-        <td
-          className="text-break"
-        />
-      </tr>
-      <tr
-        key="GODEBUG"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          GODEBUG
-        </th>
-        <td
-          className="text-break"
-        />
-      </tr>
-      <tr
-        key="storageRetention"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          Storage retention
-        </th>
-        <td
-          className="text-break"
-        >
-          15d
-        </td>
-      </tr>
-    </tbody>
-  </Table>
-  <h2>
-    Build Information
-  </h2>
-  <Table
-    bordered={true}
-    className="h-auto"
-    responsiveTag="div"
-    size="sm"
-    striped={true}
-    tag="table"
-  >
-    <tbody>
-      <tr
-        key="version"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          version
-        </th>
-        <td
-          className="text-break"
-        />
-      </tr>
-      <tr
-        key="revision"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          revision
-        </th>
-        <td
-          className="text-break"
-        />
-      </tr>
-      <tr
-        key="branch"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          branch
-        </th>
-        <td
-          className="text-break"
-        />
-      </tr>
-      <tr
-        key="buildUser"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          buildUser
-        </th>
-        <td
-          className="text-break"
-        />
-      </tr>
-      <tr
-        key="buildDate"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          buildDate
-        </th>
-        <td
-          className="text-break"
-        />
-      </tr>
-      <tr
-        key="goVersion"
-      >
-        <th
-          className="capitalize-title"
-          style={
-            Object {
-              "width": "35%",
-            }
-          }
-        >
-          goVersion
-        </th>
-        <td
-          className="text-break"
-        >
-          go1.13.3
-        </td>
-      </tr>
-    </tbody>
-  </Table>
-  <h2>
-    Alertmanagers
-  </h2>
-  <Table
-    bordered={true}
-    className="h-auto"
-    responsiveTag="div"
-    size="sm"
-    striped={true}
-    tag="table"
-  >
-    <tbody>
-      <tr>
-        <th>
-          Endpoint
-        </th>
-      </tr>
-      <tr
-        key="https://1.2.3.4:9093/api/v1/alerts"
-      >
-        <td>
-          <a
-            href="https://1.2.3.4:9093/api/v1/alerts"
-          >
-            https://1.2.3.4:9093
-          </a>
-          /api/v1/alerts
-        </td>
-      </tr>
-      <tr
-        key="https://1.2.3.5:9093/api/v1/alerts"
-      >
-        <td>
-          <a
-            href="https://1.2.3.5:9093/api/v1/alerts"
-          >
-            https://1.2.3.5:9093
-          </a>
-          /api/v1/alerts
-        </td>
-      </tr>
-      <tr
-        key="https://1.2.3.6:9093/api/v1/alerts"
-      >
-        <td>
-          <a
-            href="https://1.2.3.6:9093/api/v1/alerts"
-          >
-            https://1.2.3.6:9093
-          </a>
-          /api/v1/alerts
-        </td>
-      </tr>
-      <tr
-        key="https://1.2.3.7:9093/api/v1/alerts"
-      >
-        <td>
-          <a
-            href="https://1.2.3.7:9093/api/v1/alerts"
-          >
-            https://1.2.3.7:9093
-          </a>
-          /api/v1/alerts
-        </td>
-      </tr>
-      <tr
-        key="https://1.2.3.8:9093/api/v1/alerts"
-      >
-        <td>
-          <a
-            href="https://1.2.3.8:9093/api/v1/alerts"
-          >
-            https://1.2.3.8:9093
-          </a>
-          /api/v1/alerts
-        </td>
-      </tr>
-      <tr
-        key="https://1.2.3.9:9093/api/v1/alerts"
-      >
-        <td>
-          <a
-            href="https://1.2.3.9:9093/api/v1/alerts"
-          >
-            https://1.2.3.9:9093
-          </a>
-          /api/v1/alerts
         </td>
       </tr>
     </tbody>

web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { mount, shallow, ReactWrapper } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { Alert } from 'reactstrap';
 import { sampleApiResponse } from './__testdata__/testdata';
 import ScrapePoolList from './ScrapePoolList';
 import ScrapePoolPanel from './ScrapePoolPanel';
 import { Target } from './target';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FetchMock } from 'jest-fetch-mock/types';
 
 describe('ScrapePoolList', () => {
@@ -20,20 +18,6 @@ describe('ScrapePoolList', () => {
     fetchMock.resetMocks();
   });
 
-  describe('before data is returned', () => {
-    const scrapePoolList = shallow(<ScrapePoolList {...defaultProps} />);
-    const spinner = scrapePoolList.find(FontAwesomeIcon);
-
-    it('renders a spinner', () => {
-      expect(spinner.prop('icon')).toEqual(faSpinner);
-      expect(spinner.prop('spin')).toBe(true);
-    });
-
-    it('renders exactly one spinner', () => {
-      expect(spinner).toHaveLength(1);
-    });
-  });
-
   describe('when data is returned', () => {
     let scrapePoolList: ReactWrapper;
     let mock: FetchMock;
@@ -55,7 +39,7 @@ describe('ScrapePoolList', () => {
         scrapePoolList = mount(<ScrapePoolList {...defaultProps} />);
       });
       scrapePoolList.update();
-      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', { cache: 'no-cache', credentials: 'same-origin' });
+      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', { cache: 'no-store', credentials: 'same-origin' });
       const panels = scrapePoolList.find(ScrapePoolPanel);
       expect(panels).toHaveLength(3);
       const activeTargets: Target[] = sampleApiResponse.data.activeTargets as Target[];
@@ -74,7 +58,7 @@ describe('ScrapePoolList', () => {
         scrapePoolList = mount(<ScrapePoolList {...props} />);
       });
       scrapePoolList.update();
-      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', { cache: 'no-cache', credentials: 'same-origin' });
+      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', { cache: 'no-store', credentials: 'same-origin' });
       const panels = scrapePoolList.find(ScrapePoolPanel);
       expect(panels).toHaveLength(0);
     });
@@ -90,7 +74,7 @@ describe('ScrapePoolList', () => {
       });
       scrapePoolList.update();
 
-      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', { cache: 'no-cache', credentials: 'same-origin' });
+      expect(mock).toHaveBeenCalledWith('../api/v1/targets?state=active', { cache: 'no-store', credentials: 'same-origin' });
       const alert = scrapePoolList.find(Alert);
       expect(alert.prop('color')).toBe('danger');
       expect(alert.text()).toContain('Error fetching targets');

web/ui/react-app/src/pages/targets/ScrapePoolList.tsx

@@ -1,60 +1,48 @@
 import React, { FC } from 'react';
 import { FilterData } from './Filter';
 import { useFetch } from '../../hooks/useFetch';
-import { ScrapePool, groupTargets, Target } from './target';
+import { groupTargets, Target } from './target';
 import ScrapePoolPanel from './ScrapePoolPanel';
 import PathPrefixProps from '../../types/PathPrefixProps';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { withStatusIndicator } from '../../components/withStatusIndicator';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { Alert } from 'reactstrap';
-
-interface TargetsResponse {
-  activeTargets: Target[];
-  droppedTargets: Target[];
-}
 
 interface ScrapePoolListProps {
   filter: FilterData;
+  activeTargets: Target[];
 }
 
-const filterByHealth = ({ upCount, targets }: ScrapePool, { showHealthy, showUnhealthy }: FilterData): boolean => {
+export const ScrapePoolContent: FC<ScrapePoolListProps> = ({ filter, activeTargets }) => {
-  const isHealthy = upCount === targets.length;
-  return (isHealthy && showHealthy) || (!isHealthy && showUnhealthy);
-};
-
-const ScrapePoolList: FC<ScrapePoolListProps & PathPrefixProps> = ({ filter, pathPrefix }) => {
-  const { response, error } = useFetch<TargetsResponse>(`${pathPrefix}/api/v1/targets?state=active`);
-
-  if (error) {
-    return (
-      <Alert color="danger">
-        <strong>Error fetching targets:</strong> {error.message}
-      </Alert>
-    );
-  } else if (response && response.status !== 'success' && response.status !== 'start fetching') {
-    return (
-      <Alert color="danger">
-        <strong>Error fetching targets:</strong> {response.status}
-      </Alert>
-    );
-  } else if (response && response.data) {
-    const { activeTargets } = response.data;
   const targetGroups = groupTargets(activeTargets);
+  const { showHealthy, showUnhealthy } = filter;
   return (
     <>
-        {Object.keys(targetGroups)
+      {Object.keys(targetGroups).reduce<JSX.Element[]>((panels, scrapePool) => {
-          .filter((scrapePool: string) => filterByHealth(targetGroups[scrapePool], filter))
+        const targetGroup = targetGroups[scrapePool];
-          .map((scrapePool: string) => {
+        const isHealthy = targetGroup.upCount === targetGroup.targets.length;
-            const targetGroupProps = {
+        return (isHealthy && showHealthy) || (!isHealthy && showUnhealthy)
-              scrapePool,
+          ? [...panels, <ScrapePoolPanel key={scrapePool} scrapePool={scrapePool} targetGroup={targetGroup} />]
-              targetGroup: targetGroups[scrapePool],
+          : panels;
-            };
+      }, [])}
-            return <ScrapePoolPanel key={scrapePool} {...targetGroupProps} />;
-          })}
     </>
   );
-  }
+};
-  return <FontAwesomeIcon icon={faSpinner} spin />;
+ScrapePoolContent.displayName = 'ScrapePoolContent';
+
+const ScrapePoolListWithStatusIndicator = withStatusIndicator(ScrapePoolContent);
+
+const ScrapePoolList: FC<{ filter: FilterData } & PathPrefixProps> = ({ pathPrefix, filter }) => {
+  const { response, error, isLoading } = useFetch<ScrapePoolListProps>(`${pathPrefix}/api/v1/targets?state=active`);
+  const { status: responseStatus } = response;
+  const badResponse = responseStatus !== 'success' && responseStatus !== 'start fetching';
+  return (
+    <ScrapePoolListWithStatusIndicator
+      {...response.data}
+      filter={filter}
+      error={badResponse ? new Error(responseStatus) : error}
+      isLoading={isLoading}
+      componentTitle="Targets information"
+    />
+  );
 };
 
 export default ScrapePoolList;

web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { mount, shallow, ReactWrapper } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { Alert, Table } from 'reactstrap';
+import { Table } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import TSDBStatus from './TSDBStatus';
-import { TSDBStatus } from '..';
 import { TSDBMap } from './TSDBStatus';
 
 const fakeTSDBStatusResponse: {
@@ -49,33 +48,6 @@ describe('TSDB Stats', () => {
     fetchMock.resetMocks();
   });
 
-  it('before data is returned', () => {
-    const tsdbStatus = shallow(<TSDBStatus />);
-    const icon = tsdbStatus.find(FontAwesomeIcon);
-    expect(icon.prop('icon')).toEqual(faSpinner);
-    expect(icon.prop('spin')).toBeTruthy();
-  });
-
-  describe('when an error is returned', () => {
-    it('displays an alert', async () => {
-      const mock = fetchMock.mockReject(new Error('error loading tsdb status'));
-
-      let page: any;
-      await act(async () => {
-        page = mount(<TSDBStatus pathPrefix="/path/prefix" />);
-      });
-      page.update();
-
-      expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', {
-        cache: 'no-cache',
-        credentials: 'same-origin',
-      });
-      const alert = page.find(Alert);
-      expect(alert.prop('color')).toBe('danger');
-      expect(alert.text()).toContain('error loading tsdb status');
-    });
-  });
-
   describe('Table Data Validation', () => {
     it('Table Test', async () => {
       const tables = [
@@ -105,7 +77,7 @@ describe('TSDB Stats', () => {
       page.update();
 
       expect(mock).toHaveBeenCalledWith('/path/prefix/api/v1/status/tsdb', {
-        cache: 'no-cache',
+        cache: 'no-store',
         credentials: 'same-origin',
       });
 

web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.tsx

@@ -1,32 +1,43 @@
-import React, { FC, Fragment } from 'react';
+import React, { FC } from 'react';
 import { RouteComponentProps } from '@reach/router';
-import { Alert, Table } from 'reactstrap';
+import { Table } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { useFetch } from '../../hooks/useFetch';
 import PathPrefixProps from '../../types/PathPrefixProps';
+import { withStatusIndicator } from '../../components/withStatusIndicator';
 
-export interface Stats {
+interface Stats {
   name: string;
   value: number;
 }
 
 export interface TSDBMap {
-  seriesCountByMetricName: Array<Stats>;
+  seriesCountByMetricName: Stats[];
-  labelValueCountByLabelName: Array<Stats>;
+  labelValueCountByLabelName: Stats[];
-  memoryInBytesByLabelName: Array<Stats>;
+  memoryInBytesByLabelName: Stats[];
-  seriesCountByLabelValuePair: Array<Stats>;
+  seriesCountByLabelValuePair: Stats[];
 }
 
-const paddingStyle = {
+export const TSDBStatusContent: FC<TSDBMap> = ({
-  padding: '10px',
+  labelValueCountByLabelName,
-};
+  seriesCountByMetricName,
-
+  memoryInBytesByLabelName,
-function createTable(title: string, unit: string, stats: Array<Stats>) {
+  seriesCountByLabelValuePair,
+}) => {
   return (
-    <div style={paddingStyle}>
+    <div>
+      <h2>TSDB Status</h2>
+      <h3 className="p-2">Head Cardinality Stats</h3>
+      {[
+        { title: 'Top 10 label names with value count', stats: labelValueCountByLabelName },
+        { title: 'Top 10 series count by metric names', stats: seriesCountByMetricName },
+        { title: 'Top 10 label names with high memory usage', unit: 'Bytes', stats: memoryInBytesByLabelName },
+        { title: 'Top 10 series count by label value pairs', stats: seriesCountByLabelValuePair },
+      ].map(({ title, unit = 'Count', stats }) => {
+        return (
+          <div className="p-2" key={title}>
             <h3>{title}</h3>
-      <Table bordered={true} size="sm" striped={true}>
+            <Table bordered size="sm" striped>
               <thead>
                 <tr>
                   <th>Name</th>
@@ -34,53 +45,36 @@ function createTable(title: string, unit: string, stats: Array<Stats>) {
                 </tr>
               </thead>
               <tbody>
-          {stats.map((element: Stats, i: number) => {
+                {stats.map(({ name, value }) => {
                   return (
-              <Fragment key={i}>
+                    <tr key={name}>
-                <tr>
+                      <td>{name}</td>
-                  <td>{element.name}</td>
+                      <td>{value}</td>
-                  <td>{element.value}</td>
                     </tr>
-              </Fragment>
                   );
                 })}
               </tbody>
             </Table>
           </div>
         );
-}
+      })}
+    </div>
+  );
+};
+TSDBStatusContent.displayName = 'TSDBStatusContent';
+
+const TSDBStatusContentWithStatusIndicator = withStatusIndicator(TSDBStatusContent);
 
 const TSDBStatus: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => {
-  const { response, error } = useFetch<TSDBMap>(`${pathPrefix}/api/v1/status/tsdb`);
+  const { response, error, isLoading } = useFetch<TSDBMap>(`${pathPrefix}/api/v1/status/tsdb`);
-  const headStats = () => {
-    const stats = response && response.data;
-    if (error) {
-      return (
-        <Alert color="danger">
-          <strong>Error:</strong> Error fetching TSDB Status: {error.message}
-        </Alert>
-      );
-    } else if (stats) {
-      return (
-        <div>
-          <div style={paddingStyle}>
-            <h3>Head Cardinality Stats</h3>
-          </div>
-          {createTable('Top 10 label names with value count', 'Count', stats.labelValueCountByLabelName)}
-          {createTable('Top 10 series count by metric names', 'Count', stats.seriesCountByMetricName)}
-          {createTable('Top 10 label names with high memory usage', 'Bytes', stats.memoryInBytesByLabelName)}
-          {createTable('Top 10 series count by label value pairs', 'Count', stats.seriesCountByLabelValuePair)}
-        </div>
-      );
-    }
-    return <FontAwesomeIcon icon={faSpinner} spin />;
-  };
 
   return (
-    <div>
+    <TSDBStatusContentWithStatusIndicator
-      <h2>TSDB Status</h2>
+      error={error}
-      {headStats()}
+      isLoading={isLoading}
-    </div>
+      {...response.data}
+      componentTitle="TSDB Status information"
+    />
   );
 };
 

web/ui/react-app/src/utils/index.ts

@@ -201,3 +201,12 @@ export const encodePanelOptionsToQueryString = (panels: PanelMeta[]) => {
 export const createExpressionLink = (expr: string) => {
   return `../graph?g0.expr=${encodeURIComponent(expr)}&g0.tab=1&g0.stacked=0&g0.range_input=1h`;
 };
+export const mapObjEntries = <T, key extends keyof T, Z>(
+  o: T,
+  cb: ([k, v]: [string, T[key]], i: number, arr: [string, T[key]][]) => Z
+) => Object.entries(o).map(cb);
+
+export const callAll = (...fns: Array<(...args: any) => void>) => (...args: any) => {
+  // eslint-disable-next-line prefer-spread
+  fns.filter(Boolean).forEach(fn => fn.apply(null, args));
+};