/* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ import './RightContainer.styles.scss'; import type { InputRef } from 'antd'; import { AutoComplete, Input, InputNumber, Select, Space, Switch, Typography, } from 'antd'; import TimePreference from 'components/TimePreferenceDropDown'; import { PANEL_TYPES, PanelDisplay } from 'constants/queryBuilder'; import GraphTypes, { ItemsProps, } from 'container/NewDashboard/ComponentsSlider/menuItems'; import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { ConciergeBell, LineChart, Plus, Spline } from 'lucide-react'; import { useDashboard } from 'providers/Dashboard/Dashboard'; import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef, useState, } from 'react'; import { UseQueryResult } from 'react-query'; import { SuccessResponse } from 'types/api'; import { ColumnUnit, LegendPosition, Widgets, } from 'types/api/dashboard/getAll'; import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; import { DataSource } from 'types/common/queryBuilder'; import { popupContainer } from 'utils/selectPopupContainer'; import { ColumnUnitSelector } from './ColumnUnitSelector/ColumnUnitSelector'; import { panelTypeVsBucketConfig, panelTypeVsColumnUnitPreferences, panelTypeVsCreateAlert, panelTypeVsFillSpan, panelTypeVsLegendColors, panelTypeVsLegendPosition, panelTypeVsLogScale, panelTypeVsPanelTimePreferences, panelTypeVsSoftMinMax, panelTypeVsStackingChartPreferences, panelTypeVsThreshold, panelTypeVsYAxisUnit, } from './constants'; import LegendColors from './LegendColors/LegendColors'; import ThresholdSelector from './Threshold/ThresholdSelector'; import { ThresholdProps } from './Threshold/types'; import { timePreferance } from './timeItems'; import YAxisUnitSelector from './YAxisUnitSelector'; const { TextArea } = Input; const { Option } = Select; enum LogScale { LINEAR = 'linear', LOGARITHMIC = 'logarithmic', } interface VariableOption { value: string; label: string; } // eslint-disable-next-line sonarjs/cognitive-complexity function RightContainer({ description, setDescription, setTitle, title, selectedGraph, bucketCount, bucketWidth, stackedBarChart, setStackedBarChart, setBucketCount, setBucketWidth, setSelectedTime, selectedTime, yAxisUnit, setYAxisUnit, setGraphHandler, thresholds, combineHistogram, setCombineHistogram, setThresholds, selectedWidget, isFillSpans, setIsFillSpans, softMax, softMin, setSoftMax, setSoftMin, columnUnits, setColumnUnits, isLogScale, setIsLogScale, legendPosition, setLegendPosition, customLegendColors, setCustomLegendColors, queryResponse, }: RightContainerProps): JSX.Element { const { selectedDashboard } = useDashboard(); const [inputValue, setInputValue] = useState(title); const [autoCompleteOpen, setAutoCompleteOpen] = useState(false); const [cursorPos, setCursorPos] = useState(0); const inputRef = useRef(null); const onChangeHandler = useCallback( (setFunc: Dispatch>, value: string) => { setFunc(value); }, [], ); const selectedGraphType = GraphTypes.find((e) => e.name === selectedGraph)?.display || ''; const onCreateAlertsHandler = useCreateAlerts( selectedWidget, 'panelView', thresholds, ); const allowThreshold = panelTypeVsThreshold[selectedGraph]; const allowSoftMinMax = panelTypeVsSoftMinMax[selectedGraph]; const allowFillSpans = panelTypeVsFillSpan[selectedGraph]; const allowLogScale = panelTypeVsLogScale[selectedGraph]; const allowYAxisUnit = panelTypeVsYAxisUnit[selectedGraph]; const allowCreateAlerts = panelTypeVsCreateAlert[selectedGraph]; const allowBucketConfig = panelTypeVsBucketConfig[selectedGraph]; const allowStackingBarChart = panelTypeVsStackingChartPreferences[selectedGraph]; const allowPanelTimePreference = panelTypeVsPanelTimePreferences[selectedGraph]; const allowLegendPosition = panelTypeVsLegendPosition[selectedGraph]; const allowLegendColors = panelTypeVsLegendColors[selectedGraph]; const allowPanelColumnPreference = panelTypeVsColumnUnitPreferences[selectedGraph]; const { currentQuery } = useQueryBuilder(); const [graphTypes, setGraphTypes] = useState(GraphTypes); // Get dashboard variables const dashboardVariables = useMemo(() => { if (!selectedDashboard?.data?.variables) return []; return Object.entries(selectedDashboard.data.variables).map(([, value]) => ({ value: value.name || '', label: value.name || '', })); }, [selectedDashboard?.data?.variables]); const updateCursorAndDropdown = (value: string, pos: number): void => { setCursorPos(pos); const lastDollar = value.lastIndexOf('$', pos - 1); setAutoCompleteOpen(lastDollar !== -1 && pos >= lastDollar + 1); }; const onInputChange = (value: string): void => { setInputValue(value); onChangeHandler(setTitle, value); setTimeout(() => { const pos = inputRef.current?.input?.selectionStart ?? 0; updateCursorAndDropdown(value, pos); }, 0); }; const handleInputCursor = (): void => { const pos = inputRef.current?.input?.selectionStart ?? 0; updateCursorAndDropdown(inputValue, pos); }; const onSelect = (selectedValue: string): void => { const pos = cursorPos; const value = inputValue; const lastDollar = value.lastIndexOf('$', pos - 1); const textBeforeDollar = value.substring(0, lastDollar); const textAfterDollar = value.substring(lastDollar + 1); const match = textAfterDollar.match(/^([a-zA-Z0-9_.]*)/); const rest = textAfterDollar.substring(match ? match[1].length : 0); const newValue = `${textBeforeDollar}$${selectedValue}${rest}`; setInputValue(newValue); onChangeHandler(setTitle, newValue); setAutoCompleteOpen(false); setTimeout(() => { const newCursor = `${textBeforeDollar}$${selectedValue}`.length; inputRef.current?.input?.setSelectionRange(newCursor, newCursor); setCursorPos(newCursor); }, 0); }; const filterOption = ( inputValue: string, option?: VariableOption, ): boolean => { const pos = cursorPos; const value = inputValue; const lastDollar = value.lastIndexOf('$', pos - 1); if (lastDollar === -1) return false; const afterDollar = value.substring(lastDollar + 1, pos).toLowerCase(); return option?.value.toLowerCase().startsWith(afterDollar) || false; }; useEffect(() => { const queryContainsMetricsDataSource = currentQuery.builder.queryData.some( (query) => query.dataSource === DataSource.METRICS, ); if (queryContainsMetricsDataSource) { setGraphTypes((prev) => prev.filter((graph) => graph.name !== PANEL_TYPES.LIST), ); } else { setGraphTypes(GraphTypes); } }, [currentQuery]); const softMinHandler = useCallback( (value: number | null) => { setSoftMin(value); }, [setSoftMin], ); const softMaxHandler = useCallback( (value: number | null) => { setSoftMax(value); }, [setSoftMax], ); return (
Panel details
Name setAutoCompleteOpen(false)} /> Description