-
Notifications
You must be signed in to change notification settings - Fork 164
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
frontend Detail Drawer: Add detail drawer mode
DONE: Added drawer static on refresh ability WIP: Reload component on name change working WIP: Pods drawer open close button working WIP: links no longer route to different drawer path Signed-off-by: Vincent T <[email protected]>
- Loading branch information
Showing
24 changed files
with
768 additions
and
191 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { FormControlLabel, Switch } from '@mui/material'; | ||
| import React from 'react'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { useDispatch } from 'react-redux'; | ||
| import { setDetailDrawerEnabled } from '../../../redux/drawerModeSlice'; | ||
| import { useTypedSelector } from '../../../redux/reducers/reducers'; | ||
|
|
||
| export default function DrawerModeButton() { | ||
| const dispatch = useDispatch(); | ||
| const { t } = useTranslation('translation'); | ||
| // This will fix the problem of the project refreshing the state away from needed position | ||
|
|
||
| // DETAIL DRAWER MODE | ||
| const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled); | ||
| // const localDetailDrawerEnabled = localStorage.getItem('detailDrawerEnabled'); | ||
| const [isDrawerEnabled, changeDetailDrawerEnabled] = useState<any>(isDetailDrawerEnabled); | ||
|
|
||
| if (isDetailDrawerEnabled) { | ||
| console.log('THE LOCAL STORAGE IS TRUE'); | ||
| dispatch(setDetailDrawerEnabled(true)); | ||
| console.log('READING FROM DISPATCHED STATE', isDetailDrawerEnabled); | ||
| } else { | ||
| console.log(" THE LOCAL STORAGE IS NULL, UNDEFINED, OR 'FALSE' "); | ||
| dispatch(setDetailDrawerEnabled(false)); | ||
| console.log('READING FROM DISPATCHED STATE', isDetailDrawerEnabled); | ||
| } | ||
|
|
||
| console.log('BUTTON - isDetailDrawerEnabled', isDetailDrawerEnabled); | ||
|
|
||
| // the useEffect will run everytime the isDrawerEnabled state changes, which is everytime the user clicks the switch button because the switch button changes the state of isDrawerEnabled | ||
| useEffect(() => { | ||
| dispatch(setDetailDrawerEnabled(isDrawerEnabled)); | ||
| console.log('ON SETTINGS'); | ||
| console.log(localStorage.getItem('detailDrawerEnabled')); | ||
| }, [isDrawerEnabled]); | ||
|
|
||
| // this function takes in the current changes and updates it, this kicks off the useEffect that is listening for changes to newDrawerEnabled | ||
| function drawerModeToggle() { | ||
| console.log('drawerModeToggle'); | ||
| changeDetailDrawerEnabled(!isDrawerEnabled); | ||
| } | ||
|
|
||
| // NOTICE THAT WE DO NOT USE isDrawerEnabled TO DETERMINE HOW THE SWITCH IS RENDERED UNDER THE CHECKED PROP, THIS IS BECAUSE THE USEEFFECT WILL RERENDER THE COMPONENT WITH THE NEW STATE | ||
| return ( | ||
| <FormControlLabel | ||
| control={ | ||
| <Switch | ||
| checked={isDetailDrawerEnabled} | ||
| onClick={drawerModeToggle} | ||
| name="drawerMode" | ||
| color="primary" | ||
| /> | ||
| } | ||
| // will need to replace label | ||
| label={t('translation|Drawer Mode')} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
155 changes: 155 additions & 0 deletions
155
frontend/src/components/DetailsDrawer/DetailsDrawer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,155 @@ | ||
| import { Box, Button, Drawer, useMediaQuery } from '@mui/material'; | ||
| import React, { useEffect } from 'react'; | ||
| import { useDispatch } from 'react-redux'; | ||
| import { useParams } from 'react-router-dom'; | ||
| import CronJob from '../../lib/k8s/cronJob'; | ||
| import Deployment from '../../lib/k8s/deployment'; | ||
| import Job from '../../lib/k8s/job'; | ||
| import ReplicaSet from '../../lib/k8s/replicaSet'; | ||
| import StatefulSet from '../../lib/k8s/statefulSet'; | ||
| import { setDetailDrawerOpen } from '../../redux/drawerModeSlice'; | ||
| import { useTypedSelector } from '../../redux/reducers/reducers'; | ||
| import DaemonSetDetails from '../daemonset/Details'; | ||
| import PodDetails from '../pod/Details'; | ||
| import WorkloadDetails from '../workload/Details'; | ||
|
|
||
| export default function DetailsDrawer() { | ||
| const drawerOpen = useTypedSelector(state => state.drawerMode.isDetailDrawerOpen); | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const params = useParams(); | ||
|
|
||
| console.log('EXAMPLE params: ', params); | ||
|
|
||
| const mediaQuerySize = useMediaQuery('(min-width: 1200px)'); | ||
|
|
||
| // EXPERIMENTAL ------------- | ||
| // | ||
| // const drawerNamespace = useTypedSelector(state => state.drawerMode.currentDrawerNamespace); | ||
| // const drawerName = useTypedSelector(state => state.drawerMode.currentDrawerName); | ||
| // const drawerResource = useTypedSelector(state => state.drawerMode.currentDrawerResource); | ||
| // const drawerCluster = useTypedSelector(state => state.drawerMode.currentDrawerCluster); | ||
|
|
||
| // -------------------------- | ||
|
|
||
| // const detailView = { | ||
| // pods: <PodDetails />, | ||
| // }; | ||
|
|
||
| const drawerName = useTypedSelector(state => state.drawerMode.currentDrawerName); | ||
|
|
||
| // const localDrawerName = localStorage.getItem('currentDrawerName') as string; | ||
| const drawerNamespace = localStorage.getItem('currentDrawerNamespace') as string; | ||
| const drawerResource = localStorage.getItem('currentDrawerResource') as string; | ||
|
|
||
| console.log('drawerNamespace: ', drawerNamespace); | ||
| console.log('drawerName: ', drawerName); | ||
| console.log('drawerResource: ', drawerResource); | ||
|
|
||
| function closeDrawer() { | ||
| dispatch(setDetailDrawerOpen(false)); | ||
| } | ||
|
|
||
| // This is used to reload the drawer, currently the most viable solution | ||
| const [currentName, setCurrentName] = React.useState(''); | ||
|
|
||
| useEffect(() => { | ||
| // refresh? | ||
| console.log('refresh'); | ||
| console.log('CLOSING DRAWER'); | ||
| console.log('DRAWER OPEN', drawerOpen); | ||
| console.log('IS DRAWER OPEN', drawerOpen); | ||
| console.log('drawerNamespace: ', drawerNamespace); | ||
| console.log('drawerName: ', drawerName); | ||
| console.log('drawerResource: ', drawerResource); | ||
| setCurrentName(drawerName); | ||
| }, [drawerName]); | ||
|
|
||
| console.log('drawer params: ', params); | ||
|
|
||
| function drawerResourceSelector(resource: string) { | ||
| const detailView = { | ||
| pods: <PodDetails />, | ||
| // deployments is missing a details component | ||
| deployments: ( | ||
| <WorkloadDetails | ||
| workloadKind={Deployment} | ||
| drawerName={drawerName} | ||
| drawerNamespace={drawerNamespace} | ||
| /> | ||
| ), | ||
| daemonsets: <DaemonSetDetails />, | ||
| }; | ||
|
|
||
| const workloadKindList = [ | ||
| 'pods', | ||
| 'deployments', | ||
| 'replicasets', | ||
| 'jobs', | ||
| 'cronjobs', | ||
| 'daemonsets', | ||
| 'statefulsets', | ||
| ]; | ||
|
|
||
| if (workloadKindList.includes(resource)) { | ||
| switch (resource) { | ||
| case 'pods': | ||
| return detailView.pods; | ||
| case 'deployments': | ||
| return detailView.deployments; | ||
| case 'replicasets': | ||
| return ReplicaSet; | ||
| case 'jobs': | ||
| return Job; | ||
| case 'cronjobs': | ||
| return CronJob; | ||
| case 'daemonsets': | ||
| return detailView.daemonsets; | ||
| case 'statefulsets': | ||
| return StatefulSet; | ||
| default: | ||
| return null; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // NOTE: for the refresh to remember the drawer we need to use the local drawer name first then the redux if not available | ||
| return ( | ||
| <> | ||
| {mediaQuerySize && ( | ||
| <Drawer variant="persistent" anchor="right" open={drawerOpen} onClose={() => closeDrawer()}> | ||
| <Box width={800}> | ||
| <Box style={{ marginTop: '5rem', marginBottom: '2rem' }}> | ||
| <Button variant="outlined" color="primary" onClick={() => closeDrawer()}> | ||
| Close | ||
| </Button> | ||
| </Box> | ||
| <Box> | ||
| {drawerName === currentName ? ( | ||
| <>{drawerResourceSelector(drawerResource)}</> | ||
| ) : ( | ||
| () => closeDrawer() | ||
| )} | ||
|
|
||
| {/* {drawerName === currentName ? ( | ||
| <WorkloadDetails | ||
| workloadKind={drawerResourceSelector(drawerResource)} | ||
| drawerName={localDrawerName ? localDrawerName : localDrawerName} | ||
| drawerNamespace={drawerNamespace} | ||
| /> | ||
| ) : null} */} | ||
|
|
||
| {/* {drawerResource === 'pods' && drawerName === currentName ? ( | ||
| <WorkloadDetails | ||
| workloadKind={drawerResourceSelector(drawerResource)} | ||
| drawerName={localDrawerName ? localDrawerName : localDrawerName} | ||
| drawerNamespace={drawerNamespace} | ||
| /> | ||
| ) : null} */} | ||
| </Box> | ||
| </Box> | ||
| </Drawer> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.