Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore(fluxWizard): rename tagId to tagIndex

pull/5852/head
Pavel Zavora 2022-01-31 11:56:13 +01:00
parent e59a39b2cc
commit 4d0800c99b
6 changed files with 73 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/shared/components/TimeMachine/fluxQueryBuilder/FluxQueryBuilder.tsx
View File

@ -58,7 +58,7 @@ const FluxQueryBuilder = ({
{activeTagSelectors.map(i => (
<TagSelector
key={i}
tagId={i}
tagIndex={i}
onRemoveTagSelector={ix =>
setActiveTagSelectors(
activeTagSelectors.filter(x => x !== ix)

50
ui/src/shared/components/TimeMachine/fluxQueryBuilder/TagSelector.tsx
View File

@ -16,23 +16,23 @@ function renderType(type: BuilderAggregateFunctionType) {
}
interface Callbacks {
onRemoveTagSelector: (tagId: number) => void
onRemoveTagSelector: (tagIndex: number) => void
onChangeFunctionType: (
tagId: number,
tagIndex: number,
type: BuilderAggregateFunctionType
) => void
onSelectKey: (tagId: number, key: string) => void
onChangeKeysSearchTerm: (tagId: number, searchTerm: string) => void
onSearchKeys: (tagId: number) => void
onChangeValuesSearchTerm: (tagId: number, searchTerm: string) => void
onSearchValues: (tagId: number) => void
onSelectValues: (tagId: number, values: string[]) => void
onSelectKey: (tagIndex: number, key: string) => void
onChangeKeysSearchTerm: (tagIndex: number, searchTerm: string) => void
onSearchKeys: (tagIndex: number) => void
onChangeValuesSearchTerm: (tagIndex: number, searchTerm: string) => void
onSearchValues: (tagIndex: number) => void
onSelectValues: (tagIndex: number, values: string[]) => void
}
type Props = TagSelectorState & Callbacks
const TagSelector = (props: Props) => {
const {
tagId,
tagIndex,
aggregateFunctionType,
onRemoveTagSelector,
onChangeFunctionType,
@ -43,9 +43,11 @@ const TagSelector = (props: Props) => {
<BuilderCard.DropdownHeader
options={['Filter', 'Group']}
selectedOption={renderType(aggregateFunctionType)}
onDelete={tagId !== 0 ? () => onRemoveTagSelector(tagId) : undefined}
onDelete={
tagIndex !== 0 ? () => onRemoveTagSelector(tagIndex) : undefined
}
onSelect={val =>
onChangeFunctionType(tagId, val === 'Filter' ? 'filter' : 'group')
onChangeFunctionType(tagIndex, val === 'Filter' ? 'filter' : 'group')
}
/>
<TagSelectorBody {...props} />
@ -56,7 +58,7 @@ const TagSelector = (props: Props) => {
const TagSelectorBody = (props: Props) => {
const {
aggregateFunctionType,
tagId,
tagIndex,
keys,
keysStatus,
key,
@ -85,12 +87,12 @@ const TagSelectorBody = (props: Props) => {
const debouncer = useMemo(() => new DefaultDebouncer(), [])
useEffect(() => () => debouncer.cancelAll(), [])
function onValueTermChange(e: ChangeEvent<HTMLInputElement>) {
onChangeValuesSearchTerm(tagId, e.target.value)
debouncer.call(() => onSearchValues(tagId), SEARCH_DEBOUNCE_MS)
onChangeValuesSearchTerm(tagIndex, e.target.value)
debouncer.call(() => onSearchValues(tagIndex), SEARCH_DEBOUNCE_MS)
}
function onKeyTermChange(term: string) {
onChangeKeysSearchTerm(tagId, term)
debouncer.call(() => onSearchKeys(tagId), SEARCH_DEBOUNCE_MS)
onChangeKeysSearchTerm(tagIndex, term)
debouncer.call(() => onSearchKeys(tagIndex), SEARCH_DEBOUNCE_MS)
}
const placeholderText =
@ -111,7 +113,7 @@ const TagSelectorBody = (props: Props) => {
>
<SearchableDropdown
items={keys}
onChoose={(k: string) => onSelectKey(tagId, k)}
onChoose={(k: string) => onSelectKey(tagIndex, k)}
searchTerm={keysSearchTerm}
onChangeSearchTerm={onKeyTermChange}
selected={key}
@ -152,7 +154,7 @@ const TagSelectorValues = (props: Props) => {
const {
keysStatus,
key,
tagId,
tagIndex,
values,
valuesStatus,
selectedValues,
@ -208,13 +210,13 @@ const TagSelectorValues = (props: Props) => {
const active = selectedValues.includes(value)
const onChange = () =>
onSelectValues(
tagId,
tagIndex,
active
? selectedValues.filter((x: string) => x !== value)
: [value, ...selectedValues]
)
const divId = `flxts${tagId}_${value}`
const divId = `flxts${tagIndex}_${value}`
return (
<div
className="flux-query-builder--list-item"
@ -235,11 +237,11 @@ const TagSelectorValues = (props: Props) => {
// TODO replace demo UI by a real implementation
const DEMO_LOAD_DELAY = 1000
interface DemoTagSelectorProps {
tagId: number
onRemoveTagSelector: (tagId: number) => void
tagIndex: number
onRemoveTagSelector: (tagIndex: number) => void
}
const DemoTagSelector = ({
tagId,
tagIndex,
onRemoveTagSelector,
}: DemoTagSelectorProps) => {
const [aggregateFunctionType, setAggregateFunctionType] = useState(
@ -301,7 +303,7 @@ const DemoTagSelector = ({
}, [valuesChanged])
return (
<TagSelector
tagId={tagId}
tagIndex={tagIndex}
aggregateFunctionType={aggregateFunctionType}
onRemoveTagSelector={onRemoveTagSelector}
onChangeFunctionType={(i, type) => {

36
ui/src/shared/components/TimeMachine/fluxQueryBuilder/actions/tags.ts
View File

@ -18,91 +18,91 @@ export function addTagSelector() {
}
}
export function removeTagSelector(tagId: number) {
export function removeTagSelector(tagIndex: number) {
return {
type: 'FQB_TAG_REMOVE' as const,
payload: {
tagId,
tagIndex,
},
}
}
export function changeFunctionType(
tagId: number,
tagIndex: number,
type: BuilderAggregateFunctionType
) {
return {
type: 'FQB_TAG_CHANGE_TYPE' as const,
payload: {
tagId,
tagIndex,
type,
},
}
}
export function selectKey(tagId: number, key: string) {
export function selectKey(tagIndex: number, key: string) {
return {
type: 'FQB_TAG_SELECT_KEY' as const,
payload: {
tagId,
tagIndex,
key,
},
}
}
export function changeKeysSearchTerm(tagId: number, term: string) {
export function changeKeysSearchTerm(tagIndex: number, term: string) {
return {
type: 'FQB_TAG_CHANGE_KEY_SEARCHTERM' as const,
payload: {
tagId,
tagIndex,
term,
},
}
}
export function searchKeys(tagId: number) {
export function searchKeys(tagIndex: number) {
return {
type: 'FQB_TAG_SEARCH_KEY' as const,
payload: {
tagId,
tagIndex,
},
}
}
export function selectValues(tagId: number, values: string[]) {
export function selectValues(tagIndex: number, values: string[]) {
return {
type: 'FQB_TAG_SELECT_VALUES' as const,
payload: {
tagId,
tagIndex,
values,
},
}
}
export function changeValuesSearchTerm(tagId: number, term: string) {
export function changeValuesSearchTerm(tagIndex: number, term: string) {
return {
type: 'FQB_TAG_CHANGE_VALUES_SEARCHTERM' as const,
payload: {
tagId,
tagIndex,
term,
},
}
}
export function searchValues(tagId: number) {
export function searchValues(tagIndex: number) {
return {
type: 'FQB_TAG_SEARCH_VALUES' as const,
payload: {
tagId,
tagIndex,
},
}
}
export function setTagKeysStatus(tagId: number, status: RemoteDataState) {
export function setTagKeysStatus(tagIndex: number, status: RemoteDataState) {
return {
type: 'FQB_TAG_KEY_STATUS' as const,
payload: {
tagId,
tagIndex,
status,
},
}

28
ui/src/shared/components/TimeMachine/fluxQueryBuilder/apis/QueryBuilderFetcher.ts
View File

@ -57,10 +57,10 @@ class QueryBuilderFetcher {
}
public async findKeys(
tagId: number,
tagIndex: number,
options: FindKeysOptions
): Promise<string[]> {
this.cancelFindKeys(tagId)
this.cancelFindKeys(tagIndex)
const {source, tagsSelections, ...rest} = options
const cacheKey = JSON.stringify({
@ -76,7 +76,7 @@ class QueryBuilderFetcher {
const pendingResult = findKeys(options)
this.findKeysQueries[tagId] = pendingResult
this.findKeysQueries[tagIndex] = pendingResult
pendingResult.promise
.then(result => {
@ -87,18 +87,18 @@ class QueryBuilderFetcher {
return pendingResult.promise
}
public cancelFindKeys(tagId: number): void {
if (this.findKeysQueries[tagId]) {
this.findKeysQueries[tagId].cancel()
this.findKeysQueries[tagId] = undefined
public cancelFindKeys(tagIndex: number): void {
if (this.findKeysQueries[tagIndex]) {
this.findKeysQueries[tagIndex].cancel()
this.findKeysQueries[tagIndex] = undefined
}
}
public async findValues(
tagId: number,
tagIndex: number,
options: FindValuesOptions
): Promise<string[]> {
this.cancelFindValues(tagId)
this.cancelFindValues(tagIndex)
const {source, tagsSelections, ...rest} = options
const cacheKey = JSON.stringify({
@ -114,7 +114,7 @@ class QueryBuilderFetcher {
const pendingResult = findValues(options)
this.findValuesQueries[tagId] = pendingResult
this.findValuesQueries[tagIndex] = pendingResult
pendingResult.promise
.then(result => {
@ -125,10 +125,10 @@ class QueryBuilderFetcher {
return pendingResult.promise
}
public cancelFindValues(tagId: number): void {
if (this.findValuesQueries[tagId]) {
this.findValuesQueries[tagId].cancel()
this.findValuesQueries[tagId] = undefined
public cancelFindValues(tagIndex: number): void {
if (this.findValuesQueries[tagIndex]) {
this.findValuesQueries[tagIndex].cancel()
this.findValuesQueries[tagIndex] = undefined
}
}

26
ui/src/shared/components/TimeMachine/fluxQueryBuilder/reducers/tags.ts
View File

@ -6,10 +6,10 @@ export const initialState: TagSelectorState[] = []
function changeTagSelector(
state: TagSelectorState[],
tagId: number,
tagIndex: number,
fn: (tagState: TagSelectorState, index: number) => Partial<TagSelectorState>
): TagSelectorState[] {
const index = state.findIndex(({tagId: id}) => id === tagId)
const index = state.findIndex(({tagIndex: id}) => id === tagIndex)
if (index !== -1) {
state[index] = {
...state[index],
@ -28,7 +28,7 @@ const aggregationReducer = (
return [
...state,
{
tagId: state.length,
tagIndex: state.length,
aggregateFunctionType: 'filter',
keys: [],
keysSearchTerm: '',
@ -42,46 +42,46 @@ const aggregationReducer = (
]
}
case 'FQB_TAG_REMOVE': {
const id = action.payload.tagId
return state.filter(({tagId}) => tagId !== id)
const id = action.payload.tagIndex
return state.filter(({tagIndex}) => tagIndex !== id)
}
case 'FQB_TAG_CHANGE_TYPE': {
return changeTagSelector(state, action.payload.tagId, () => ({
return changeTagSelector(state, action.payload.tagIndex, () => ({
aggregateFunctionType: action.payload.type,
}))
}
case 'FQB_TAG_CHANGE_KEY_SEARCHTERM': {
return changeTagSelector(state, action.payload.tagId, () => ({
return changeTagSelector(state, action.payload.tagIndex, () => ({
keysSearchTerm: action.payload.term,
}))
}
case 'FQB_TAG_CHANGE_VALUES_SEARCHTERM': {
return changeTagSelector(state, action.payload.tagId, () => ({
return changeTagSelector(state, action.payload.tagIndex, () => ({
valuesSearchTerm: action.payload.term,
}))
}
case 'FQB_TAG_SELECT_KEY': {
return changeTagSelector(state, action.payload.tagId, () => ({
return changeTagSelector(state, action.payload.tagIndex, () => ({
key: action.payload.key,
}))
}
case 'FQB_TAG_SELECT_VALUES': {
return changeTagSelector(state, action.payload.tagId, () => ({
return changeTagSelector(state, action.payload.tagIndex, () => ({
selectedValues: action.payload.values,
}))
}
case 'FQB_TAG_SEARCH_KEY': {
return changeTagSelector(state, action.payload.tagId, () => ({
return changeTagSelector(state, action.payload.tagIndex, () => ({
keysStatus: RemoteDataState.Loading,
}))
}
case 'FQB_TAG_SEARCH_VALUES': {
return changeTagSelector(state, action.payload.tagId, () => ({
return changeTagSelector(state, action.payload.tagIndex, () => ({
valuesStatus: RemoteDataState.Loading,
}))
}
case 'FQB_TAG_KEY_STATUS': {
return changeTagSelector(state, action.payload.tagId, () => ({
return changeTagSelector(state, action.payload.tagIndex, () => ({
keysStatus: action.payload.status,
}))
}

2
ui/src/shared/components/TimeMachine/fluxQueryBuilder/types/index.ts
View File

@ -16,7 +16,7 @@ export interface AggregationSelectorState {
export const AGG_WINDOW_AUTO = 'auto'
export interface TagSelectorState extends BuilderTagsType {
tagId: number
tagIndex: number
aggregateFunctionType: BuilderAggregateFunctionType
keysStatus: RemoteDataState