diff --git a/frontend/src/container/OptionsMenu/AddColumnField/index.tsx b/frontend/src/container/OptionsMenu/AddColumnField/index.tsx index 77e1b19b6d..384dba8aaa 100644 --- a/frontend/src/container/OptionsMenu/AddColumnField/index.tsx +++ b/frontend/src/container/OptionsMenu/AddColumnField/index.tsx @@ -38,20 +38,12 @@ function AddColumnField({ config }: AddColumnFieldProps): JSX.Element | null { - {config.value.map((selectedValue: string) => { - const option = config?.options?.find( - ({ value }) => value === selectedValue, - ); - - return ( - - {option?.label} - config.onRemove(selectedValue)} - /> - - ); - })} + {config.value?.map(({ key, id }) => ( + + {key} + config.onRemove(id as string)} /> + + ))} ); } diff --git a/frontend/src/container/OptionsMenu/types.ts b/frontend/src/container/OptionsMenu/types.ts index eba54eadaf..f557e1dbe3 100644 --- a/frontend/src/container/OptionsMenu/types.ts +++ b/frontend/src/container/OptionsMenu/types.ts @@ -15,7 +15,8 @@ export interface InitialOptions export type OptionsMenuConfig = { format?: Pick; maxLines?: Pick; - addColumn?: Pick & { + addColumn?: Pick & { + value: BaseAutocompleteData[]; onRemove: (key: string) => void; }; }; diff --git a/frontend/src/container/OptionsMenu/useOptionsMenu.ts b/frontend/src/container/OptionsMenu/useOptionsMenu.ts index 13db2516dc..f39557f9f7 100644 --- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts +++ b/frontend/src/container/OptionsMenu/useOptionsMenu.ts @@ -63,15 +63,16 @@ const useOptionsMenu = ({ [initialOptions, attributeKeys], ); - const options = useMemo(() => getOptionsFromKeys(attributeKeys), [ - attributeKeys, - ]); - const selectedColumnKeys = useMemo( () => optionsQueryData?.selectColumns?.map(({ id }) => id) || [], [optionsQueryData], ); + const addColumnOptions = useMemo( + () => getOptionsFromKeys(attributeKeys, selectedColumnKeys), + [attributeKeys, selectedColumnKeys], + ); + const handleSelectedColumnsChange = useCallback( (value: string[]) => { const newSelectedColumnKeys = [ @@ -135,8 +136,8 @@ const useOptionsMenu = ({ const optionsMenuConfig: Required = useMemo( () => ({ addColumn: { - value: selectedColumnKeys || defaultOptionsQuery.selectColumns, - options: options || [], + value: optionsQueryData?.selectColumns || defaultOptionsQuery.selectColumns, + options: addColumnOptions || [], onChange: handleSelectedColumnsChange, onRemove: handleRemoveSelectedColumn, }, @@ -150,10 +151,10 @@ const useOptionsMenu = ({ }, }), [ - options, - selectedColumnKeys, + addColumnOptions, optionsQueryData?.maxLines, optionsQueryData?.format, + optionsQueryData?.selectColumns, handleSelectedColumnsChange, handleRemoveSelectedColumn, handleFormatChange, diff --git a/frontend/src/container/OptionsMenu/utils.ts b/frontend/src/container/OptionsMenu/utils.ts index e4fa3fc2b2..1a0b904ac5 100644 --- a/frontend/src/container/OptionsMenu/utils.ts +++ b/frontend/src/container/OptionsMenu/utils.ts @@ -3,12 +3,18 @@ import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteRe export const getOptionsFromKeys = ( keys: BaseAutocompleteData[], -): SelectProps['options'] => - keys.map(({ id, key }) => ({ + selectedKeys: (string | undefined)[], +): SelectProps['options'] => { + const options = keys.map(({ id, key }) => ({ label: key, value: id, })); + return options.filter( + ({ value }) => !selectedKeys.find((key) => key === value), + ); +}; + export const getInitialColumns = ( initialColumnTitles: string[], attributeKeys: BaseAutocompleteData[], diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.tsx b/frontend/src/container/QueryBuilder/components/Query/Query.tsx index cda9b75609..d0c5f126a5 100644 --- a/frontend/src/container/QueryBuilder/components/Query/Query.tsx +++ b/frontend/src/container/QueryBuilder/components/Query/Query.tsx @@ -230,19 +230,21 @@ export const Query = memo(function Query({ - - - - - - - - - - + {panelType !== PANEL_TYPES.LIST && ( + + + + + + + + + + + )} ); } @@ -326,8 +328,11 @@ export const Query = memo(function Query({ @@ -362,14 +367,16 @@ export const Query = memo(function Query({ )} - - - + {panelType !== PANEL_TYPES.LIST && panelType !== PANEL_TYPES.TRACE && ( + + + + )} ); }); diff --git a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.intefaces.ts b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.intefaces.ts index cff5c295df..35c5f0178a 100644 --- a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.intefaces.ts +++ b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.intefaces.ts @@ -1,7 +1,8 @@ +import { AutoCompleteProps } from 'antd'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; -export type AgregatorFilterProps = { - onChange: (value: BaseAutocompleteData) => void; +export type AgregatorFilterProps = Pick & { query: IBuilderQuery; + onChange: (value: BaseAutocompleteData) => void; }; diff --git a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx index a168d32d0c..2f8cf1ea90 100644 --- a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx +++ b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx @@ -28,8 +28,9 @@ import { selectStyle } from '../QueryBuilderSearch/config'; import { AgregatorFilterProps } from './AggregatorFilter.intefaces'; export const AggregatorFilter = memo(function AggregatorFilter({ - onChange, query, + disabled, + onChange, }: AgregatorFilterProps): JSX.Element { const [optionsData, setOptionsData] = useState([]); const debouncedValue = useDebounce(query.aggregateAttribute.key, 300); @@ -119,6 +120,7 @@ export const AggregatorFilter = memo(function AggregatorFilter({ options={optionsData} value={value} onChange={handleChangeAttribute} + disabled={disabled} /> ); }); diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx index 96187ed6f6..f85c72dc34 100644 --- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx +++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx @@ -18,6 +18,7 @@ import { getLabelFromValue, mapLabelValuePairs, orderByValueDelimiter, + transformToOrderByStringValues, } from './utils'; export function OrderByFilter({ @@ -25,7 +26,9 @@ export function OrderByFilter({ onChange, }: OrderByFilterProps): JSX.Element { const [searchText, setSearchText] = useState(''); - const [selectedValue, setSelectedValue] = useState([]); + const [selectedValue, setSelectedValue] = useState( + transformToOrderByStringValues(query.orderBy) || [], + ); const { data, isFetching } = useQuery( [QueryBuilderKeys.GET_AGGREGATE_KEYS, searchText], diff --git a/frontend/src/container/TimeSeriesView/TimeSeriesView.tsx b/frontend/src/container/TimeSeriesView/TimeSeriesView.tsx index 398823205f..ca01a0156c 100644 --- a/frontend/src/container/TimeSeriesView/TimeSeriesView.tsx +++ b/frontend/src/container/TimeSeriesView/TimeSeriesView.tsx @@ -21,7 +21,7 @@ function TimeSeriesView({ }, ], }), - [data], + [data?.payload?.data?.result], ); return ( diff --git a/frontend/src/container/TimeSeriesView/index.tsx b/frontend/src/container/TimeSeriesView/index.tsx index b5a15e7751..5212334a4d 100644 --- a/frontend/src/container/TimeSeriesView/index.tsx +++ b/frontend/src/container/TimeSeriesView/index.tsx @@ -1,10 +1,7 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; -import { PANEL_TYPES_QUERY } from 'constants/queryBuilderQueryNames'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; -import useUrlQueryData from 'hooks/useUrlQueryData'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { DataSource } from 'types/common/queryBuilder'; @@ -15,22 +12,17 @@ import TimeSeriesView from './TimeSeriesView'; function TimeSeriesViewContainer({ dataSource = DataSource.TRACES, }: TimeSeriesViewProps): JSX.Element { - const { stagedQuery } = useQueryBuilder(); + const { stagedQuery, panelType } = useQueryBuilder(); const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector< AppState, GlobalReducer >((state) => state.globalTime); - const { queryData: panelTypeParam } = useUrlQueryData( - PANEL_TYPES_QUERY, - PANEL_TYPES.TIME_SERIES, - ); - const { data, isLoading, isError } = useGetQueryRange( { query: stagedQuery || initialQueriesMap[dataSource], - graphType: panelTypeParam, + graphType: panelType || PANEL_TYPES.TIME_SERIES, selectedTime: 'GLOBAL_TIME', globalSelectedInterval: globalSelectedTime, params: { @@ -45,7 +37,7 @@ function TimeSeriesViewContainer({ minTime, stagedQuery, ], - enabled: !!stagedQuery && panelTypeParam === PANEL_TYPES.TIME_SERIES, + enabled: !!stagedQuery && panelType === PANEL_TYPES.TIME_SERIES, }, ); diff --git a/frontend/src/container/TracesExplorer/ListView/index.tsx b/frontend/src/container/TracesExplorer/ListView/index.tsx index 674184f749..e93b11b1f4 100644 --- a/frontend/src/container/TracesExplorer/ListView/index.tsx +++ b/frontend/src/container/TracesExplorer/ListView/index.tsx @@ -65,7 +65,8 @@ function ListView(): JSX.Element { paginationQueryData, options?.selectColumns, ], - enabled: !!stagedQuery && panelType === PANEL_TYPES.LIST, + enabled: + !!stagedQuery && panelType === PANEL_TYPES.LIST && !!options?.selectColumns, }, ); diff --git a/frontend/src/container/TracesExplorer/ListView/styles.ts b/frontend/src/container/TracesExplorer/ListView/styles.ts index 834dd5209e..292b04b1f9 100644 --- a/frontend/src/container/TracesExplorer/ListView/styles.ts +++ b/frontend/src/container/TracesExplorer/ListView/styles.ts @@ -15,3 +15,7 @@ export const Container = styled.div` export const ErrorText = styled(Typography)` text-align: center; `; + +export const DateText = styled(Typography)` + min-width: 145px; +`; diff --git a/frontend/src/container/TracesExplorer/ListView/utils.tsx b/frontend/src/container/TracesExplorer/ListView/utils.tsx index 59f36a88ab..eb6be9a90d 100644 --- a/frontend/src/container/TracesExplorer/ListView/utils.tsx +++ b/frontend/src/container/TracesExplorer/ListView/utils.tsx @@ -9,6 +9,8 @@ import { RowData } from 'lib/query/createTableColumnsFromQuery'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { QueryDataV3 } from 'types/api/widgets/getQuery'; +import { DateText } from './styles'; + export const transformDataWithDate = (data: QueryDataV3[]): QueryDataV3[] => data.map((query) => ({ ...query, @@ -78,9 +80,10 @@ export const modifyColumns = ( if (key === 'date') { return { ...column, + width: 145, render: (date: string): JSX.Element => { const day = dayjs(date); - return {day.format('YYYY/MM/DD HH:mm:ss')}; + return {day.format('YYYY/MM/DD HH:mm:ss')}; }, }; } diff --git a/frontend/src/hooks/queryBuilder/useQueryOperations.ts b/frontend/src/hooks/queryBuilder/useQueryOperations.ts index 540614d838..02af0118d0 100644 --- a/frontend/src/hooks/queryBuilder/useQueryOperations.ts +++ b/frontend/src/hooks/queryBuilder/useQueryOperations.ts @@ -57,9 +57,16 @@ export const useQueryOperations: UseQueryOperations = ({ query, index }) => { ); const getNewListOfAdditionalFilters = useCallback( - (dataSource: DataSource): string[] => - mapOfFilters[dataSource].map((item) => item.text), - [], + (dataSource: DataSource): string[] => { + const listOfFilters = mapOfFilters[dataSource].map((item) => item.text); + + if (panelType === PANEL_TYPES.LIST) { + return listOfFilters.filter((filter) => filter !== 'Aggregation interval'); + } + + return listOfFilters; + }, + [panelType], ); const handleChangeAggregatorAttribute = useCallback( diff --git a/frontend/src/pages/TracesExplorer/index.tsx b/frontend/src/pages/TracesExplorer/index.tsx index c70f318dc0..179a9a93e0 100644 --- a/frontend/src/pages/TracesExplorer/index.tsx +++ b/frontend/src/pages/TracesExplorer/index.tsx @@ -52,15 +52,26 @@ function TracesExplorer(): JSX.Element { return groupByCount > 0; }, [currentQuery]); - const defaultQuery = useMemo( - () => - updateAllQueriesOperators( - initialQueriesMap.traces, - PANEL_TYPES.LIST, - DataSource.TRACES, - ), - [updateAllQueriesOperators], - ); + const defaultQuery = useMemo(() => { + const query = updateAllQueriesOperators( + initialQueriesMap.traces, + PANEL_TYPES.LIST, + DataSource.TRACES, + ); + + return { + ...query, + builder: { + ...query.builder, + queryData: [ + { + ...query.builder.queryData[0], + orderBy: [{ columnName: 'timestamp', order: 'desc' }], + }, + ], + }, + }; + }, [updateAllQueriesOperators]); const tabsItems = getTabsItems({ isListViewDisabled: isMultipleQueries || isGroupByExist,