-
Notifications
You must be signed in to change notification settings - Fork 11.7k
/
DerivedFields.tsx
103 lines (95 loc) · 3.07 KB
/
DerivedFields.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React, { useState } from 'react';
import { css } from 'emotion';
import { Button, DataLinkBuiltInVars, stylesFactory, useTheme, VariableOrigin } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
import { DerivedFieldConfig } from '../types';
import { DerivedField } from './DerivedField';
import { DebugSection } from './DebugSection';
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
infoText: css`
padding-bottom: ${theme.spacing.md};
color: ${theme.colors.textWeak};
`,
derivedField: css`
margin-bottom: ${theme.spacing.sm};
`,
}));
type Props = {
value?: DerivedFieldConfig[];
onChange: (value: DerivedFieldConfig[]) => void;
};
export const DerivedFields = (props: Props) => {
const { value, onChange } = props;
const theme = useTheme();
const styles = getStyles(theme);
const [showDebug, setShowDebug] = useState(false);
return (
<>
<h3 className="page-heading">Derived fields</h3>
<div className={styles.infoText}>
Derived fields can be used to extract new fields from the log message and create link from it's value.
</div>
<div className="gf-form-group">
{value &&
value.map((field, index) => {
return (
<DerivedField
className={styles.derivedField}
key={index}
value={field}
onChange={newField => {
const newDerivedFields = [...value];
newDerivedFields.splice(index, 1, newField);
onChange(newDerivedFields);
}}
onDelete={() => {
const newDerivedFields = [...value];
newDerivedFields.splice(index, 1);
onChange(newDerivedFields);
}}
suggestions={[
{
value: DataLinkBuiltInVars.valueRaw,
label: 'Raw value',
documentation: 'Exact string captured by the regular expression',
origin: VariableOrigin.Value,
},
]}
/>
);
})}
<div>
<Button
variant={'inverse'}
className={css`
margin-right: 10px;
`}
icon="fa fa-plus"
onClick={event => {
event.preventDefault();
const newDerivedFields = [...(value || []), { name: '', matcherRegex: '' }];
onChange(newDerivedFields);
}}
>
Add
</Button>
{value && value.length > 0 && (
<Button variant="inverse" onClick={() => setShowDebug(!showDebug)}>
{showDebug ? 'Hide example log message' : 'Show example log message'}
</Button>
)}
</div>
</div>
{showDebug && (
<div className="gf-form-group">
<DebugSection
className={css`
margin-bottom: 10px;
`}
derivedFields={value}
/>
</div>
)}
</>
);
};