1
// Licensed to the Software Freedom Conservancy (SFC) under one
2
// or more contributor license agreements.  See the NOTICE file
3
// distributed with this work for additional information
4
// regarding copyright ownership.  The SFC licenses this file
5
// to you under the Apache License, Version 2.0 (the
6
// "License"); you may not use this file except in compliance
7
// with the License.  You may obtain a copy of the License at
8
//
9
//   http://www.apache.org/licenses/LICENSE-2.0
10
//
11
// Unless required by applicable law or agreed to in writing,
12
// software distributed under the License is distributed on an
13
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14
// KIND, either express or implied.  See the License for the
15
// specific language governing permissions and limitations
16
// under the License.
17

18
import Divider from '@mui/material/Divider'
19
import MuiDrawer from '@mui/material/Drawer'
20
import IconButton from '@mui/material/IconButton'
21
import List from '@mui/material/List'
22
import ListItem from '@mui/material/ListItem'
23
import ListItemIcon from '@mui/material/ListItemIcon'
24
import ListItemText from '@mui/material/ListItemText'
25
import { ChevronLeft as ChevronLeftIcon } from '@mui/icons-material'
26
import { Dashboard as DashboardIcon } from '@mui/icons-material'
27
import { Assessment as AssessmentIcon } from '@mui/icons-material'
28
import { Help as HelpIcon } from '@mui/icons-material'
29
import React from 'react'
30
import { Box, Typography } from '@mui/material'
31
import { useLocation } from 'react-router-dom'
32
import OverallConcurrency from './OverallConcurrency'
33
import { CSSObject, styled, Theme } from '@mui/material/styles'
34

35
const drawerWidth = 240
36

37
function ListItemLink (props): JSX.Element {
38
  return <ListItem button component='a' {...props} />
39
}
40

41
const openedMixin = (theme: Theme): CSSObject => ({
42
  width: drawerWidth,
43
  transition: theme.transitions.create('width', {
44
    easing: theme.transitions.easing.sharp,
45
    duration: theme.transitions.duration.enteringScreen
46
  }),
47
  overflowX: 'hidden'
48
})
49

50
const closedMixin = (theme: Theme): CSSObject => ({
51
  transition: theme.transitions.create('width', {
52
    easing: theme.transitions.easing.sharp,
53
    duration: theme.transitions.duration.leavingScreen
54
  }),
55
  overflowX: 'hidden',
56
  width: `calc(${theme.spacing(7)} + 1px)`,
57
  [theme.breakpoints.up('sm')]: {
58
    width: `calc(${theme.spacing(8)} + 1px)`
59
  }
60
})
61

62
const Drawer = styled(MuiDrawer,
63
  { shouldForwardProp: (prop) => prop !== 'open' })(
64
  ({ theme, open }) => ({
65
    width: drawerWidth,
66
    flexShrink: 0,
67
    whiteSpace: 'nowrap',
68
    boxSizing: 'border-box',
69
    ...(open && {
70
      ...openedMixin(theme),
71
      '& .MuiDrawer-paper': openedMixin(theme)
72
    }),
73
    ...(!open && {
74
      ...closedMixin(theme),
75
      '& .MuiDrawer-paper': closedMixin(theme)
76
    })
77
  })
78
)
79

80
function NavBarBottom (props): JSX.Element {
81
  const {
82
    sessionQueueSize,
83
    sessionCount,
84
    maxSession,
85
    nodeCount
86
  } = props
87
  const location = useLocation()
88
  // Not showing the overall status when the user is on the Overview
89
  // page and there is only one node, because polling is not happening
90
  // at the same time, and it could be confusing for the user. So,
91
  // displaying it when there is more than one node, or when the user is
92
  // on a different page and there is at least one node registered.
93
  const showOverallConcurrency =
94
    nodeCount > 1 || (location.pathname !== '/' && nodeCount > 0)
95

96
  return (
97
    <div>
98
      <Box p={3} m={1}>
99
        <Typography
100
          align='center'
101
          gutterBottom
102
          variant='h4'
103
        >
104
          Queue size: {sessionQueueSize}
105
        </Typography>
106
      </Box>
107
      {showOverallConcurrency && (
108
        <OverallConcurrency
109
          sessionCount={sessionCount}
110
          maxSession={maxSession}
111
        />
112
      )}
113
    </div>
114
  )
115
}
116

117
function NavBar (props) {
118
  const {
119
    open,
120
    maxSession,
121
    sessionCount,
122
    nodeCount,
123
    sessionQueueSize
124
  } = props
125

126
  return (
127
    <Drawer
128
      variant='permanent'
129
      open={open}
130
    >
131
      <Box
132
        display='flex'
133
        alignItems='center'
134
        justifyContent='flex-end'
135
        sx={{ bgcolor: 'primary.main' }}
136
        marginTop={2}
137
      >
138
        <IconButton color='secondary' size='large'>
139
          <ChevronLeftIcon />
140
        </IconButton>
141
      </Box>
142
      <Divider />
143
      <List>
144
        <div>
145
          <ListItemLink href='#'>
146
            <ListItemIcon>
147
              <DashboardIcon />
148
            </ListItemIcon>
149
            <ListItemText primary='Overview' />
150
          </ListItemLink>
151
          <ListItemLink href='#/sessions'>
152
            <ListItemIcon>
153
              <AssessmentIcon />
154
            </ListItemIcon>
155
            <ListItemText primary='Sessions' />
156
          </ListItemLink>
157
          <ListItemLink href='#/help'>
158
            <ListItemIcon>
159
              <HelpIcon />
160
            </ListItemIcon>
161
            <ListItemText primary='Help' />
162
          </ListItemLink>
163
        </div>
164
      </List>
165
      <Box flexGrow={1} />
166
      {open && (
167
        <NavBarBottom
168
          sessionQueueSize={sessionQueueSize}
169
          sessionCount={sessionCount}
170
          maxSession={maxSession}
171
          nodeCount={nodeCount}
172
        />
173
      )}
174
    </Drawer>
175
  )
176
}
177

178
export default NavBar
179

180