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 * as React from 'react'
19
import {
20
  Box, Button,
21
  Dialog, DialogActions, DialogContent,
22
  DialogTitle,
23
  IconButton,
24
} from '@mui/material'
25
import EnhancedTableToolbar from '../EnhancedTableToolbar'
26
import OsLogo from '../common/OsLogo'
27
import { Size } from '../../models/size'
28
import BrowserLogo from '../common/BrowserLogo'
29
import browserVersion from '../../util/browser-version'
30
import Grid from '@mui/material/Grid';
31
import { experimentalStyled as styled } from '@mui/material/styles';
32
import Paper from '@mui/material/Paper';
33
import { Info as InfoIcon } from '@mui/icons-material'
34
import { useState } from 'react'
35
import Typography from '@mui/material/Typography'
36

37
const Item = styled(Paper)(({ theme }) => ({
38
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
39
  ...theme.typography.body2,
40
  padding: theme.spacing(2),
41
  textAlign: 'center',
42
  color: theme.palette.text.secondary,
43
}));
44

45
function QueuedSessions (props) {
46
  const [itemOpen, setItemOpen] = useState('')
47
  const { sessionQueueRequests } = props
48
  const queue = sessionQueueRequests.map((sessionQueueRequest) => {
49
    return JSON.parse(sessionQueueRequest)
50
  });
51

52
  const displayRequestInfo = (id: string): JSX.Element => {
53
    const handleInfoIconClick = (): void => {
54
      setItemOpen(id)
55
    }
56
    return (
57
      <IconButton
58
        sx={{ padding: '1px' }}
59
        onClick={handleInfoIconClick}
60
        size='large'
61
      >
62
        <InfoIcon />
63
      </IconButton>
64
    )
65
  }
66

67
  return (
68
    <Box
69
      paddingTop='30px'
70
      width='100%'
71
      bgcolor='background.paper'
72
      marginTop='30px'
73
      marginBottom='20px'
74
      sx={{flexGrow: 1}}
75
    >
76
      {queue.length > 0 && (
77
        <Box minWidth='750px'>
78
          <EnhancedTableToolbar title={`Queue (${queue.length})`} />
79
          <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
80
            {queue.map((queueItem, index) => (
81
              <Grid item xs={2} sm={4} md={4} key={index}>
82
                <Item>
83
                  {displayRequestInfo(index as string)}
84
                  {(queueItem.platformName ?? '' as string).length > 0 &&
85
                   <OsLogo
86
                     osName={queueItem.platformName as string}
87
                     size={Size.S}
88
                   />
89
                  }
90
                  {(queueItem.browserName ?? '' as string).length > 0 &&
91
                   <BrowserLogo
92
                     browserName={queueItem.browserName as string}
93
                   />
94
                  }
95
                  {browserVersion(queueItem.browserVersion as string)}
96
                  <Dialog
97
                    onClose={() => setItemOpen('')}
98
                    aria-labelledby='session-info-dialog'
99
                    open={itemOpen === index}
100
                    fullWidth
101
                    maxWidth='md'
102
                  >
103
                    <DialogTitle id='session-info-dialog'>
104
                      <Typography
105
                        gutterBottom component='span'
106
                        sx={{ paddingX: '10px' }}
107
                      >
108
                        <Box
109
                          fontWeight='fontWeightBold'
110
                          mr={1}
111
                          display='inline'
112
                        >
113
                          Session Request
114
                        </Box>
115
                      </Typography>
116
                      {(queueItem.platformName ?? '' as string).length > 0 &&
117
                       <OsLogo
118
                         osName={queueItem.platformName as string}
119
                         size={Size.S}
120
                       />
121
                      }
122
                      {(queueItem.browserName ?? '' as string).length > 0 &&
123
                       <BrowserLogo
124
                         browserName={queueItem.browserName as string}
125
                       />
126
                      }
127
                      {browserVersion(queueItem.browserVersion as string)}
128
                    </DialogTitle>
129
                    <DialogContent dividers>
130
                      <Typography gutterBottom>
131
                        Capabilities:
132
                      </Typography>
133
                      <Typography gutterBottom component='span'>
134
                                  <pre>
135
                                    {JSON.stringify(queueItem,null, 2)}
136
                                  </pre>
137
                      </Typography>
138
                    </DialogContent>
139
                    <DialogActions>
140
                      <Button
141
                        onClick={() => setItemOpen('')}
142
                        color='primary'
143
                        variant='contained'
144
                      >
145
                        Close
146
                      </Button>
147
                    </DialogActions>
148
                  </Dialog>
149
                </Item>
150
              </Grid>
151
            ))}
152
          </Grid>
153
        </Box>
154
      )}
155
    </Box>
156
  )
157
}
158

159
export default QueuedSessions
160

161