From c934135ff2b7e9c85b382baeba9cf519b39d5b26 Mon Sep 17 00:00:00 2001 From: Zhaoxinxin <107842350+Liam-Zhao@users.noreply.github.com> Date: Fri, 20 Oct 2023 15:29:24 +0800 Subject: [PATCH] fix: guest permissions (#306) --- src/components/developer/tokens/index.tsx | 30 +- src/components/developer/tokens/new.tsx | 5 +- src/components/job/preheats/index.tsx | 103 +-- src/components/job/preheats/new.tsx | 5 +- src/components/menu/index.tsx | 887 +++++++++++----------- src/lib/api.ts | 20 +- 6 files changed, 489 insertions(+), 561 deletions(-) diff --git a/src/components/developer/tokens/index.tsx b/src/components/developer/tokens/index.tsx index 446b0260..7a173f8a 100644 --- a/src/components/developer/tokens/index.tsx +++ b/src/components/developer/tokens/index.tsx @@ -24,7 +24,6 @@ import { formatDate, getPaginatedList } from '../../../lib/utils'; import { useCopyToClipboard } from 'react-use'; import { LoadingButton } from '@mui/lab'; import { Link, useNavigate } from 'react-router-dom'; -import { MyContext } from '../../menu/index'; import AddIcon from '@mui/icons-material/Add'; import CancelIcon from '@mui/icons-material/Cancel'; import DeleteIcon from '@mui/icons-material/Delete'; @@ -47,7 +46,6 @@ export default function PersonalAccessTokens() { const [token, setToken] = useState([]); const [allTokens, setAllTokens] = useState([]); const navigate = useNavigate(); - const user = useContext(MyContext); const theme = createTheme({ palette: { @@ -72,17 +70,10 @@ export default function PersonalAccessTokens() { (async function () { try { - if (user.name === 'root') { - const token = await getTokens({ page: 1, per_page: MAX_PAGE_SIZE }); + const token = await getTokens({ page: 1, per_page: MAX_PAGE_SIZE }); - setToken(token); - setIsLoading(false); - } else if (user.name !== '') { - const token = await getTokens({ user_id: String(user.id), page: 1, per_page: MAX_PAGE_SIZE }); - - setToken(token); - setIsLoading(false); - } + setToken(token); + setIsLoading(false); } catch (error) { if (error instanceof Error) { setErrorMessage(true); @@ -91,7 +82,7 @@ export default function PersonalAccessTokens() { } } })(); - }, [user]); + }, []); useEffect(() => { token.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()); @@ -121,17 +112,10 @@ export default function PersonalAccessTokens() { setSuccessMessage(true); setOpenDeletToken(false); - if (user.name === 'root') { - const token = await getTokens({ page: 1, per_page: DEFAULT_PAGE_SIZE }); + const token = await getTokens({ page: 1, per_page: DEFAULT_PAGE_SIZE }); - setToken(token); - setIsLoading(false); - } else if (user.name !== '') { - const token = await getTokens({ user_id: String(user.id), page: 1, per_page: DEFAULT_PAGE_SIZE }); - - setToken(token); - setIsLoading(false); - } + setToken(token); + setIsLoading(false); } catch (error) { if (error instanceof Error) { setDeleteLoadingButton(false); diff --git a/src/components/developer/tokens/new.tsx b/src/components/developer/tokens/new.tsx index d837fcc0..b44453ce 100644 --- a/src/components/developer/tokens/new.tsx +++ b/src/components/developer/tokens/new.tsx @@ -17,13 +17,12 @@ import { FormGroup, InputLabel, } from '@mui/material'; -import { useContext, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { formatDate, getExpiredTime } from '../../../lib/utils'; import { LoadingButton } from '@mui/lab'; import { useNavigate } from 'react-router-dom'; import { createTokens } from '../../../lib/api'; import HelpIcon from '@mui/icons-material/Help'; -import { MyContext } from '../../menu/index'; import CancelIcon from '@mui/icons-material/Cancel'; import CheckCircleIcon from '@mui/icons-material/CheckCircle'; @@ -116,7 +115,6 @@ export default function CreateTokens() { }, ]; - const user = useContext(MyContext); const navigate = useNavigate(); useEffect(() => { @@ -158,7 +156,6 @@ export default function CreateTokens() { bio: bio.value, scopes: filteredScopes, expired_at: expiredTime, - user_id: user.id, }; const canSubmit = Boolean(!formList.filter((item) => item.syncError).length); diff --git a/src/components/job/preheats/index.tsx b/src/components/job/preheats/index.tsx index 155e6a60..d8e45b59 100644 --- a/src/components/job/preheats/index.tsx +++ b/src/components/job/preheats/index.tsx @@ -21,11 +21,10 @@ import { import AddIcon from '@mui/icons-material/Add'; import MoreTimeIcon from '@mui/icons-material/MoreTime'; import { useNavigate, Link } from 'react-router-dom'; -import { useContext, useEffect, useState } from 'react'; -import { getJobs } from '../../../lib/api'; +import { useEffect, useState } from 'react'; +import { getJobs, getJobsResponse } from '../../../lib/api'; import { DEFAULT_PAGE_SIZE, MAX_PAGE_SIZE } from '../../../lib/constants'; import { getDatetime, getPaginatedList } from '../../../lib/utils'; -import { MyContext } from '../../menu/index'; export default function Preheats() { const [errorMessage, setErrorMessage] = useState(false); @@ -35,27 +34,8 @@ export default function Preheats() { const [status, setStatus] = useState('ALL'); const [shouldPoll, setShouldPoll] = useState(false); const [openStatusSelect, setOpenStatusSelect] = useState(false); - const [allPreheats, setAllPreheats] = useState([ - { - id: 0, - created_at: '', - updated_at: '', - is_del: 0, - task_id: '', - bio: '', - type: '', - state: '', - args: { - filter: '', - headers: {}, - tag: '', - type: '', - url: '', - }, - }, - ]); + const [allPreheats, setAllPreheats] = useState([]); - const user = useContext(MyContext); const navigate = useNavigate(); const theme = createTheme({ @@ -74,34 +54,18 @@ export default function Preheats() { try { setIsLoading(true); - if (user.name === 'root') { - const jobs = await getJobs({ - page: 1, - per_page: MAX_PAGE_SIZE, - state: status === 'ALL' ? undefined : status, - }); - - setAllPreheats(jobs.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())); - - const states = jobs.filter((obj) => obj.state !== 'SUCCESS' && obj.state !== 'FAILURE').length; - states === 0 ? setShouldPoll(false) : setShouldPoll(true); + const jobs = await getJobs({ + page: 1, + per_page: MAX_PAGE_SIZE, + state: status === 'ALL' ? undefined : status, + }); - setIsLoading(false); - } else if (user.name !== '') { - const jobs = await getJobs({ - page: 1, - per_page: MAX_PAGE_SIZE, - state: status === 'ALL' ? undefined : status, - user_id: String(user.id), - }); + setAllPreheats(jobs.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())); - setAllPreheats(jobs.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())); + const states = jobs.filter((obj) => obj.result.State !== 'SUCCESS' && obj.result.State !== 'FAILURE').length; + states === 0 ? setShouldPoll(false) : setShouldPoll(true); - const states = jobs.filter((obj) => obj.state !== 'SUCCESS' && obj.state !== 'FAILURE').length; - states === 0 ? setShouldPoll(false) : setShouldPoll(true); - - setIsLoading(false); - } + setIsLoading(false); } catch (error) { if (error instanceof Error) { setErrorMessage(true); @@ -109,35 +73,24 @@ export default function Preheats() { } } })(); - }, [status, user]); + }, [status]); useEffect(() => { if (shouldPoll) { const pollingInterval = setInterval(() => { const pollPreheat = async () => { try { - if (user.name === 'root') { - const jobs = await getJobs({ - page: 1, - per_page: MAX_PAGE_SIZE, - state: status === 'ALL' ? undefined : status, - }); - setAllPreheats(jobs.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())); + const jobs = await getJobs({ + page: 1, + per_page: MAX_PAGE_SIZE, + state: status === 'ALL' ? undefined : status, + }); + setAllPreheats(jobs.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())); - const states = jobs.filter((obj) => obj.state !== 'SUCCESS' && obj.state !== 'FAILURE').length; - states === 0 ? setShouldPoll(false) : setShouldPoll(true); - } else if (user.name !== '') { - const jobs = await getJobs({ - page: 1, - per_page: MAX_PAGE_SIZE, - state: status === 'ALL' ? undefined : status, - user_id: String(user.id), - }); - setAllPreheats(jobs.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())); - - const states = jobs.filter((obj) => obj.state !== 'SUCCESS' && obj.state !== 'FAILURE').length; - states === 0 ? setShouldPoll(false) : setShouldPoll(true); - } + const states = jobs.filter( + (obj) => obj.result.State !== 'SUCCESS' && obj.result.State !== 'FAILURE', + ).length; + states === 0 ? setShouldPoll(false) : setShouldPoll(true); } catch (error) { if (error instanceof Error) { setErrorMessage(true); @@ -153,7 +106,7 @@ export default function Preheats() { clearInterval(pollingInterval); }; } - }, [status, shouldPoll, user]); + }, [status, shouldPoll]); const statusList = [ { lable: 'Pending', name: 'PENDING' }, @@ -270,13 +223,13 @@ export default function Preheats() { {isLoading ? ( - ) : item.state === 'SUCCESS' ? ( + ) : item.result.State === 'SUCCESS' ? ( - ) : item.state === 'FAILURE' ? ( + ) : item.result.State === 'FAILURE' ? ( {isLoading ? ( - ) : item.state === 'SUCCESS' ? ( + ) : item.result.State === 'SUCCESS' ? ( - ) : item.state === 'FAILURE' ? ( + ) : item.result.State === 'FAILURE' ? ( ([]); const navigate = useNavigate(); - const user = useContext(MyContext); const theme = createTheme({ palette: { @@ -305,7 +303,6 @@ export default function NewPreheat() { headers: headerList, }, cdn_cluster_ids: clusterID, - user_id: user.id, }; if (canSubmit) { diff --git a/src/components/menu/index.tsx b/src/components/menu/index.tsx index 0eada6bb..d222d383 100644 --- a/src/components/menu/index.tsx +++ b/src/components/menu/index.tsx @@ -40,16 +40,6 @@ const Main = styled('div')(({ theme }) => ({ }, })); -interface MyContextType { - name: string; - id: number; -} - -export const MyContext = createContext({ - name: '', - id: 0, -}); - export default function Layout(props: any) { const [role, setRole] = useState(''); const [errorMessage, setErrorMessage] = useState(false); @@ -207,209 +197,110 @@ export default function Layout(props: any) { }; return ( - - - theme.zIndex.drawer + 1, - backgroundColor: 'rgba(0,0,0,0.3)', - }} - > - - - - - Please change the password in time for the first login! - - - - - {errorMessageText} - - - {location.pathname === '/signin' || location.pathname === '/signup' ? ( -
{props.children}
- ) : ( - - - - - - - - - - Dragonfly - - - - {role === ROLE_ROOT ? ( - rootMenu.map((items) => - items.text === 'Developer' ? ( - - { - setExpandDeveloper(!expandDeveloper); - }} - sx={{ - '&.Mui-selected': { backgroundColor: '#DFFF55' }, - '&.Mui-selected:hover': { - backgroundColor: '#DDFF55', - color: '#121726', - }, - height: '2rem', - }} - > - {items.icon} - - {items.text} - - {expandDeveloper ? : } - - - - - - {items?.menuProps?.text} - - - - - - ) : items.text === 'Job' ? ( - - { - setExpandJob(!expandJob); - }} - sx={{ - '&.Mui-selected': { backgroundColor: '#DFFF55' }, - '&.Mui-selected:hover': { - backgroundColor: '#DDFF55', - color: '#121726', - }, - height: '2rem', - }} - > - {items.icon} - - {items.text} - - {expandJob ? : } - - - - - - {items?.menuProps?.text} - - - - - - ) : items.text === 'Insight' ? ( - - { - setExpandInsight(!expandInsight); - }} - sx={{ - '&.Mui-selected': { backgroundColor: '#DFFF55' }, - '&.Mui-selected:hover': { - backgroundColor: '#DDFF55', - color: '#121726', - }, - height: '2rem', - }} + + theme.zIndex.drawer + 1, + backgroundColor: 'rgba(0,0,0,0.3)', + }} + > + + + + + Please change the password in time for the first login! + + + + + {errorMessageText} + + + {location.pathname === '/signin' || location.pathname === '/signup' ? ( +
{props.children}
+ ) : ( + + + + + + + + + + Dragonfly + + + + {role === ROLE_ROOT ? ( + rootMenu.map((items) => + items.text === 'Developer' ? ( + + { + setExpandDeveloper(!expandDeveloper); + }} + sx={{ + '&.Mui-selected': { backgroundColor: '#DFFF55' }, + '&.Mui-selected:hover': { + backgroundColor: '#DDFF55', + color: '#121726', + }, + height: '2rem', + }} + > + {items.icon} + - {items.icon} - + {expandDeveloper ? : } + + + + - {items.text} - - {expandInsight ? : } - - - - - - {items?.menuProps?.text} - - - - - - ) : ( + + {items?.menuProps?.text} + + + + + + ) : items.text === 'Job' ? ( + { + setExpandJob(!expandJob); + }} sx={{ '&.Mui-selected': { backgroundColor: '#DFFF55' }, '&.Mui-selected:hover': { @@ -417,175 +308,171 @@ export default function Layout(props: any) { color: '#121726', }, height: '2rem', - mb: '0.4rem', - mt: '0.4rem', }} > {items.icon} - + {items.text} + {expandJob ? : } - ), - ) - ) : role === ROLE_GUEST ? ( - guestMenu.map((items) => - items.text === 'Developer' ? ( - - { - setExpandDeveloper(!expandDeveloper); - }} - sx={{ - '&.Mui-selected': { backgroundColor: '#DFFF55' }, - '&.Mui-selected:hover': { - backgroundColor: '#DDFF55', - color: '#121726', - }, - height: '2rem', - mb: '0.4rem', - mt: '0.4rem', - }} - > - {items.icon} - + + - {items.text} - - {expandDeveloper ? : } - - - - - - {items?.menuProps?.text} - - - - - - ) : items.text === 'Job' ? ( - - { - setExpandJob(!expandJob); - }} - sx={{ - '&.Mui-selected': { backgroundColor: '#DFFF55' }, - '&.Mui-selected:hover': { - backgroundColor: '#DDFF55', - color: '#121726', - }, - height: '2rem', - mb: '0.4rem', - mt: '0.4rem', - }} + + {items?.menuProps?.text} + + + + + + ) : items.text === 'Insight' ? ( + + { + setExpandInsight(!expandInsight); + }} + sx={{ + '&.Mui-selected': { backgroundColor: '#DFFF55' }, + '&.Mui-selected:hover': { + backgroundColor: '#DDFF55', + color: '#121726', + }, + height: '2rem', + }} + > + {items.icon} + - {items.icon} - + {expandInsight ? : } + + + + - {items.text} - - {expandJob ? : } - - - - - - {items?.menuProps?.text} - - - - - - ) : items.text === 'Insight' ? ( - - { - setExpandInsight(!expandInsight); - }} - sx={{ - '&.Mui-selected': { backgroundColor: '#DFFF55' }, - '&.Mui-selected:hover': { - backgroundColor: '#DDFF55', - color: '#121726', - }, - height: '2rem', - }} + + {items?.menuProps?.text} + + + + + + ) : ( + + {items.icon} + + {items.text} + + + ), + ) + ) : role === ROLE_GUEST ? ( + guestMenu.map((items) => + items.text === 'Developer' ? ( + + { + setExpandDeveloper(!expandDeveloper); + }} + sx={{ + '&.Mui-selected': { backgroundColor: '#DFFF55' }, + '&.Mui-selected:hover': { + backgroundColor: '#DDFF55', + color: '#121726', + }, + height: '2rem', + }} + > + {items.icon} + - {items.icon} - + {expandDeveloper ? : } + + + + - {items.text} - - {expandInsight ? : } - - - - - - {items?.menuProps?.text} - - - - - - ) : ( + + {items?.menuProps?.text} + + + + + + ) : items.text === 'Job' ? ( + { + setExpandJob(!expandJob); + }} sx={{ '&.Mui-selected': { backgroundColor: '#DFFF55' }, '&.Mui-selected:hover': { @@ -593,109 +480,205 @@ export default function Layout(props: any) { color: '#121726', }, height: '2rem', - mb: '0.4rem', - mt: '0.4rem', }} > {items.icon} - + {items.text} + {expandJob ? : } - ), - ) - ) : ( - <> - )} - - - - - - - - - {user?.name || '-'} - - - + + + + {items?.menuProps?.text} + + + + + + ) : items.text === 'Insight' ? ( + + { + setExpandInsight(!expandInsight); + }} sx={{ - width: '7rem', - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', + '&.Mui-selected': { backgroundColor: '#DFFF55' }, + '&.Mui-selected:hover': { + backgroundColor: '#DDFF55', + color: '#121726', + }, + height: '2rem', }} > - {user?.email || '-'} + {items.icon} + + {items.text} + + {expandInsight ? : } + + + + + + {items?.menuProps?.text} + + + + + + ) : ( + + {items.icon} + + {items.text} - - - - { - setAnchorElement(event.currentTarget); + + ), + ) + ) : ( + <> + )} + + + + + + + - - + + {user?.name || '-'} + + + + {user?.email || '-'} + + + - { - setAnchorElement(null); + { + setAnchorElement(event.currentTarget); }} - sx={{ position: 'absolute', top: '-5.8rem', left: '-5rem' }} + size="small" + aria-controls={openProfile ? 'account-menu' : undefined} + aria-haspopup="true" + aria-expanded={openProfile ? 'true' : undefined} + sx={{ position: 'relative', padding: '0' }} > - { - setAnchorElement(null); + + + + { + setAnchorElement(null); + }} + sx={{ position: 'absolute', top: '-5.8rem', left: '-5rem' }} + > + { + setAnchorElement(null); - navigate('/profile'); - }} - > - - - - Profile - - - - - - Logout - - - - - -
- -
+ navigate('/profile'); + }} + > + + + + Profile + + + + + + Logout + + + - )} - - + +
+ +
+ + )} + ); } diff --git a/src/lib/api.ts b/src/lib/api.ts index 21c7d48d..db49b1b9 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -543,7 +543,6 @@ export async function putUserRole(id: string, role: string) { } interface getTokensParams { - user_id?: string; page?: number; per_page?: number; } @@ -596,7 +595,6 @@ interface createTokensRequest { bio: string; scopes: Array; expired_at: string; - user_id: number; } interface createTokensResponse { @@ -657,7 +655,7 @@ interface getJobsParams { state?: string; } -interface getJobsResponse { +export interface getJobsResponse { id: number; created_at: string; updated_at: string; @@ -673,6 +671,22 @@ interface getJobsResponse { type: string; url: string; }; + result: { + CreatedAt: string; + GroupUUID: string; + JobStates: [ + { + CreatedAt: string; + Error: string; + Results: Array; + State: string; + TTL: number; + TaskName: string; + TaskUUID: string; + }, + ]; + State: string; + }; } export async function getJobs(params?: getJobsParams): Promise {