grafana-plugin/src/datasources/entity-ds/EntityClauseEditor.tsx at 132ada88c26948cf7fd2c86432c1b3a0eebf03e9 · sbernabe1/grafana-plugin · GitHub

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
104
105
106
107
108
109
110
111
112
113
114
115
import React, { useEffect } from 'react'
import { EntityClause } from './EntityClause'
import { ClauseActionType, OnmsEntityType, SearchOption } from './types'
import { API } from 'opennms'

interface EntityClauseEditorProps {
    setFilter: (filter: API.Filter) => void,
    loading: boolean
    propertiesAsArray: SearchOption[],
    clauses: any[],
    dispatchClauses: any
}

export const EntityClauseEditor = ({ setFilter, loading, propertiesAsArray, clauses, dispatchClauses }: EntityClauseEditorProps) => {

    useEffect(() => {
        const updatedFilter = new API.Filter();
        updatedFilter.limit = 10;

        // Build the filter
        clauses.forEach((d, i) => {
            // Handle comparator structure - could be { id, label } or { value: { i, l } }
            let comparatorValue = clauses[i].comparator?.value

            if (!comparatorValue && clauses[i].comparator?.id) {
                comparatorValue = {
                    id: clauses[i].comparator.id,
                    label: clauses[i].comparator.label,
                    l: clauses[i].comparator.label,
                    i: clauses[i].comparator.id
                }
            }

            if ((d.type === OnmsEntityType.AND || d.type === OnmsEntityType.FIRST) && comparatorValue) {
                updatedFilter.withAndRestriction(
                    new API.Restriction(
                        clauses[i].attribute?.id || clauses[i].attribute?.value?.id,
                        comparatorValue,
                        clauses[i].comparedString || clauses[i].comparedValue?.value
                    )
                )
            } else if (d.type === OnmsEntityType.OR && comparatorValue) {
                updatedFilter.withOrRestriction(
                    new API.Restriction(
                        clauses[i].attribute?.id || clauses[i].attribute?.value?.id,
                        comparatorValue,
                        clauses[i].comparedString || clauses[i].comparedValue?.value
                    )
                )
            }
        })

        setFilter(updatedFilter)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [clauses])

    return (
        <>
            {clauses.map((clause, index) => (
                <React.Fragment key={index}>
                    <EntityClause
                        clause={clause}
                        setAttribute={(col, val) => dispatchClauses({
                            type: ClauseActionType.update,
                            index: col,
                            property: 'attribute',
                            value: {
                                id: (val.value as any)?.id,
                                label: val.label,
                                value: val.value  // Preserve full metadata
                            }
                        })}
                        setComparator={(col, val) => dispatchClauses({
                            type: ClauseActionType.update,
                            index: col,
                            property: 'comparator',
                            value: {
                                id: (val.value as any)?.id || (val.value as any)?.i,
                                label: val.label || (val.value as any)?.l
                            }
                        })}
                        setComparedValue={(col, val) => dispatchClauses({
                            type: ClauseActionType.update,
                            index: col,
                            property: 'comparedValue',
                            value: {
                                value: typeof val.value === 'object' && val.value !== null
                                    ? (val.value as any).id || val.value
                                    : val.value
                            }
                        })}
                        setComparedString={(col, val) => dispatchClauses({
                            type: ClauseActionType.update,
                            index: col,
                            property: 'comparedString',
                            value: val
                        })}
                        setClauseType={(col, val) => dispatchClauses({
                            type: ClauseActionType.update,
                            index: col,
                            property: 'type',
                            value: val
                        })}
                        dispatchClauses={dispatchClauses}
                        loading={loading}
                        index={index}
                        propertiesAsArray={propertiesAsArray}
                        hasMultipleClauses={clauses.length > 1}
                    />
                    <div className='spacer' />
                </React.Fragment>
            ))}
        </>
    )
};