prometheus

1
import React, { FC } from 'react';
2
import { APIResponse } from '../../hooks/useFetch';
3
import { Alert, Table, Badge } from 'reactstrap';
4
import { Link } from 'react-router-dom';
5
import { formatRelative, createExpressionLink, humanizeDuration, formatDuration } from '../../utils';
6
import { Rule } from '../../types/types';
7
import { now } from 'moment';
8

9
interface RulesContentProps {
10
  response: APIResponse<RulesMap>;
11
}
12

13
interface RuleGroup {
14
  name: string;
15
  file: string;
16
  interval: string;
17
  rules: Rule[];
18
  evaluationTime: string;
19
  lastEvaluation: string;
20
}
21

22
export interface RulesMap {
23
  groups: RuleGroup[];
24
}
25

26
const GraphExpressionLink: FC<{ expr: string; text: string; title: string }> = (props) => {
27
  return (
28
    <>
29
      <strong>{props.title}:</strong>
30
      <Link className="ml-4" to={createExpressionLink(props.expr)}>
31
        {props.text}
32
      </Link>
33
      <br />
34
    </>
35
  );
36
};
37

38
export const RulesContent: FC<RulesContentProps> = ({ response }) => {
39
  const getBadgeColor = (state: string) => {
40
    switch (state) {
41
      case 'ok':
42
        return 'success';
43

44
      case 'err':
45
        return 'danger';
46

47
      case 'unknown':
48
        return 'warning';
49
    }
50
  };
51

52
  if (response.data) {
53
    const groups: RuleGroup[] = response.data.groups;
54
    return (
55
      <>
56
        <h2>Rules</h2>
57
        {groups.map((g, i) => {
58
          return (
59
            <Table bordered key={i}>
60
              <thead>
61
                <tr>
62
                  <td>
63
                    <a href={'#' + g.name}>
64
                      <h4 id={g.name} className="text-break">
65
                        {g.name}
66
                      </h4>
67
                    </a>
68
                  </td>
69
                  <td colSpan={2}>
70
                    <h4>Interval: {humanizeDuration(parseFloat(g.interval) * 1000)}</h4>
71
                  </td>
72
                  <td>
73
                    <h4>{formatRelative(g.lastEvaluation, now())}</h4>
74
                  </td>
75
                  <td>
76
                    <h4>{humanizeDuration(parseFloat(g.evaluationTime) * 1000)}</h4>
77
                  </td>
78
                </tr>
79
              </thead>
80
              <tbody>
81
                <tr className="font-weight-bold">
82
                  <td>Rule</td>
83
                  <td>State</td>
84
                  <td>Error</td>
85
                  <td>Last Evaluation</td>
86
                  <td>Evaluation Time</td>
87
                </tr>
88
                {g.rules.map((r, i) => {
89
                  return (
90
                    <tr key={i}>
91
                      <td className="rule-cell">
92
                        {r.alerts ? (
93
                          <GraphExpressionLink title="alert" text={r.name} expr={`ALERTS{alertname="${r.name}"}`} />
94
                        ) : (
95
                          <GraphExpressionLink title="record" text={r.name} expr={r.name} />
96
                        )}
97
                        <GraphExpressionLink title="expr" text={r.query} expr={r.query} />
98
                        {r.duration > 0 && (
99
                          <div>
100
                            <strong>for:</strong> {formatDuration(r.duration * 1000)}
101
                          </div>
102
                        )}
103
                        {r.keepFiringFor > 0 && (
104
                          <div>
105
                            <strong>keep_firing_for:</strong> {formatDuration(r.keepFiringFor * 1000)}
106
                          </div>
107
                        )}
108
                        {r.labels && Object.keys(r.labels).length > 0 && (
109
                          <div>
110
                            <strong>labels:</strong>
111
                            {Object.entries(r.labels).map(([key, value]) => (
112
                              <div className="ml-4" key={key}>
113
                                {key}: {value}
114
                              </div>
115
                            ))}
116
                          </div>
117
                        )}
118
                        {r.alerts && r.annotations && Object.keys(r.annotations).length > 0 && (
119
                          <div>
120
                            <strong>annotations:</strong>
121
                            {Object.entries(r.annotations).map(([key, value]) => (
122
                              <div className="ml-4" key={key}>
123
                                {key}: {value}
124
                              </div>
125
                            ))}
126
                          </div>
127
                        )}
128
                      </td>
129
                      <td>
130
                        <Badge color={getBadgeColor(r.health)}>{r.health.toUpperCase()}</Badge>
131
                      </td>
132
                      <td>{r.lastError ? <Alert color="danger">{r.lastError}</Alert> : null}</td>
133
                      <td>{formatRelative(r.lastEvaluation, now())}</td>
134
                      <td>{humanizeDuration(parseFloat(r.evaluationTime) * 1000)}</td>
135
                    </tr>
136
                  );
137
                })}
138
              </tbody>
139
            </Table>
140
          );
141
        })}
142
      </>
143
    );
144
  }
145

146
  return null;
147
};
148