diff --git a/frontend/src/assets/Dashboard/Table.tsx b/frontend/src/assets/Dashboard/Table.tsx new file mode 100644 index 0000000000..e1ade19994 --- /dev/null +++ b/frontend/src/assets/Dashboard/Table.tsx @@ -0,0 +1,18 @@ +function Table(): JSX.Element { + return ( + + + + ); +} + +export default Table; diff --git a/frontend/src/assets/Dashboard/TimeSeries.tsx b/frontend/src/assets/Dashboard/TimeSeries.tsx index 54d8100a63..a9ddbc5717 100644 --- a/frontend/src/assets/Dashboard/TimeSeries.tsx +++ b/frontend/src/assets/Dashboard/TimeSeries.tsx @@ -1,33 +1,16 @@ function TimeSeries(): JSX.Element { return ( - - - - - - - + ); } diff --git a/frontend/src/assets/Dashboard/Value.tsx b/frontend/src/assets/Dashboard/Value.tsx index c43b63ac13..708e16d6b9 100644 --- a/frontend/src/assets/Dashboard/Value.tsx +++ b/frontend/src/assets/Dashboard/Value.tsx @@ -1,26 +1,22 @@ -import { CSSProperties } from 'react'; - -function Value(props: ValueProps): JSX.Element { - const { fillColor } = props; - +function Value(): JSX.Element { return ( + ); } -interface ValueProps { - fillColor: CSSProperties['color']; -} - export default Value; diff --git a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx index c27d69f8ba..b8d66c4334 100644 --- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx +++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx @@ -3,7 +3,6 @@ import { StaticLineProps } from 'components/Graph'; import Spinner from 'components/Spinner'; import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; import GridPanelSwitch from 'container/GridPanelSwitch'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems'; import { Time } from 'container/TopNav/DateTimeSelection/config'; import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange'; @@ -18,7 +17,7 @@ import { ChartContainer, FailedMessageContainer } from './styles'; export interface ChartPreviewProps { name: string; query: Query | null; - graphType?: GRAPH_TYPES; + graphType?: PANEL_TYPES; selectedTime?: timePreferenceType; selectedInterval?: Time; headline?: JSX.Element; diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts b/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts index e2b3384af3..377e891a35 100644 --- a/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts +++ b/frontend/src/container/GridGraphLayout/Graph/FullView/styles.ts @@ -1,9 +1,8 @@ import { PANEL_TYPES } from 'constants/queryBuilder'; -import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems'; import styled, { css, FlattenSimpleInterpolation } from 'styled-components'; interface Props { - $panelType: ITEMS; + $panelType: PANEL_TYPES; } export const NotFoundContainer = styled.div` diff --git a/frontend/src/container/GridGraphLayout/index.tsx b/frontend/src/container/GridGraphLayout/index.tsx index 6b6ec7d883..f728781a28 100644 --- a/frontend/src/container/GridGraphLayout/index.tsx +++ b/frontend/src/container/GridGraphLayout/index.tsx @@ -1,6 +1,7 @@ /* eslint-disable react/no-unstable-nested-components */ import updateDashboardApi from 'api/dashboard/update'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import useComponentPermission from 'hooks/useComponentPermission'; import { useNotifications } from 'hooks/useNotifications'; import { @@ -260,7 +261,7 @@ function GridGraph(props: Props): JSX.Element { { data, generateWidgetId: id, - graphType: 'EMPTY_WIDGET', + graphType: PANEL_TYPES.EMPTY_WIDGET, selectedDashboard, layout, isRedirected: false, diff --git a/frontend/src/container/GridGraphLayout/styles.ts b/frontend/src/container/GridGraphLayout/styles.ts index ca54bd6140..a08ffdc361 100644 --- a/frontend/src/container/GridGraphLayout/styles.ts +++ b/frontend/src/container/GridGraphLayout/styles.ts @@ -1,14 +1,13 @@ import { Button as ButtonComponent, Card as CardComponent, Space } from 'antd'; import { PANEL_TYPES } from 'constants/queryBuilder'; import { StyledCSS } from 'container/GantChart/Trace/styles'; -import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems'; import RGL, { WidthProvider } from 'react-grid-layout'; import styled, { css, FlattenSimpleInterpolation } from 'styled-components'; const ReactGridLayoutComponent = WidthProvider(RGL); interface CardProps { - $panelType: ITEMS; + $panelType: PANEL_TYPES; } export const Card = styled(CardComponent)` diff --git a/frontend/src/container/GridGraphLayout/utils.ts b/frontend/src/container/GridGraphLayout/utils.ts index 6f6910b3b5..2caa48b705 100644 --- a/frontend/src/container/GridGraphLayout/utils.ts +++ b/frontend/src/container/GridGraphLayout/utils.ts @@ -1,7 +1,6 @@ import { NotificationInstance } from 'antd/es/notification/interface'; import updateDashboardApi from 'api/dashboard/update'; -import { initialQueriesMap } from 'constants/queryBuilder'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; +import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; import { Layout } from 'react-grid-layout'; import store from 'store'; import { Dashboard, Widgets } from 'types/api/dashboard/getAll'; @@ -69,7 +68,7 @@ export const UpdateDashboard = async ( interface UpdateDashboardProps { data: Dashboard['data']; - graphType: GRAPH_TYPES; + graphType: PANEL_TYPES; generateWidgetId: string; layout: Layout[]; selectedDashboard: Dashboard; diff --git a/frontend/src/container/GridPanelSwitch/types.ts b/frontend/src/container/GridPanelSwitch/types.ts index 26dca8be31..5f16fc5b2d 100644 --- a/frontend/src/container/GridPanelSwitch/types.ts +++ b/frontend/src/container/GridPanelSwitch/types.ts @@ -6,14 +6,13 @@ import { } from 'components/Graph'; import { GridTableComponentProps } from 'container/GridTableComponent/types'; import { GridValueComponentProps } from 'container/GridValueComponent/types'; -import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems'; import { Query } from 'types/api/queryBuilder/queryBuilderData'; import { QueryDataV3 } from 'types/api/widgets/getQuery'; import { PANEL_TYPES } from '../../constants/queryBuilder'; export type GridPanelSwitchProps = { - panelType: ITEMS; + panelType: PANEL_TYPES; data: ChartData; title?: string; opacity?: string; diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx index a2fadefc53..0523b4d89e 100644 --- a/frontend/src/container/LogsExplorerViews/index.tsx +++ b/frontend/src/container/LogsExplorerViews/index.tsx @@ -17,7 +17,6 @@ import GoToTop from 'container/GoToTop'; import LogsExplorerChart from 'container/LogsExplorerChart'; import LogsExplorerList from 'container/LogsExplorerList'; import LogsExplorerTable from 'container/LogsExplorerTable'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { SIGNOZ_VALUE } from 'container/QueryBuilder/filters/OrderByFilter/constants'; import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView'; import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard'; @@ -179,7 +178,7 @@ function LogsExplorerViews(): JSX.Element { }, []); const getUpdateQuery = useCallback( - (newPanelType: GRAPH_TYPES): Query => { + (newPanelType: PANEL_TYPES): Query => { let query = updateAllQueriesOperators( currentQuery, newPanelType, @@ -201,7 +200,7 @@ function LogsExplorerViews(): JSX.Element { const handleChangeView = useCallback( (type: string) => { - const newPanelType = type as GRAPH_TYPES; + const newPanelType = type as PANEL_TYPES; if (newPanelType === panelType) return; diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx index 8ede8520b7..a5c48ed307 100644 --- a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx +++ b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx @@ -1,6 +1,4 @@ -/* eslint-disable @typescript-eslint/naming-convention */ - -import { initialQueriesMap } from 'constants/queryBuilder'; +import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useNotifications } from 'hooks/useNotifications'; @@ -17,7 +15,7 @@ import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import DashboardReducer from 'types/reducer/dashboards'; -import menuItems, { ITEMS } from './menuItems'; +import menuItems from './menuItems'; import { Card, Container, Text } from './styles'; function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element { @@ -31,7 +29,7 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element { const { data } = selectedDashboard; const onClickHandler = useCallback( - async (name: ITEMS) => { + (name: PANEL_TYPES) => (): void => { try { const emptyLayout = data.layout?.find((e) => e.i === 'empty'); @@ -65,14 +63,7 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element { return ( {menuItems.map(({ name, Icon, display }) => ( - { - event.preventDefault(); - onClickHandler(name); - }} - id={name} - key={name} - > + {display} @@ -81,8 +72,6 @@ function DashboardGraphSlider({ toggleAddWidget }: Props): JSX.Element { ); } -export type GRAPH_TYPES = ITEMS; - interface DispatchProps { toggleAddWidget: ( props: ToggleAddWidgetProps, diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts index baadf921fe..560da8deef 100644 --- a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts +++ b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts @@ -1,4 +1,5 @@ -import TimeSeries from 'assets/Dashboard/TimeSeries'; +import TableIcon from 'assets/Dashboard/Table'; +import TimeSeriesIcon from 'assets/Dashboard/TimeSeries'; import ValueIcon from 'assets/Dashboard/Value'; import { PANEL_TYPES } from 'constants/queryBuilder'; import { CSSProperties } from 'react'; @@ -6,7 +7,7 @@ import { CSSProperties } from 'react'; const Items: ItemsProps[] = [ { name: PANEL_TYPES.TIME_SERIES, - Icon: TimeSeries, + Icon: TimeSeriesIcon, display: 'Time Series', }, { @@ -14,19 +15,11 @@ const Items: ItemsProps[] = [ Icon: ValueIcon, display: 'Value', }, - { name: PANEL_TYPES.TABLE, Icon: TimeSeries, display: 'Table' }, + { name: PANEL_TYPES.TABLE, Icon: TableIcon, display: 'Table' }, ]; -export type ITEMS = - | 'graph' - | 'value' - | 'list' - | 'table' - | 'EMPTY_WIDGET' - | 'trace'; - interface ItemsProps { - name: ITEMS; + name: PANEL_TYPES; Icon: (props: IconProps) => JSX.Element; display: string; } diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/styles.ts b/frontend/src/container/NewDashboard/ComponentsSlider/styles.ts index ad59f774a8..d7d3c6a7f2 100644 --- a/frontend/src/container/NewDashboard/ComponentsSlider/styles.ts +++ b/frontend/src/container/NewDashboard/ComponentsSlider/styles.ts @@ -16,6 +16,7 @@ export const Card = styled(CardComponent)` display: flex; flex-direction: column; justify-content: space-between; + align-items: center; } `; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx index 51501c8b39..52f4bbc92c 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx @@ -1,6 +1,6 @@ import { Button, Tabs, Typography } from 'antd'; import TextToolTip from 'components/TextToolTip'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import { WidgetGraphProps } from 'container/NewWidget/types'; import { QueryBuilder } from 'container/QueryBuilder'; import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces'; @@ -170,7 +170,7 @@ const mapDispatchToProps = ( }); interface QueryProps extends DispatchProps { - selectedGraph: GRAPH_TYPES; + selectedGraph: PANEL_TYPES; selectedTime: WidgetGraphProps['selectedTime']; } diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx index 6359295fae..219d4e011b 100644 --- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/PlotTag.tsx @@ -1,4 +1,4 @@ -import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import { EQueryType } from 'types/common/dashboard'; import QueryTypeTag from '../QueryTypeTag'; @@ -6,7 +6,7 @@ import { PlotTagWrapperStyled } from './styles'; interface IPlotTagProps { queryType: EQueryType; - panelType: ITEMS; + panelType: PANEL_TYPES; } function PlotTag({ queryType, panelType }: IPlotTagProps): JSX.Element | null { diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts index b3fd9fcb2d..58239ad942 100644 --- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts +++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/styles.ts @@ -1,10 +1,9 @@ import { Card, Tooltip } from 'antd'; import { PANEL_TYPES } from 'constants/queryBuilder'; -import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems'; import styled from 'styled-components'; interface Props { - $panelType: ITEMS; + $panelType: PANEL_TYPES; } export const Container = styled(Card)` diff --git a/frontend/src/container/NewWidget/RightContainer/index.tsx b/frontend/src/container/NewWidget/RightContainer/index.tsx index 0f9ab1c597..b2fff041f9 100644 --- a/frontend/src/container/NewWidget/RightContainer/index.tsx +++ b/frontend/src/container/NewWidget/RightContainer/index.tsx @@ -1,10 +1,8 @@ import { Input, Select } from 'antd'; import InputComponent from 'components/Input'; import TimePreference from 'components/TimePreferenceDropDown'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; -import GraphTypes, { - ITEMS, -} from 'container/NewDashboard/ComponentsSlider/menuItems'; +import { PANEL_TYPES } from 'constants/queryBuilder'; +import GraphTypes from 'container/NewDashboard/ComponentsSlider/menuItems'; import { Dispatch, SetStateAction, useCallback } from 'react'; import { Container, Title } from './styles'; @@ -144,12 +142,12 @@ interface RightContainerProps { setOpacity: Dispatch>; selectedNullZeroValue: string; setSelectedNullZeroValue: Dispatch>; - selectedGraph: GRAPH_TYPES; + selectedGraph: PANEL_TYPES; setSelectedTime: Dispatch>; selectedTime: timePreferance; yAxisUnit: string; setYAxisUnit: Dispatch>; - setGraphHandler: (type: ITEMS) => void; + setGraphHandler: (type: PANEL_TYPES) => void; } export default RightContainer; diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx index 17cb4ea884..eb49ec8bd0 100644 --- a/frontend/src/container/NewWidget/index.tsx +++ b/frontend/src/container/NewWidget/index.tsx @@ -1,8 +1,8 @@ import { LockFilled } from '@ant-design/icons'; import { Button, Modal, Tooltip, Typography } from 'antd'; import { FeatureKeys } from 'constants/features'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import ROUTES from 'constants/routes'; -import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { MESSAGE, useIsFeatureDisabled } from 'hooks/useFeatureFlag'; import { useNotifications } from 'hooks/useNotifications'; @@ -148,7 +148,7 @@ function NewWidget({ selectedGraph, saveSettingOfPanel }: Props): JSX.Element { history.push(generatePath(ROUTES.DASHBOARD, { dashboardId })); }, [dashboardId, dispatch]); - const setGraphHandler = (type: ITEMS): void => { + const setGraphHandler = (type: PANEL_TYPES): void => { const params = new URLSearchParams(search); params.set('graphType', type); history.push({ search: params.toString() }); diff --git a/frontend/src/container/NewWidget/types.ts b/frontend/src/container/NewWidget/types.ts index ca6a121382..e4fce1ba89 100644 --- a/frontend/src/container/NewWidget/types.ts +++ b/frontend/src/container/NewWidget/types.ts @@ -1,10 +1,10 @@ -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import { Widgets } from 'types/api/dashboard/getAll'; import { timePreferance } from './RightContainer/timeItems'; export interface NewWidgetProps { - selectedGraph: GRAPH_TYPES; + selectedGraph: PANEL_TYPES; yAxisUnit: Widgets['yAxisUnit']; } diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts index fec93c7106..4758ad882b 100644 --- a/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts +++ b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts @@ -1,4 +1,4 @@ -import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import { ReactNode } from 'react'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource } from 'types/common/queryBuilder'; @@ -14,7 +14,7 @@ export type QueryBuilderConfig = export type QueryBuilderProps = { config?: QueryBuilderConfig; - panelType: ITEMS; + panelType: PANEL_TYPES; actions?: ReactNode; filterConfigs?: Partial< Record diff --git a/frontend/src/hooks/queryBuilder/useGetExplorerQueryRange.ts b/frontend/src/hooks/queryBuilder/useGetExplorerQueryRange.ts index 92789b960e..408e598727 100644 --- a/frontend/src/hooks/queryBuilder/useGetExplorerQueryRange.ts +++ b/frontend/src/hooks/queryBuilder/useGetExplorerQueryRange.ts @@ -1,6 +1,5 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { useMemo } from 'react'; import { UseQueryOptions, UseQueryResult } from 'react-query'; import { useSelector } from 'react-redux'; @@ -15,7 +14,7 @@ import { useQueryBuilder } from './useQueryBuilder'; export const useGetExplorerQueryRange = ( requestData: Query | null, - panelType: GRAPH_TYPES | null, + panelType: PANEL_TYPES | null, options?: UseQueryOptions, Error>, ): UseQueryResult, Error> => { const { isEnabledQuery } = useQueryBuilder(); diff --git a/frontend/src/hooks/queryBuilder/useGetPanelTypesQueryParam.ts b/frontend/src/hooks/queryBuilder/useGetPanelTypesQueryParam.ts index 560790e574..8b5aed7a44 100644 --- a/frontend/src/hooks/queryBuilder/useGetPanelTypesQueryParam.ts +++ b/frontend/src/hooks/queryBuilder/useGetPanelTypesQueryParam.ts @@ -1,11 +1,11 @@ +import { PANEL_TYPES } from 'constants/queryBuilder'; import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import useUrlQuery from 'hooks/useUrlQuery'; import { useMemo } from 'react'; -export const useGetPanelTypesQueryParam = ( +export const useGetPanelTypesQueryParam = ( defaultPanelType?: T, -): T extends undefined ? GRAPH_TYPES | null : GRAPH_TYPES => { +): T extends undefined ? PANEL_TYPES | null : PANEL_TYPES => { const urlQuery = useUrlQuery(); return useMemo(() => { diff --git a/frontend/src/lib/getStartEndRangeTime.ts b/frontend/src/lib/getStartEndRangeTime.ts index 486b6d0784..13a2d40031 100644 --- a/frontend/src/lib/getStartEndRangeTime.ts +++ b/frontend/src/lib/getStartEndRangeTime.ts @@ -1,4 +1,4 @@ -import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems'; import { Time } from 'container/TopNav/DateTimeSelection/config'; import store from 'store'; @@ -36,7 +36,7 @@ const getStartEndRangeTime = ({ interface GetStartEndRangeTimesProps { type?: timePreferenceType; - graphType?: ITEMS | null; + graphType?: PANEL_TYPES | null; interval?: Time; } diff --git a/frontend/src/lib/newQueryBuilder/getOperatorsBySourceAndPanelType.ts b/frontend/src/lib/newQueryBuilder/getOperatorsBySourceAndPanelType.ts index dd6869847b..e415d8f7f4 100644 --- a/frontend/src/lib/newQueryBuilder/getOperatorsBySourceAndPanelType.ts +++ b/frontend/src/lib/newQueryBuilder/getOperatorsBySourceAndPanelType.ts @@ -1,11 +1,10 @@ import { mapOfOperators, PANEL_TYPES } from 'constants/queryBuilder'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { DataSource, StringOperators } from 'types/common/queryBuilder'; import { SelectOption } from 'types/common/select'; type GetQueryOperatorsParams = { dataSource: DataSource; - panelType: GRAPH_TYPES; + panelType: PANEL_TYPES; }; // Modify this function if need special conditions for filtering of the operators diff --git a/frontend/src/pages/DashboardWidget/index.tsx b/frontend/src/pages/DashboardWidget/index.tsx index a4ed88e264..fc8a712b63 100644 --- a/frontend/src/pages/DashboardWidget/index.tsx +++ b/frontend/src/pages/DashboardWidget/index.tsx @@ -1,7 +1,7 @@ import { Card, Typography } from 'antd'; import Spinner from 'components/Spinner'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import ROUTES from 'constants/routes'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import NewWidget from 'container/NewWidget'; import history from 'lib/history'; import { useEffect, useRef, useState } from 'react'; @@ -18,7 +18,7 @@ function DashboardWidget({ getDashboard }: NewDashboardProps): JSX.Element { const { search } = useLocation(); const { dashboardId } = useParams(); - const [selectedGraph, setSelectedGraph] = useState(); + const [selectedGraph, setSelectedGraph] = useState(); const { loading, dashboards, error, errorMessage } = useSelector< AppState, DashboardReducer @@ -34,7 +34,7 @@ function DashboardWidget({ getDashboard }: NewDashboardProps): JSX.Element { useEffect(() => { const params = new URLSearchParams(search); - const graphType = params.get('graphType') as GRAPH_TYPES | null; + const graphType = params.get('graphType') as PANEL_TYPES | null; if (graphType === null) { history.push(generatePath(ROUTES.DASHBOARD, { dashboardId })); diff --git a/frontend/src/pages/TracesExplorer/index.tsx b/frontend/src/pages/TracesExplorer/index.tsx index 855f82ba40..6cb81093f3 100644 --- a/frontend/src/pages/TracesExplorer/index.tsx +++ b/frontend/src/pages/TracesExplorer/index.tsx @@ -10,7 +10,6 @@ import { import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import ROUTES from 'constants/routes'; import ExportPanel from 'container/ExportPanel'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { SIGNOZ_VALUE } from 'container/QueryBuilder/filters/OrderByFilter/constants'; import QuerySection from 'container/TracesExplorer/QuerySection'; import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard'; @@ -149,7 +148,7 @@ function TracesExplorer(): JSX.Element { ); const getUpdateQuery = useCallback( - (newPanelType: GRAPH_TYPES): Query => { + (newPanelType: PANEL_TYPES): Query => { let query = updateAllQueriesOperators( currentQuery, newPanelType, @@ -174,7 +173,7 @@ function TracesExplorer(): JSX.Element { const handleTabChange = useCallback( (type: string): void => { - const newPanelType = type as GRAPH_TYPES; + const newPanelType = type as PANEL_TYPES; if (panelType === newPanelType) return; const query = getUpdateQuery(newPanelType); diff --git a/frontend/src/providers/QueryBuilder.tsx b/frontend/src/providers/QueryBuilder.tsx index 04d74f2f19..4de8de7d4a 100644 --- a/frontend/src/providers/QueryBuilder.tsx +++ b/frontend/src/providers/QueryBuilder.tsx @@ -14,7 +14,6 @@ import { PANEL_TYPES, } from 'constants/queryBuilder'; import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam'; import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval'; import useUrlQuery from 'hooks/useUrlQuery'; @@ -92,7 +91,7 @@ export function QueryBuilderProvider({ null, ); - const [panelType, setPanelType] = useState(null); + const [panelType, setPanelType] = useState(null); const [currentQuery, setCurrentQuery] = useState( queryState || initialQueryState, @@ -105,7 +104,7 @@ export function QueryBuilderProvider({ ( queryData: IBuilderQuery, dataSource: DataSource, - currentPanelType: GRAPH_TYPES, + currentPanelType: PANEL_TYPES, ): IBuilderQuery => { const initialOperators = getOperatorsBySourceAndPanelType({ dataSource, @@ -212,7 +211,7 @@ export function QueryBuilderProvider({ ); const updateAllQueriesOperators = useCallback( - (query: Query, panelType: GRAPH_TYPES, dataSource: DataSource): Query => { + (query: Query, panelType: PANEL_TYPES, dataSource: DataSource): Query => { const queryData = query.builder.queryData.map((item) => getElementWithActualOperator(item, dataSource, panelType), ); @@ -496,7 +495,7 @@ export function QueryBuilderProvider({ ); const handleSetConfig = useCallback( - (newPanelType: GRAPH_TYPES, dataSource: DataSource | null) => { + (newPanelType: PANEL_TYPES, dataSource: DataSource | null) => { setPanelType(newPanelType); setInitialDataSource(dataSource); }, diff --git a/frontend/src/store/actions/dashboard/getDashboard.ts b/frontend/src/store/actions/dashboard/getDashboard.ts index f84461c655..76305bae3b 100644 --- a/frontend/src/store/actions/dashboard/getDashboard.ts +++ b/frontend/src/store/actions/dashboard/getDashboard.ts @@ -1,6 +1,5 @@ import getDashboard from 'api/dashboard/get'; import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { Dispatch } from 'redux'; import AppActions from 'types/actions'; import { Props } from 'types/api/dashboard/get'; @@ -65,5 +64,5 @@ export const GetDashboard = ({ export interface GetDashboardProps { uuid: Props['uuid']; widgetId?: string; - graphType?: GRAPH_TYPES; + graphType?: PANEL_TYPES; } diff --git a/frontend/src/store/actions/dashboard/saveDashboard.ts b/frontend/src/store/actions/dashboard/saveDashboard.ts index 827a11fc64..1339a3a7b8 100644 --- a/frontend/src/store/actions/dashboard/saveDashboard.ts +++ b/frontend/src/store/actions/dashboard/saveDashboard.ts @@ -1,9 +1,9 @@ import { notification } from 'antd'; import updateDashboardApi from 'api/dashboard/update'; import { AxiosError } from 'axios'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; import ROUTES from 'constants/routes'; -import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems'; import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval'; import history from 'lib/history'; import { Layout } from 'react-grid-layout'; @@ -170,5 +170,5 @@ export interface SaveDashboardProps { widgetId: Widgets['id']; dashboardId: string; yAxisUnit: Widgets['yAxisUnit']; - graphType: ITEMS; + graphType: PANEL_TYPES; } diff --git a/frontend/src/types/api/alerts/compositeQuery.ts b/frontend/src/types/api/alerts/compositeQuery.ts index 2bb0288400..1f25718367 100644 --- a/frontend/src/types/api/alerts/compositeQuery.ts +++ b/frontend/src/types/api/alerts/compositeQuery.ts @@ -1,4 +1,4 @@ -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import { BuilderClickHouseResource, BuilderPromQLResource, @@ -11,5 +11,5 @@ export interface ICompositeMetricQuery { promQueries: BuilderPromQLResource; chQueries: BuilderClickHouseResource; queryType: EQueryType; - panelType: GRAPH_TYPES; + panelType: PANEL_TYPES; } diff --git a/frontend/src/types/api/dashboard/getAll.ts b/frontend/src/types/api/dashboard/getAll.ts index 20e2a07702..69a3dc6401 100644 --- a/frontend/src/types/api/dashboard/getAll.ts +++ b/frontend/src/types/api/dashboard/getAll.ts @@ -1,4 +1,4 @@ -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems'; import { Layout } from 'react-grid-layout'; import { Query } from 'types/api/queryBuilder/queryBuilderData'; @@ -57,7 +57,7 @@ export interface DashboardData { export interface IBaseWidget { isStacked: boolean; id: string; - panelTypes: GRAPH_TYPES; + panelTypes: PANEL_TYPES; title: string; description: string; opacity: string; diff --git a/frontend/src/types/common/queryBuilder.ts b/frontend/src/types/common/queryBuilder.ts index f607cac9f7..5e7cf57b02 100644 --- a/frontend/src/types/common/queryBuilder.ts +++ b/frontend/src/types/common/queryBuilder.ts @@ -1,4 +1,4 @@ -import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import { IBuilderFormula, IBuilderQuery, @@ -157,7 +157,7 @@ export type QueryBuilderContextType = { currentQuery: Query; stagedQuery: Query | null; initialDataSource: DataSource | null; - panelType: GRAPH_TYPES | null; + panelType: PANEL_TYPES | null; isEnabledQuery: boolean; handleSetQueryData: (index: number, queryData: IBuilderQuery) => void; handleSetFormulaData: (index: number, formulaData: IBuilderFormula) => void; @@ -167,7 +167,7 @@ export type QueryBuilderContextType = { newQueryData: IPromQLQuery | IClickHouseQuery, ) => void; handleSetConfig: ( - newPanelType: GRAPH_TYPES, + newPanelType: PANEL_TYPES, dataSource: DataSource | null, ) => void; removeQueryBuilderEntityByIndex: ( @@ -189,7 +189,7 @@ export type QueryBuilderContextType = { resetStagedQuery: () => void; updateAllQueriesOperators: ( queryData: Query, - panelType: GRAPH_TYPES, + panelType: PANEL_TYPES, dataSource: DataSource, ) => Query; updateQueriesData: (