prometheus

1
import React, { FC } from 'react';
2
import { Table } from 'reactstrap';
3

4
import { useFetch } from '../../hooks/useFetch';
5
import { withStatusIndicator } from '../../components/withStatusIndicator';
6
import { usePathPrefix } from '../../contexts/PathPrefixContext';
7
import { API_PATH } from '../../constants/constants';
8

9
interface Stats {
10
  name: string;
11
  value: number;
12
}
13

14
interface HeadStats {
15
  numSeries: number;
16
  numLabelPairs: number;
17
  chunkCount: number;
18
  minTime: number;
19
  maxTime: number;
20
}
21

22
export interface TSDBMap {
23
  headStats: HeadStats;
24
  seriesCountByMetricName: Stats[];
25
  labelValueCountByLabelName: Stats[];
26
  memoryInBytesByLabelName: Stats[];
27
  seriesCountByLabelValuePair: Stats[];
28
}
29

30
export const TSDBStatusContent: FC<TSDBMap> = ({
31
  headStats,
32
  labelValueCountByLabelName,
33
  seriesCountByMetricName,
34
  memoryInBytesByLabelName,
35
  seriesCountByLabelValuePair,
36
}) => {
37
  const unixToTime = (unix: number): string => {
38
    try {
39
      return `${new Date(unix).toISOString()} (${unix})`;
40
    } catch {
41
      if (numSeries === 0) {
42
        return 'No datapoints yet';
43
      }
44
      return `Error parsing time (${unix})`;
45
    }
46
  };
47
  const { chunkCount, numSeries, numLabelPairs, minTime, maxTime } = headStats;
48
  const stats = [
49
    { header: 'Number of Series', value: numSeries },
50
    { header: 'Number of Chunks', value: chunkCount },
51
    { header: 'Number of Label Pairs', value: numLabelPairs },
52
    { header: 'Current Min Time', value: `${unixToTime(minTime)}` },
53
    { header: 'Current Max Time', value: `${unixToTime(maxTime)}` },
54
  ];
55
  return (
56
    <div>
57
      <h2>TSDB Status</h2>
58
      <h3 className="p-2">Head Stats</h3>
59
      <div className="p-2">
60
        <Table bordered size="sm" striped>
61
          <thead>
62
            <tr>
63
              {stats.map(({ header }) => {
64
                return <th key={header}>{header}</th>;
65
              })}
66
            </tr>
67
          </thead>
68
          <tbody>
69
            <tr>
70
              {stats.map(({ header, value }) => {
71
                return <td key={header}>{value}</td>;
72
              })}
73
            </tr>
74
          </tbody>
75
        </Table>
76
      </div>
77
      <h3 className="p-2">Head Cardinality Stats</h3>
78
      {[
79
        { title: 'Top 10 label names with value count', stats: labelValueCountByLabelName },
80
        { title: 'Top 10 series count by metric names', stats: seriesCountByMetricName },
81
        { title: 'Top 10 label names with high memory usage', unit: 'Bytes', stats: memoryInBytesByLabelName },
82
        { title: 'Top 10 series count by label value pairs', stats: seriesCountByLabelValuePair },
83
      ].map(({ title, unit = 'Count', stats }) => {
84
        return (
85
          <div className="p-2" key={title}>
86
            <h3>{title}</h3>
87
            <Table bordered size="sm" striped>
88
              <thead>
89
                <tr>
90
                  <th>Name</th>
91
                  <th>{unit}</th>
92
                </tr>
93
              </thead>
94
              <tbody>
95
                {stats.map(({ name, value }) => {
96
                  return (
97
                    <tr key={name}>
98
                      <td>{name}</td>
99
                      <td>{value}</td>
100
                    </tr>
101
                  );
102
                })}
103
              </tbody>
104
            </Table>
105
          </div>
106
        );
107
      })}
108
    </div>
109
  );
110
};
111
TSDBStatusContent.displayName = 'TSDBStatusContent';
112

113
const TSDBStatusContentWithStatusIndicator = withStatusIndicator(TSDBStatusContent);
114

115
const TSDBStatus: FC = () => {
116
  const pathPrefix = usePathPrefix();
117
  const { response, error, isLoading } = useFetch<TSDBMap>(`${pathPrefix}/${API_PATH}/status/tsdb`);
118

119
  return (
120
    <TSDBStatusContentWithStatusIndicator
121
      error={error}
122
      isLoading={isLoading}
123
      {...response.data}
124
      componentTitle="TSDB Status information"
125
    />
126
  );
127
};
128

129
export default TSDBStatus;
130