Skip to content

Commit

Permalink
fix responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@wow-sven
wow-sven committed Nov 4, 2023
1 parent 815646e commit 1b57c87
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 133 deletions.
5 changes: 0 additions & 5 deletions dashboard/src/pages/scan/state/[tab].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,10 @@ const StateList = () => {
}

return (
<Grid container spacing={6}>
<TabContext value={activeTab}>

Check failure on line 79 in dashboard/src/pages/scan/state/[tab].tsx

View workflow job for this annotation

GitHub Actions / Check-Build-Test 

Delete `··`
<Grid>

Check failure on line 80 in dashboard/src/pages/scan/state/[tab].tsx

View workflow job for this annotation

GitHub Actions / Check-Build-Test 

Delete `··`
<Grid item xs={12}>

Check failure on line 81 in dashboard/src/pages/scan/state/[tab].tsx

View workflow job for this annotation

GitHub Actions / Check-Build-Test 

Replace `··········` with `········`
<TabList

Check failure on line 82 in dashboard/src/pages/scan/state/[tab].tsx

View workflow job for this annotation

GitHub Actions / Check-Build-Test 

Delete `··`
sx={{ ml: 6, mt: 6 }}
variant="scrollable"

Check failure on line 83 in dashboard/src/pages/scan/state/[tab].tsx

View workflow job for this annotation

GitHub Actions / Check-Build-Test 

Replace `··············` with `············`
scrollButtons="auto"

Check failure on line 84 in dashboard/src/pages/scan/state/[tab].tsx

View workflow job for this annotation

GitHub Actions / Check-Build-Test 

Delete `··`
onChange={handleChange}

Check failure on line 85 in dashboard/src/pages/scan/state/[tab].tsx

View workflow job for this annotation

GitHub Actions / Check-Build-Test 

Delete `··`
Expand Down Expand Up @@ -120,7 +118,6 @@ const StateList = () => {
</TabList>
</Grid>
</Grid>
<Grid item xs={12}>
{isLoading ? (
<Box sx={{ mt: 6, display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
<CircularProgress sx={{ mb: 4 }} />
Expand All @@ -134,9 +131,7 @@ const StateList = () => {
{tabContentList[activeTab]}
</TabPanel>
)}
</Grid>
</TabContext>
</Grid>
)
}

Expand Down
138 changes: 70 additions & 68 deletions dashboard/src/views/feature/SessionKeyList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
// SPDX-License-Identifier: Apache-2.0

// ** React Imports
import { useState, useRef, useMemo, useEffect } from 'react'
import {useState, useRef, useMemo, useEffect} from 'react'

import { useAuth } from 'src/hooks/useAuth'
import { useSession } from 'src/hooks/useSessionAccount'
import { useRooch } from 'src/hooks/useRooch'
import {useAuth} from 'src/hooks/useAuth'
import {useSession} from 'src/hooks/useSessionAccount'
import {useRooch} from 'src/hooks/useRooch'

import Grid from '@mui/material/Grid'
import Box from '@mui/material/Box'
Expand All @@ -30,8 +30,8 @@ import {
} from '@mui/x-data-grid'

// ** Store & Actions Imports
import { fetchData, removeRow } from 'src/store/session'
import { useAppDispatch, useAppSelector } from 'src/store'
import {fetchData, removeRow} from 'src/store/session'
import {useAppDispatch, useAppSelector} from 'src/store'

const formatDate = (timestamp: number) => {
if (timestamp === 0) {
Expand All @@ -53,41 +53,45 @@ const PAGE_SIZE = 100

export default function SessionKeyList() {
const columns: GridColDef[] = [
{ field: 'authentication_key', headerName: 'Authentication Key', width: 200 },
{
field: 'authentication_key',
flex: 0.2,
headerName: 'Authentication Key',
},
{
flex: 0.1,
field: 'scopes',
headerName: 'Scopes',
width: 200,
valueGetter: (params: GridValueGetterParams) => {
return (params.row.scopes as Array<string>).join(', ')
},
},
{
field: 'max_inactive_interval',
flex: 0.1,
headerName: 'Max Inactive Interval',
width: 200,
type: 'number',
},
{
field: 'last_active_time',
flex: 0.1,
headerName: 'Last Active Time',
width: 200,
valueGetter: (params: GridValueGetterParams) => {
return formatDate(params.row.last_active_time * 1000)
},
},
{
field: 'create_time',
flex: 0.1,
headerName: 'Create Time',
width: 200,
valueGetter: (params: GridValueGetterParams) => {
return formatDate(params.row.create_time * 1000)
},
},
{
field: 'action',
headerName: 'Action',
flex: 1,
flex: 0.2,
align: 'right',
headerAlign: 'right',
renderCell: (params: GridRenderCellParams) => (
Expand Down Expand Up @@ -124,7 +128,7 @@ export default function SessionKeyList() {

// ** Hooks
const dispatch = useAppDispatch()
const { result, status, error } = useAppSelector((state) => state.session)
const {result, status, error} = useAppSelector((state) => state.session)

useEffect(() => {
const defaultAccount = auth.defaultAccount
Expand Down Expand Up @@ -230,64 +234,62 @@ export default function SessionKeyList() {
}

return (
<Grid item xs={12}>
<Card>
<CardHeader title="Session Keys" />
<CardContent>
<Box sx={{ textAlign: 'right', marginBottom: '10px', mr: '20px' }}>
<Card>
<CardHeader title="Session Keys"/>
<CardContent>
<Box sx={{textAlign: 'right', marginBottom: '10px', mr: '20px'}}>
<Button
variant="contained"
color="primary"
size="small"
onClick={() => handleRefresh()}
>
Refresh
</Button>
</Box>
<DataGrid
rows={status === 'finished' ? result.data : []}
loading={status === ('loading' as 'loading')}
columns={columns}
pageSizeOptions={[10, 25, 50]}
onPaginationModelChange={handlePaginationModelChange}
paginationModel={paginationModel}
autoHeight
/>
<Snackbar
open={!!error}
autoHideDuration={6000}
anchorOrigin={{vertical: 'top', horizontal: 'center'}}
>
<Alert severity="error">{error}</Alert>
</Snackbar>
<Dialog
open={confirmDeleteDialog.open}
onClose={handleConfirmDeleteDialogClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{'Confirm Deletion'}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to delete this Session Key? Once deleted, the user will be
logged out and this action cannot be undone.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleConfirmDeleteDialogClose} color="primary">
Cancel
</Button>
<Button
variant="contained"
onClick={() => handleConfirmRemove(confirmDeleteDialog.authKey)}
color="primary"
size="small"
onClick={() => handleRefresh()}
autoFocus
>
Refresh
Confirm
</Button>
</Box>
<DataGrid
rows={status === 'finished' ? result.data : []}
loading={status === ('loading' as 'loading')}
columns={columns}
pageSizeOptions={[10, 25, 50]}
onPaginationModelChange={handlePaginationModelChange}
paginationModel={paginationModel}
autoHeight
/>
<Snackbar
open={!!error}
autoHideDuration={6000}
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
>
<Alert severity="error">{error}</Alert>
</Snackbar>
<Dialog
open={confirmDeleteDialog.open}
onClose={handleConfirmDeleteDialogClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{'Confirm Deletion'}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to delete this Session Key? Once deleted, the user will be
logged out and this action cannot be undone.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleConfirmDeleteDialogClose} color="primary">
Cancel
</Button>
<Button
onClick={() => handleConfirmRemove(confirmDeleteDialog.authKey)}
color="primary"
autoFocus
>
Confirm
</Button>
</DialogActions>
</Dialog>
</CardContent>
</Card>
</Grid>
</DialogActions>
</Dialog>
</CardContent>
</Card>
)
}
Loading

0 comments on commit 1b57c87

Please sign in to comment.