diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx index 10adefa7c1..a61255705a 100644 --- a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx +++ b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx @@ -1,146 +1,59 @@ -import { SOMETHING_WENT_WRONG } from 'constants/api'; import { QueryParams } from 'constants/query'; import { PANEL_TYPES } from 'constants/queryBuilder'; -import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard'; -import { useNotifications } from 'hooks/useNotifications'; import createQueryParams from 'lib/createQueryParams'; import history from 'lib/history'; import { useDashboard } from 'providers/Dashboard/Dashboard'; import { LogsAggregatorOperator } from 'types/common/queryBuilder'; import { v4 as uuid } from 'uuid'; -import { - listViewInitialLogQuery, - listViewInitialTraceQuery, - PANEL_TYPES_INITIAL_QUERY, -} from './constants'; +import { PANEL_TYPES_INITIAL_QUERY } from './constants'; import menuItems from './menuItems'; import { Card, Container, Text } from './styles'; function DashboardGraphSlider(): JSX.Element { - const { - handleToggleDashboardSlider, - layouts, - selectedDashboard, - } = useDashboard(); - - const { data } = selectedDashboard || {}; - - const { notifications } = useNotifications(); - - const updateDashboardMutation = useUpdateDashboard(); + const { handleToggleDashboardSlider } = useDashboard(); // eslint-disable-next-line sonarjs/cognitive-complexity const onClickHandler = (name: PANEL_TYPES) => (): void => { const id = uuid(); - - updateDashboardMutation.mutateAsync( - { - uuid: selectedDashboard?.uuid || '', - data: { - title: data?.title || '', - variables: data?.variables || {}, - description: data?.description || '', - name: data?.name || '', - tags: data?.tags || [], - version: data?.version || 'v3', - layout: [ + handleToggleDashboardSlider(false); + const queryParamsLog = { + graphType: name, + widgetId: id, + [QueryParams.compositeQuery]: JSON.stringify({ + ...PANEL_TYPES_INITIAL_QUERY[name], + builder: { + ...PANEL_TYPES_INITIAL_QUERY[name].builder, + queryData: [ { - i: id, - w: 6, - x: 0, - h: 3, - y: 0, - }, - ...(layouts.filter((layout) => layout.i !== PANEL_TYPES.EMPTY_WIDGET) || - []), - ], - widgets: [ - ...(data?.widgets || []), - { - id, - title: '', - description: '', - isStacked: false, - nullZeroValues: '', - opacity: '', - panelTypes: name, - query: - name === PANEL_TYPES.LIST - ? listViewInitialLogQuery - : PANEL_TYPES_INITIAL_QUERY[name], - timePreferance: 'GLOBAL_TIME', - softMax: null, - softMin: null, - selectedLogFields: [ - { - dataType: 'string', - type: '', - name: 'body', - }, - { - dataType: 'string', - type: '', - name: 'timestamp', - }, - ], - selectedTracesFields: [ - ...listViewInitialTraceQuery.builder.queryData[0].selectColumns, - ], + ...PANEL_TYPES_INITIAL_QUERY[name].builder.queryData[0], + aggregateOperator: LogsAggregatorOperator.NOOP, + orderBy: [{ columnName: 'timestamp', order: 'desc' }], + offset: 0, + pageSize: 100, }, ], }, - }, - { - onSuccess: (data) => { - if (data.payload) { - handleToggleDashboardSlider(false); - const queryParamsLog = { - graphType: name, - widgetId: id, - [QueryParams.compositeQuery]: JSON.stringify({ - ...PANEL_TYPES_INITIAL_QUERY[name], - builder: { - ...PANEL_TYPES_INITIAL_QUERY[name].builder, - queryData: [ - { - ...PANEL_TYPES_INITIAL_QUERY[name].builder.queryData[0], - aggregateOperator: LogsAggregatorOperator.NOOP, - orderBy: [{ columnName: 'timestamp', order: 'desc' }], - offset: 0, - pageSize: 100, - }, - ], - }, - }), - }; + }), + }; - const queryParams = { - graphType: name, - widgetId: id, - [QueryParams.compositeQuery]: JSON.stringify( - PANEL_TYPES_INITIAL_QUERY[name], - ), - }; + const queryParams = { + graphType: name, + widgetId: id, + [QueryParams.compositeQuery]: JSON.stringify( + PANEL_TYPES_INITIAL_QUERY[name], + ), + }; - if (name === PANEL_TYPES.LIST) { - history.push( - `${history.location.pathname}/new?${createQueryParams(queryParamsLog)}`, - ); - } else { - history.push( - `${history.location.pathname}/new?${createQueryParams(queryParams)}`, - ); - } - } - }, - onError: () => { - notifications.success({ - message: SOMETHING_WENT_WRONG, - }); - }, - }, - ); + if (name === PANEL_TYPES.LIST) { + history.push( + `${history.location.pathname}/new?${createQueryParams(queryParamsLog)}`, + ); + } else { + history.push( + `${history.location.pathname}/new?${createQueryParams(queryParams)}`, + ); + } }; return ( diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx index 7c9fca416e..8819cbf0f9 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx @@ -4,6 +4,7 @@ import { Button, Tabs, Tooltip, Typography } from 'antd'; import TextToolTip from 'components/TextToolTip'; import { PANEL_TYPES } from 'constants/queryBuilder'; import { QBShortcuts } from 'constants/shortcuts/QBShortcuts'; +import { getDefaultWidgetData } from 'container/NewWidget/utils'; import { QueryBuilder } from 'container/QueryBuilder'; import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces'; import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys'; @@ -11,6 +12,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl'; import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval'; import useUrlQuery from 'hooks/useUrlQuery'; +import { defaultTo } from 'lodash-es'; import { Atom, Play, Terminal } from 'lucide-react'; import { useDashboard } from 'providers/Dashboard/Dashboard'; import { @@ -55,8 +57,11 @@ function QuerySection({ const getWidget = useCallback(() => { const widgetId = urlQuery.get('widgetId'); - return widgets?.find((e) => e.id === widgetId); - }, [widgets, urlQuery]); + return defaultTo( + widgets?.find((e) => e.id === widgetId), + getDefaultWidgetData(widgetId || '', selectedGraph), + ); + }, [urlQuery, widgets, selectedGraph]); const selectedWidget = getWidget() as Widgets; diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx index aaf992a8dd..77a25c90b3 100644 --- a/frontend/src/container/NewWidget/index.tsx +++ b/frontend/src/container/NewWidget/index.tsx @@ -14,6 +14,7 @@ import { MESSAGE, useIsFeatureDisabled } from 'hooks/useFeatureFlag'; import { useNotifications } from 'hooks/useNotifications'; import useUrlQuery from 'hooks/useUrlQuery'; import history from 'lib/history'; +import { defaultTo, isUndefined } from 'lodash-es'; import { DashboardWidgetPageParams } from 'pages/DashboardWidget'; import { useDashboard } from 'providers/Dashboard/Dashboard'; import { @@ -45,7 +46,11 @@ import { RightContainerWrapper, } from './styles'; import { NewWidgetProps } from './types'; -import { getIsQueryModified, handleQueryChange } from './utils'; +import { + getDefaultWidgetData, + getIsQueryModified, + handleQueryChange, +} from './utils'; function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element { const { @@ -80,10 +85,26 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element { const { dashboardId } = useParams(); + const [isNewDashboard, setIsNewDashboard] = useState(false); + + useEffect(() => { + const widgetId = query.get('widgetId'); + const selectedWidget = widgets?.find((e) => e.id === widgetId); + const isWidgetNotPresent = isUndefined(selectedWidget); + if (isWidgetNotPresent) { + setIsNewDashboard(true); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const getWidget = useCallback(() => { const widgetId = query.get('widgetId'); - return widgets?.find((e) => e.id === widgetId); - }, [query, widgets]); + const selectedWidget = widgets?.find((e) => e.id === widgetId); + return defaultTo( + selectedWidget, + getDefaultWidgetData(widgetId || '', selectedGraph), + ); + }, [query, selectedGraph, widgets]); const [selectedWidget, setSelectedWidget] = useState(getWidget()); @@ -227,6 +248,20 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element { return; } + const widgetId = query.get('widgetId'); + let updatedLayout = selectedDashboard.data.layout || []; + if (isNewDashboard) { + updatedLayout = [ + { + i: widgetId || '', + w: 6, + x: 0, + h: 3, + y: 0, + }, + ...updatedLayout, + ]; + } const dashboard: Dashboard = { ...selectedDashboard, uuid: selectedDashboard.uuid, @@ -254,6 +289,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element { }, ...afterWidgets, ], + layout: [...updatedLayout], }, }; @@ -274,6 +310,8 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element { }); }, [ selectedDashboard, + query, + isNewDashboard, preWidgets, selectedWidget, selectedTime.enum, diff --git a/frontend/src/container/NewWidget/utils.ts b/frontend/src/container/NewWidget/utils.ts index bfead4a36f..64d884de15 100644 --- a/frontend/src/container/NewWidget/utils.ts +++ b/frontend/src/container/NewWidget/utils.ts @@ -3,7 +3,13 @@ import { initialQueryBuilderFormValuesMap, PANEL_TYPES, } from 'constants/queryBuilder'; +import { + listViewInitialLogQuery, + listViewInitialTraceQuery, + PANEL_TYPES_INITIAL_QUERY, +} from 'container/NewDashboard/ComponentsSlider/constants'; import { isEqual, set, unset } from 'lodash-es'; +import { Widgets } from 'types/api/dashboard/getAll'; import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource } from 'types/common/queryBuilder'; @@ -302,3 +308,38 @@ export function handleQueryChange( }, }; } + +export const getDefaultWidgetData = ( + id: string, + name: PANEL_TYPES, +): Widgets => ({ + id, + title: '', + description: '', + isStacked: false, + nullZeroValues: '', + opacity: '', + panelTypes: name, + query: + name === PANEL_TYPES.LIST + ? listViewInitialLogQuery + : PANEL_TYPES_INITIAL_QUERY[name], + timePreferance: 'GLOBAL_TIME', + softMax: null, + softMin: null, + selectedLogFields: [ + { + dataType: 'string', + type: '', + name: 'body', + }, + { + dataType: 'string', + type: '', + name: 'timestamp', + }, + ], + selectedTracesFields: [ + ...listViewInitialTraceQuery.builder.queryData[0].selectColumns, + ], +}); diff --git a/frontend/src/pages/DashboardWidget/index.tsx b/frontend/src/pages/DashboardWidget/index.tsx index f26bc6b752..d32ded450b 100644 --- a/frontend/src/pages/DashboardWidget/index.tsx +++ b/frontend/src/pages/DashboardWidget/index.tsx @@ -49,15 +49,11 @@ function DashboardWidget(): JSX.Element | null { ); } - if (selectedWidget === undefined) { - return null; - } - return ( ); }