Merge pull request #1243 from pranshuchittora/pranshuchittora/feat/dashboard-save-rbac

feat(FE): save dashboard with RBAC permissions
This commit is contained in:
palash-signoz 2022-06-09 12:23:18 +05:30 committed by GitHub
commit 99d38860cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 26 deletions

View File

@ -1,6 +1,7 @@
/* eslint-disable react/no-unstable-nested-components */ /* eslint-disable react/no-unstable-nested-components */
import { notification } from 'antd'; import { notification } from 'antd';
import updateDashboardApi from 'api/dashboard/update'; import updateDashboardApi from 'api/dashboard/update';
import useComponentPermission from 'hooks/useComponentPermission';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { Layout } from 'react-grid-layout'; import { Layout } from 'react-grid-layout';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -15,6 +16,7 @@ import { AppState } from 'store/reducers';
import AppActions from 'types/actions'; import AppActions from 'types/actions';
import { UPDATE_DASHBOARD } from 'types/actions/dashboard'; import { UPDATE_DASHBOARD } from 'types/actions/dashboard';
import { Dashboard, Widgets } from 'types/api/dashboard/getAll'; import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
import AppReducer from 'types/reducer/app';
import DashboardReducer from 'types/reducer/dashboards'; import DashboardReducer from 'types/reducer/dashboards';
import Graph from './Graph'; import Graph from './Graph';
@ -49,6 +51,9 @@ function GridGraph(props: Props): JSX.Element {
const { dashboards, isAddWidget } = useSelector<AppState, DashboardReducer>( const { dashboards, isAddWidget } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards, (state) => state.dashboards,
); );
const { role } = useSelector<AppState, AppReducer>((state) => state.app);
const [saveLayoutPermission] = useComponentPermission(['save_layout'], role);
const [saveLayoutState, setSaveLayoutState] = useState<State>({ const [saveLayoutState, setSaveLayoutState] = useState<State>({
loading: false, loading: false,
error: false, error: false,
@ -109,31 +114,34 @@ function GridGraph(props: Props): JSX.Element {
loading: true, loading: true,
})); }));
const response = await updateDashboardApi({ // Save layout only when users has the has the permission to do so.
data: { if (saveLayoutPermission) {
title: data.title, const response = await updateDashboardApi({
description: data.description, data: {
name: data.name, title: data.title,
tags: data.tags, description: data.description,
widgets: data.widgets, name: data.name,
layout, tags: data.tags,
}, widgets: data.widgets,
uuid: selectedDashboard.uuid, layout,
}); },
if (response.statusCode === 200) { uuid: selectedDashboard.uuid,
setSaveLayoutState((state) => ({ });
...state, if (response.statusCode === 200) {
error: false, setSaveLayoutState((state) => ({
errorMessage: '', ...state,
loading: false, error: false,
})); errorMessage: '',
} else { loading: false,
setSaveLayoutState((state) => ({ }));
...state, } else {
error: true, setSaveLayoutState((state) => ({
errorMessage: response.error || 'Something went wrong', ...state,
loading: false, error: true,
})); errorMessage: response.error || 'Something went wrong',
loading: false,
}));
}
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@ -145,6 +153,7 @@ function GridGraph(props: Props): JSX.Element {
data.tags, data.tags,
data.title, data.title,
data.widgets, data.widgets,
saveLayoutPermission,
selectedDashboard.uuid, selectedDashboard.uuid,
], ],
); );

View File

@ -49,7 +49,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
APPLICATION: ['ADMIN', 'EDITOR', 'VIEWER'], APPLICATION: ['ADMIN', 'EDITOR', 'VIEWER'],
CHANNELS_EDIT: ['ADMIN'], CHANNELS_EDIT: ['ADMIN'],
CHANNELS_NEW: ['ADMIN'], CHANNELS_NEW: ['ADMIN'],
DASHBOARD: ['ADMIN', 'EDITOR', 'EDITOR'], DASHBOARD: ['ADMIN', 'EDITOR', 'VIEWER'],
DASHBOARD_WIDGET: ['ADMIN', 'EDITOR', 'VIEWER'], DASHBOARD_WIDGET: ['ADMIN', 'EDITOR', 'VIEWER'],
EDIT_ALERTS: ['ADMIN'], EDIT_ALERTS: ['ADMIN'],
ERROR_DETAIL: ['ADMIN', 'EDITOR', 'VIEWER'], ERROR_DETAIL: ['ADMIN', 'EDITOR', 'VIEWER'],