GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-06-21 02:23:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add ability to change panel type (#2383)

Browse Source 
* feat: add ability to change panel type

* feat: add ability to change panel type

---------

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: palashgdev <palashgdev@gmail.com>
This commit is contained in:
GitStart 2023-03-07 12:25:59 +01:00 committed by GitHub
parent eff87f2666
commit c821e8bb75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/container/NewWidget/RightContainer/index.tsx
View File

@ -1,8 +1,10 @@
import { Input } from 'antd';
import { Input, Select } from 'antd';
import InputComponent from 'components/Input';
import TimePreference from 'components/TimePreferenceDropDown';
import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
import GraphTypes from 'container/NewDashboard/ComponentsSlider/menuItems';
import GraphTypes, {
ITEMS,
} from 'container/NewDashboard/ComponentsSlider/menuItems';
import React, { useCallback } from 'react';
import { Container, Title } from './styles';
@ -10,6 +12,7 @@ import { timePreferance } from './timeItems';
import YAxisUnitSelector from './YAxisUnitSelector';
const { TextArea } = Input;
const { Option } = Select;
function RightContainer({
description,
@ -21,6 +24,7 @@ function RightContainer({
selectedTime,
yAxisUnit,
setYAxisUnit,
setGraphHandler,
}: RightContainerProps): JSX.Element {
const onChangeHandler = useCallback(
(setFunc: React.Dispatch<React.SetStateAction<string>>, value: string) => {
@ -34,14 +38,18 @@ function RightContainer({
return (
<Container>
<InputComponent
labelOnTop
label="Panel Type"
size="middle"
value={selectedGraphType}
disabled
/>
<Title>Panel Type</Title>
<Select
onChange={(value: ITEMS): void => setGraphHandler(value)}
value={selectedGraph}
style={{ width: '100%', marginBottom: 24 }}
>
{GraphTypes.map((item) => (
<Option key={item.name} value={item.name}>
{item.display}
</Option>
))}
</Select>
<Title>Panel Attributes</Title>
<InputComponent
@ -140,6 +148,7 @@ interface RightContainerProps {
selectedTime: timePreferance;
yAxisUnit: string;
setYAxisUnit: React.Dispatch<React.SetStateAction<string>>;
setGraphHandler: (type: ITEMS) => void;
}
export default RightContainer;

20
frontend/src/container/NewWidget/index.tsx
View File

@ -1,6 +1,7 @@
import { Button, Modal, Typography } from 'antd';
import ROUTES from 'constants/routes';
import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems';
import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
import history from 'lib/history';
import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
@ -86,6 +87,7 @@ function NewWidget({
const [saveModal, setSaveModal] = useState(false);
const [hasUnstagedChanges, setHasUnstagedChanges] = useState(false);
const [graphType, setGraphType] = useState(selectedGraph);
const getSelectedTime = useCallback(
() =>
TimeItems.find(
@ -112,6 +114,7 @@ function NewWidget({
yAxisUnit,
widgetId: query.get('widgetId') || '',
dashboardId,
graphType,
});
}, [
saveSettingOfPanel,
@ -125,6 +128,7 @@ function NewWidget({
yAxisUnit,
query,
dashboardId,
graphType,
]);
const onClickDiscardHandler = useCallback(() => {
@ -140,7 +144,7 @@ function NewWidget({
query: selectedWidget?.query,
selectedTime: selectedTime.enum,
widgetId: selectedWidget?.id || '',
graphType: selectedGraph,
graphType,
globalSelectedInterval,
variables: getDashboardVariables(),
});
@ -149,11 +153,18 @@ function NewWidget({
selectedWidget?.query,
selectedTime.enum,
selectedWidget?.id,
selectedGraph,
getQueryResults,
globalSelectedInterval,
graphType,
]);
const setGraphHandler = (type: ITEMS): void => {
const params = new URLSearchParams(search);
params.set('graphType', type);
history.push({ search: params.toString() });
setGraphType(type);
};
useEffect(() => {
getQueryResult();
}, [getQueryResult]);
@ -173,13 +184,14 @@ function NewWidget({
<LeftContainer
handleUnstagedChanges={setHasUnstagedChanges}
selectedTime={selectedTime}
selectedGraph={selectedGraph}
selectedGraph={graphType}
yAxisUnit={yAxisUnit}
/>
</LeftContainerWrapper>
<RightContainerWrapper flex={1}>
<RightContainer
setGraphHandler={setGraphHandler}
{...{
title,
setTitle,
@ -192,7 +204,7 @@ function NewWidget({
setOpacity,
selectedNullZeroValue,
setSelectedNullZeroValue,
selectedGraph,
selectedGraph: graphType,
setSelectedTime,
selectedTime,
setYAxisUnit,

6
frontend/src/store/actions/dashboard/saveDashboard.ts
View File

@ -1,6 +1,7 @@
import updateDashboardApi from 'api/dashboard/update';
import { AxiosError } from 'axios';
import ROUTES from 'constants/routes';
import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems';
import history from 'lib/history';
import { Layout } from 'react-grid-layout';
import { generatePath } from 'react-router-dom';
@ -21,12 +22,12 @@ export const SaveDashboard = ({
widgetId,
dashboardId,
yAxisUnit,
graphType,
}: SaveDashboardProps): ((dispatch: Dispatch<AppActions>) => void) =>
// eslint-disable-next-line sonarjs/cognitive-complexity
async (dispatch: Dispatch<AppActions>): Promise<void> => {
try {
const dashboard = store.getState();
const search = new URLSearchParams(history.location.search);
const selectedDashboard = dashboard.dashboards.dashboards.find(
(e) => e.uuid === uuid,
@ -105,7 +106,7 @@ export const SaveDashboard = ({
title: updatedTitle,
timePreferance: updatedtimePreferance,
yAxisUnit: updatedYAxisUnit,
panelTypes: search.get('graphType') as Widgets['panelTypes'],
panelTypes: graphType,
queryData: {
...selectedWidget.queryData,
},
@ -151,4 +152,5 @@ export interface SaveDashboardProps {
widgetId: Widgets['id'];
dashboardId: string;
yAxisUnit: Widgets['yAxisUnit'];
graphType: ITEMS;
}