Skip to content

Commit

Permalink
Merge pull request #786 from OpenNMS/jira/HELM-441-filter-query-param…
Browse files Browse the repository at this point in the history 
…-conversion

HELM-441: Use Perf Filter default param if available
  • Loading branch information
@synqotik
synqotik authored Jun 28, 2023
2 parents 4ed3f43 + 405a014 commit 70f29d2
Showing 1 changed file with 83 additions and 71 deletions.
154 changes: 83 additions & 71 deletions src/datasources/perf-ds/PerformanceFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,94 +2,106 @@ import React, { useState, useEffect } from 'react'
import { SelectableValue } from '@grafana/data'
import { Segment, SegmentAsync, SegmentInput } from '@grafana/ui'
import { SegmentSectionWithIcon } from 'components/SegmentSectionWithIcon'
import { PerformanceQuery } from './types'
import { PerformanceQuery, PerformanceQueryFilterParameter } from './types'

export interface FilterItem {
key: string,
type: string,
displayName: string,
description: string,
required: boolean,
default: string
key: string,
type: string,
displayName: string,
description: string,
required: boolean,
default: string
}

export interface FilterResponse extends FilterItem {
parameter: FilterItem[]
parameter: FilterItem[]
}

export interface PerformanceFilterProps {
query: PerformanceQuery;
updateQuery: Function;
loadFilters: (query?: string | undefined) => Promise<Array<SelectableValue<FilterResponse>>>;
query: PerformanceQuery
updateQuery: Function
loadFilters: (query?: string | undefined) => Promise<Array<SelectableValue<FilterResponse>>>
}

export const PerformanceFilter: React.FC<PerformanceFilterProps> = ({ query, updateQuery, loadFilters }) => {
const [filter, setFilter] = useState<SelectableValue<FilterResponse>>(query.filter);
const [filterState, setFilterState] = useState<Record<string, {value: any, filter: any}>>(query.filterState || {});
const [filter, setFilter] = useState<SelectableValue<FilterResponse>>(query.filter)
const [filterState, setFilterState] = useState<Record<string, {value: any, filter: any}>>(query.filterState || {})

const updateFilterState = (propertyName: string, value: {value: any, filter: any}) => {
setFilterState({ ...filterState, [propertyName]: value })
const updateFilterState = (propertyName: string | undefined, value: {value: any, filter: any}) => {
if (propertyName !== undefined) {
setFilterState({ ...filterState, [propertyName]: value })
}
}

useEffect(() => {
updateQuery(filter, filterState);
const paramValueOrDefault = (param: PerformanceQueryFilterParameter, defaultValue: any = '') => {
let value = param.default

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [filterState, filter])
if (param.key && filterState[param.key] !== undefined) {
value = filterState[param.key]?.value
}

return (value === undefined || value === null) ? defaultValue : value
}

useEffect(() => {
updateQuery(filter, filterState)

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [filterState, filter])

return (
<>
<div className='spacer' />
<SegmentSectionWithIcon label='Filter' icon='filter'>
<SegmentAsync
value={filter}
placeholder='Select Filter'
loadOptions={loadFilters}
return (
<>
<div className='spacer' />
<SegmentSectionWithIcon label='Filter' icon='filter'>
<SegmentAsync
value={filter}
placeholder='Select Filter'
loadOptions={loadFilters}
onChange={(value) => {
setFilter(value)
}}
/>
</SegmentSectionWithIcon>
{ filter?.parameter?.map((param: PerformanceQueryFilterParameter, index) => {
return (
<>
<div className='spacer' />
<SegmentSectionWithIcon label={param.displayName || ''} key={index} >
{param.type === 'boolean' &&
<Segment
placeholder={param.key}
value={paramValueOrDefault(param, 'false')}
onChange={(value: SelectableValue<string>) => {
updateFilterState(param.key, { value: value?.value, filter: param })
}}
options={[{ label: 'True', value: 'true'}, { label: 'False', value: 'false' }]}
/>
}
{ (param.type === 'double' || param.type === 'int' || param.type === 'long') &&
<SegmentInput
type='number'
value={paramValueOrDefault(param, 0)}
placeholder={param.key}
onChange={(value) => {
updateFilterState(param.key, { value, filter: param })
}}
/>
}
{ (param.type !== 'double' && param.type !== 'boolean' && param.type !== 'int' && param.type !== 'long') &&
<SegmentInput
value={paramValueOrDefault(param)}
placeholder={param.key}
onChange={(value) => {
setFilter(value);
updateFilterState(param.key, { value, filter: param })
}}
/>
/>}
<p style={{ margin: 0, paddingTop: 6, paddingLeft: 5 }}>
{ param.description }
</p>
</SegmentSectionWithIcon>
{ filter?.parameter?.map((param, index) => {
return (
<>
<div className='spacer' />
<SegmentSectionWithIcon label={param.displayName} key={index} >
{param.type === 'boolean' &&
<Segment
placeholder={param.key}
value={filterState[param.key]?.value || false}
onChange={(value: SelectableValue<string>) => {
updateFilterState(param.key, { value: value?.value, filter: param })
}}
options={[{ label: 'True', value: 'true'}, { label: 'False', value: 'false' }]}
/>
}
{(param.type === 'double' || param.type === 'int' || param.type === 'long') &&
<SegmentInput
type='number'
value={filterState[param.key]?.value || ''}
placeholder={param.key}
onChange={(value) => {
updateFilterState(param.key, { value, filter: param })
}}
/>
}
{(param.type !== 'double' && param.type !== 'boolean' && param.type !== 'int' && param.type !== 'long') &&
<SegmentInput
value={filterState[param.key]?.value || ''}
placeholder={param.key}
onChange={(value) => {
updateFilterState(param.key, { value, filter: param })
}}
/>}
<p style={{ margin: 0, paddingTop: 6, paddingLeft: 5 }}>
{ param.description }
</p>
</SegmentSectionWithIcon>
</>
)
})}
</>
)
</>
)
})}
</>
)
}

0 comments on commit 70f29d2

Please sign in to comment.