GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-15 14:15:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: permission is added in the dashboard button (#1051)

Browse Source
This commit is contained in:
palash-signoz 2022-05-04 01:31:44 +05:30 committed by GitHub
parent ce0b37ca2e
commit 5caf94f024
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/container/GridGraphLayout/index.tsx
View File

@ -4,10 +4,12 @@ import { notification } from 'antd';
import updateDashboardApi from 'api/dashboard/update'; import updateDashboardApi from 'api/dashboard/update';
import Spinner from 'components/Spinner'; import Spinner from 'components/Spinner';
import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider'; import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
import useComponentPermission from 'hooks/useComponentPermission';
import React, { memo, useCallback, useEffect, useRef, useState } from 'react'; import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
import { Layout } from 'react-grid-layout'; import { Layout } from 'react-grid-layout';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers'; import { AppState } from 'store/reducers';
import AppReducer from 'types/reducer/app';
import DashboardReducer from 'types/reducer/dashboards'; import DashboardReducer from 'types/reducer/dashboards';
import { v4 } from 'uuid'; import { v4 } from 'uuid';
@ -42,6 +44,9 @@ function GridGraph(): JSX.Element {
const isMounted = useRef(true); const isMounted = useRef(true);
const isDeleted = useRef(false); const isDeleted = useRef(false);
const { role } = useSelector<AppState, AppReducer>((state) => state.app);
const [saveLayout] = useComponentPermission(['save_layout'], role);
const getPreLayouts: () => LayoutProps[] = useCallback(() => { const getPreLayouts: () => LayoutProps[] = useCallback(() => {
if (widgets === undefined) { if (widgets === undefined) {
@ -213,16 +218,18 @@ function GridGraph(): JSX.Element {
return ( return (
<> <>
<ButtonContainer> {saveLayout && (
<Button <ButtonContainer>
loading={saveLayoutState.loading} <Button
onClick={onLayoutSaveHandler} loading={saveLayoutState.loading}
icon={<SaveFilled />} onClick={onLayoutSaveHandler}
danger={saveLayoutState.error} icon={<SaveFilled />}
> danger={saveLayoutState.error}
Save Layout >
</Button> Save Layout
</ButtonContainer> </Button>
</ButtonContainer>
)}
<ReactGridLayout <ReactGridLayout
isResizable isResizable

18
frontend/src/container/NewDashboard/DescriptionOfDashboard/index.tsx
View File

@ -6,6 +6,7 @@ import {
import { Card, Col, Row, Space, Tag, Typography } from 'antd'; import { Card, Col, Row, Space, Tag, Typography } from 'antd';
import AddTags from 'container/NewDashboard/DescriptionOfDashboard/AddTags'; import AddTags from 'container/NewDashboard/DescriptionOfDashboard/AddTags';
import NameOfTheDashboard from 'container/NewDashboard/DescriptionOfDashboard/NameOfTheDashboard'; import NameOfTheDashboard from 'container/NewDashboard/DescriptionOfDashboard/NameOfTheDashboard';
import useComponentPermission from 'hooks/useComponentPermission';
import React, { useCallback, useState } from 'react'; import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { connect, useSelector } from 'react-redux'; import { connect, useSelector } from 'react-redux';
@ -18,6 +19,7 @@ import {
} from 'store/actions'; } from 'store/actions';
import { AppState } from 'store/reducers'; import { AppState } from 'store/reducers';
import AppActions from 'types/actions'; import AppActions from 'types/actions';
import AppReducer from 'types/reducer/app';
import DashboardReducer from 'types/reducer/dashboards'; import DashboardReducer from 'types/reducer/dashboards';
import Description from './Description'; import Description from './Description';
@ -46,6 +48,8 @@ function DescriptionOfDashboard({
const [isJSONModalVisible, isIsJSONModalVisible] = useState<boolean>(false); const [isJSONModalVisible, isIsJSONModalVisible] = useState<boolean>(false);
const { t } = useTranslation('common'); const { t } = useTranslation('common');
const { role } = useSelector<AppState, AppReducer>((state) => state.app);
const [editDashboard] = useComponentPermission(['edit_dashboard'], role);
const onClickEditHandler = useCallback(() => { const onClickEditHandler = useCallback(() => {
if (isEditMode) { if (isEditMode) {
@ -118,12 +122,14 @@ function DescriptionOfDashboard({
<Button onClick={onToggleHandler} icon={<ShareAltOutlined />}> <Button onClick={onToggleHandler} icon={<ShareAltOutlined />}>
{t('share')} {t('share')}
</Button> </Button>
<Button {editDashboard && (
icon={!isEditMode ? <EditOutlined /> : <SaveOutlined />} <Button
onClick={onClickEditHandler} icon={!isEditMode ? <EditOutlined /> : <SaveOutlined />}
> onClick={onClickEditHandler}
{isEditMode ? t('save') : t('edit')} >
</Button> {isEditMode ? t('save') : t('edit')}
</Button>
)}
</Space> </Space>
</Col> </Col>
</Row> </Row>

6
frontend/src/utils/permission/index.ts
View File

@ -10,7 +10,9 @@ export type ComponentTypes =
| 'add_new_alert' | 'add_new_alert'
| 'add_new_channel' | 'add_new_channel'
| 'set_retention_period' | 'set_retention_period'
| 'action'; | 'action'
| 'save_layout'
| 'edit_dashboard';
export const componentPermission: Record<ComponentTypes, ROLES[]> = { export const componentPermission: Record<ComponentTypes, ROLES[]> = {
current_org_settings: ['ADMIN'], current_org_settings: ['ADMIN'],
@ -22,6 +24,8 @@ export const componentPermission: Record<ComponentTypes, ROLES[]> = {
add_new_channel: ['ADMIN'], add_new_channel: ['ADMIN'],
set_retention_period: ['ADMIN'], set_retention_period: ['ADMIN'],
action: ['ADMIN', 'EDITOR'], action: ['ADMIN', 'EDITOR'],
save_layout: ['ADMIN', 'EDITOR'],
edit_dashboard: ['ADMIN', 'EDITOR'],
}; };
export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = { export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {