mirrors/netbird-dashboard
1
0
Fork 0
mirror of https://github.com/netbirdio/dashboard.git synced 2026-01-26 01:21:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use single page size helper with new larger values (#143)

Browse Source 
Reduce duplicated code with single helper for pagination

On larger deployments we should allow for larger pages

fix popover key issue and vertical spacing

update deprecated keys
This commit is contained in:
Maycon Santos
2023-02-28 16:32:12 +01:00
committed by GitHub
parent 76083168f6
commit d3e34d8448
9 changed files with 47 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AccessControlModalGroups.tsx
View File

@@ -16,7 +16,7 @@ const AccessControlModalGroups:React.FC<Props> = ({data, title, visible, onCance
return (
<>
<Modal title={title} visible={isModalVisible} onCancel={() => onCancel()} footer={null}>
<Modal title={title} open={isModalVisible} onCancel={() => onCancel()} footer={null}>
<List
itemLayout="horizontal"
dataSource={data as Group[] | undefined}

24
src/utils/pageSize.tsx Normal file
View File

@@ -0,0 +1,24 @@
import {useState} from "react";
export const usePageSizeHelpers = () => {
const [pageSize, setPageSize] = useState(10);
const onChangePageSize = (value: string) => {
setPageSize(parseInt(value.toString()))
}
const pageSizeOptions = [
{label: "10", value: "10"},
{label: "25", value: "25"},
{label: "50", value: "50"},
{label: "100", value: "100"},
{label: "1000", value: "1000"}
]
return {
onChangePageSize,
pageSize,
pageSizeOptions
}
}

19
src/views/AccessControl.tsx
View File

@@ -36,6 +36,7 @@ import {Group} from "../store/group/types";
import AccessControlModalGroups from "../components/AccessControlModalGroups";
import tableSpin from "../components/Spin";
import {useGetAccessTokenSilently} from "../utils/token";
import {usePageSizeHelpers} from "../utils/pageSize";
const {Title, Paragraph, Text} = Typography;
const {Column} = Table;
@@ -56,6 +57,7 @@ interface GroupsToShow {
}
export const AccessControl = () => {
const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers()
const {getAccessTokenSilently} = useGetAccessTokenSilently()
const dispatch = useDispatch()
@@ -68,7 +70,6 @@ export const AccessControl = () => {
const [showTutorial, setShowTutorial] = useState(true)
const [textToSearch, setTextToSearch] = useState('');
const [optionAllEnable, setOptionAllEnable] = useState('enabled');
const [pageSize, setPageSize] = useState(5);
const [currentPage, setCurrentPage] = useState(1);
const [dataTable, setDataTable] = useState([] as RuleDataTable[]);
const [ruleToAction, setRuleToAction] = useState(null as RuleDataTable | null);
@@ -76,11 +77,6 @@ export const AccessControl = () => {
const setupNewRuleVisible = useSelector((state: RootState) => state.rule.setupNewRuleVisible);
const [groupPopupVisible, setGroupPopupVisible] = useState(false as boolean | undefined)
const pageSizeOptions = [
{label: "5", value: "5"},
{label: "10", value: "10"},
{label: "15", value: "15"}
]
const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'}, {label: 'All', value: 'all'}]
@@ -200,10 +196,6 @@ export const AccessControl = () => {
setOptionAllEnable(value)
}
const onChangePageSize = (value: string) => {
setPageSize(parseInt(value.toString()))
}
const showConfirmDelete = () => {
confirm({
icon: <ExclamationCircleOutlined/>,
@@ -327,7 +319,6 @@ export const AccessControl = () => {
const _g = g as Group
const peersCount = ` - ${_g.peers_count || 0} ${(!_g.peers_count || parseInt(_g.peers_count) !== 1) ? 'peers' : 'peer'} `
return (
<Space direction="vertical">
<div key={i}>
<Tag
color="blue"
@@ -337,14 +328,14 @@ export const AccessControl = () => {
</Tag>
<span style={{fontSize: ".85em"}}>{peersCount}</span>
</div>
</Space>
)
})
const mainContent = (<Space direction="vertical">{content}</Space>)
return (
<Popover
onOpenChange={onPopoverVisibleChange}
open={groupPopupVisible}
content={content}
content={mainContent}
title={null}>
<Button type="link" onClick={() => setRuleAndView(rule)}>{label}</Button>
</Popover>
@@ -459,7 +450,7 @@ export const AccessControl = () => {
if (deletedRule.loading || savedRule.loading) return <></>
return <Dropdown.Button type="text" overlay={actionsMenu}
trigger={["click"]}
onVisibleChange={visible => {
onOpenChange={visible => {
if (visible) setRuleToAction(record as RuleDataTable)
}}></Dropdown.Button>
}}

14
src/views/Activity.tsx
View File

@@ -12,6 +12,7 @@ import UserUpdate from "../components/UserUpdate";
import {useOidcUser} from "@axa-fr/react-oidc";
import {capitalize, formatDateTime} from "../utils/common";
import {User} from "../store/user/types";
import {usePageSizeHelpers} from "../utils/pageSize";
const {Title, Paragraph, Text} = Typography;
const {Column} = Table;
@@ -20,6 +21,7 @@ interface EventDataTable extends Event {
}
export const Activity = () => {
const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers()
const {getAccessTokenSilently} = useGetAccessTokenSilently()
const {oidcUser} = useOidcUser();
const dispatch = useDispatch()
@@ -31,14 +33,8 @@ export const Activity = () => {
const setupKeys = useSelector((state: RootState) => state.setupKey.data);
const [textToSearch, setTextToSearch] = useState('');
const [pageSize, setPageSize] = useState(20);
const [dataTable, setDataTable] = useState([] as EventDataTable[]);
const pageSizeOptions = [
{label: "5", value: "5"},
{label: "10", value: "10"},
{label: "15", value: "15"},
{label: "20", value: "20"}
]
const transformDataTable = (d: Event[]): EventDataTable[] => {
return d.map(p => ({key: p.id, ...p} as EventDataTable))
@@ -73,10 +69,6 @@ export const Activity = () => {
setDataTable(transformDataTable(data))
}
const onChangePageSize = (value: string) => {
setPageSize(parseInt(value.toString()))
}
const getActivityRow = (group:string,text:string) => {
return <Row> <Text>Group <Text type="secondary">{group}</Text> {text}</Text> </Row>
}

13
src/views/Nameservers.tsx
View File

@@ -33,6 +33,7 @@ import {NameServer, NameServerGroup} from "../store/nameservers/types";
import NameServerGroupUpdate from "../components/NameServerGroupUpdate";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {useGetGroupTagHelpers} from "../utils/groups";
import {usePageSizeHelpers} from "../utils/pageSize";
const {Title, Paragraph} = Typography;
const {Column} = Table;
@@ -45,6 +46,7 @@ interface NameserverGroupDataTable extends NameServerGroup {
const styleNotification = {marginTop: 85}
export const Nameservers = () => {
const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers()
const {getAccessTokenSilently} = useGetAccessTokenSilently()
const dispatch = useDispatch()
@@ -63,14 +65,9 @@ export const Nameservers = () => {
const [nsGroupToAction, setNsGroupToAction] = useState(null as NameserverGroupDataTable | null);
const [textToSearch, setTextToSearch] = useState('');
const [optionAllEnable, setOptionAllEnable] = useState('enabled');
const [pageSize, setPageSize] = useState(10);
const [dataTable, setDataTable] = useState([] as NameserverGroupDataTable[]);
const [showTutorial, setShowTutorial] = useState(false)
const pageSizeOptions = [
{label: "5", value: "5"},
{label: "10", value: "10"},
{label: "15", value: "15"}
]
const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'}, {label: 'All', value: 'all'}]
@@ -141,10 +138,6 @@ export const Nameservers = () => {
setDataTable(transformDataTable(filterDataTable()))
}
const onChangePageSize = (value: string) => {
setPageSize(parseInt(value.toString()))
}
const onClickEdit = () => {
dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(true));
dispatch(nsGroupActions.setNameServerGroup({

16
src/views/Peers.tsx
View File

@@ -40,6 +40,7 @@ import {TooltipPlacement} from "antd/es/tooltip";
import {useGetAccessTokenSilently} from "../utils/token";
import {actions as userActions} from "../store/user";
import ButtonCopyMessage from "../components/ButtonCopyMessage";
import {usePageSizeHelpers} from "../utils/pageSize";
const {Title, Paragraph, Text} = Typography;
const {Column} = Table;
@@ -47,7 +48,8 @@ const {confirm} = Modal;
export const Peers = () => {
//const {accessToken} = useOidcAccessToken()
const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers()
const {getAccessTokenSilently} = useGetAccessTokenSilently()
const dispatch = useDispatch()
@@ -65,17 +67,12 @@ export const Peers = () => {
const [textToSearch, setTextToSearch] = useState('');
const [optionOnOff, setOptionOnOff] = useState('all');
const [pageSize, setPageSize] = useState(10);
const [dataTable, setDataTable] = useState([] as PeerDataTable[]);
const [peerToAction, setPeerToAction] = useState(null as PeerDataTable | null);
const [groupPopupVisible, setGroupPopupVisible] = useState(false as boolean | undefined)
const [showTutorial, setShowTutorial] = useState(false)
const pageSizeOptions = [
{label: "5", value: "5"},
{label: "10", value: "10"},
{label: "15", value: "15"}
]
const optionsOnOff = [{label: 'Online', value: 'on'}, {label: 'All', value: 'all'}]
@@ -230,11 +227,6 @@ export const Peers = () => {
setOptionOnOff(value)
}
const onChangePageSize = (value: string) => {
setPageSize(parseInt(value.toString()))
}
const showConfirmDelete = () => {
let peerRoutes: string[] = []
routes.forEach((r) => {

14
src/views/Routes.tsx
View File

@@ -46,12 +46,14 @@ import {Group} from "../store/group/types";
import {TooltipPlacement} from "antd/es/tooltip";
import {actions as groupActions} from "../store/group";
import {useGetGroupTagHelpers} from "../utils/groups";
import {usePageSizeHelpers} from "../utils/pageSize";
const {Title, Paragraph, Text} = Typography;
const {Column} = Table;
const {confirm} = Modal;
export const Routes = () => {
const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers()
const {getAccessTokenSilently} = useGetAccessTokenSilently()
const dispatch = useDispatch()
const {
@@ -70,7 +72,6 @@ export const Routes = () => {
const [showTutorial, setShowTutorial] = useState(true)
const [textToSearch, setTextToSearch] = useState('');
const [optionAllEnable, setOptionAllEnable] = useState('enabled');
const [pageSize, setPageSize] = useState(5);
const [currentPage, setCurrentPage] = useState(1);
const [dataTable, setDataTable] = useState([] as RouteDataTable[]);
const [routeToAction, setRouteToAction] = useState(null as RouteDataTable | null);
@@ -79,13 +80,6 @@ export const Routes = () => {
const [groupPopupVisible, setGroupPopupVisible] = useState(false as boolean | undefined)
const [peerNameToIP, peerIPToName] = initPeerMaps(peers);
const pageSizeOptions = [
{label: "5", value: "5"},
{label: "10", value: "10"},
{label: "15", value: "15"}
]
const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'}, {label: 'All', value: 'all'}]
const itemsMenuAction = [
@@ -211,10 +205,6 @@ export const Routes = () => {
setOptionAllEnable(value)
}
const onChangePageSize = (value: string) => {
setPageSize(parseInt(value.toString()))
}
const showConfirmDelete = () => {
confirm({
icon: <ExclamationCircleOutlined/>,

13
src/views/SetupKeys.tsx
View File

@@ -34,6 +34,7 @@ import {actions as groupActions} from "../store/group";
import {Group} from "../store/group/types";
import {TooltipPlacement} from "antd/es/tooltip";
import {useGetAccessTokenSilently} from "../utils/token";
import {usePageSizeHelpers} from "../utils/pageSize";
const {Title, Text, Paragraph} = Typography;
const {Column} = Table;
@@ -45,7 +46,7 @@ interface SetupKeyDataTable extends SetupKey {
}
export const SetupKeys = () => {
//const {accessToken} = useOidcAccessToken()
const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers()
const {getAccessTokenSilently} = useGetAccessTokenSilently()
const dispatch = useDispatch()
@@ -58,7 +59,6 @@ export const SetupKeys = () => {
const [textToSearch, setTextToSearch] = useState('');
const [optionValidAll, setOptionValidAll] = useState('valid');
const [pageSize, setPageSize] = useState(10);
const [dataTable, setDataTable] = useState([] as SetupKeyDataTable[]);
const [setupKeyToAction, setSetupKeyToAction] = useState(null as SetupKeyDataTable | null);
const setupNewKeyVisible = useSelector((state: RootState) => state.setupKey.setupNewKeyVisible)
@@ -66,11 +66,6 @@ export const SetupKeys = () => {
const styleNotification = {marginTop: 85}
const pageSizeOptions = [
{label: "5", value: "5"},
{label: "10", value: "10"},
{label: "15", value: "15"}
]
const optionsValidAll = [{label: 'Valid', value: 'valid'}, {label: 'All', value: 'all'}]
@@ -180,10 +175,6 @@ export const SetupKeys = () => {
setOptionValidAll(value)
}
const onChangePageSize = (value: string) => {
setPageSize(parseInt(value.toString()))
}
const showConfirmRevoke = () => {
confirm({
icon: <ExclamationCircleOutlined/>,

13
src/views/Users.tsx
View File

@@ -33,6 +33,7 @@ import {Link} from "react-router-dom";
import {actions as setupKeyActions} from "../store/setup-key";
import {SetupKey} from "../store/setup-key/types";
import {isLocalDev, isNetBirdHosted} from "../utils/common";
import {usePageSizeHelpers} from "../utils/pageSize";
const {Title, Paragraph, Text} = Typography;
const {Column} = Table;
@@ -44,6 +45,7 @@ interface UserDataTable extends User {
const styleNotification = {marginTop: 85}
export const Users = () => {
const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers()
const {getAccessTokenSilently} = useGetAccessTokenSilently()
const {oidcUser} = useOidcUser();
const {idTokenPayload} = useOidcIdToken()
@@ -59,14 +61,9 @@ export const Users = () => {
const [groupPopupVisible, setGroupPopupVisible] = useState(false as boolean | undefined)
const [userToAction, setUserToAction] = useState(null as UserDataTable | null);
const [textToSearch, setTextToSearch] = useState('');
const [pageSize, setPageSize] = useState(10);
const [dataTable, setDataTable] = useState([] as UserDataTable[]);
const [currentUser, setCurrentUser] = useState({} as User)
const pageSizeOptions = [
{label: "5", value: "5"},
{label: "10", value: "10"},
{label: "15", value: "15"}
]
// setUserAndView makes the UserUpdate drawer visible (right side) and sets the user object
const setUserAndView = (user: User) => {
@@ -129,10 +126,6 @@ export const Users = () => {
setDataTable(transformDataTable(data))
}
const onChangePageSize = (value: string) => {
setPageSize(parseInt(value.toString()))
}
const onClickEdit = () => {
dispatch(userActions.setUpdateUserDrawerVisible(true));
dispatch(userActions.setUser({