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 {
19
  ApolloClient,
20
  ApolloProvider,
21
  InMemoryCache,
22
  NormalizedCacheObject,
23
  useQuery
24
} from '@apollo/client'
25
import { Route, Routes } from 'react-router-dom'
26
import React, { useState } from 'react'
27
import ReactModal from 'react-modal'
28
import { GridConfig } from './config'
29
import TopBar from './components/TopBar/TopBar'
30
import Overview from './screens/Overview/Overview'
31
import Footer from './components/Footer/Footer'
32
import Container from '@mui/material/Container'
33
import Sessions from './screens/Sessions/Sessions'
34
import Help from './screens/Help/Help'
35
import NavBar from './components/NavBar/NavBar'
36
import { Box } from '@mui/material'
37
import {GRID_QUERY} from './graphql/grid'
38

39
export const client: ApolloClient<NormalizedCacheObject> = new ApolloClient(
40
  {
41
    cache: new InMemoryCache(),
42
    uri: GridConfig.serverUri
43
  })
44

45
if (process.env.NODE_ENV !== 'test') {
46
  ReactModal.setAppElement('#root')
47
}
48

49
// const GRID_QUERY = loader('./graphql/grid.gql')
50

51
function App () {
52
  const { error, data } = useQuery(GRID_QUERY, {
53
    pollInterval: GridConfig.status.xhrPollingIntervalMillis,
54
    fetchPolicy: 'network-only',
55
    client: client
56
  })
57

58
  console.log("Error", error, "data", data)
59

60
  const [drawerOpen, setDrawerOpen] = useState(true)
61

62
  const toggleDrawer = (): void => {
63
    setDrawerOpen(!drawerOpen)
64
  }
65

66
  const maxSession = error !== undefined ? 0 : data?.grid?.maxSession ?? 0
67
  const sessionCount = error !== undefined ? 0 : data?.grid?.sessionCount ?? 0
68
  const nodeCount = error !== undefined ? 0 : data?.grid?.nodeCount ?? 0
69
  const sessionQueueSize = error !== undefined
70
    ? 0
71
    : data?.grid?.sessionQueueSize ?? 0
72

73
  const topBarSubheader = error !== undefined
74
    ? error?.networkError?.message
75
    : data?.grid?.version
76

77
  return (
78
    <ApolloProvider client={client}>
79
      <Box display='flex'>
80
        <TopBar
81
          subheader={topBarSubheader}
82
          error={error !== undefined}
83
          drawerOpen={drawerOpen}
84
          toggleDrawer={toggleDrawer}
85
        />
86
        {error === undefined && (
87
          <NavBar
88
            open={drawerOpen}
89
            maxSession={maxSession}
90
            sessionCount={sessionCount}
91
            nodeCount={nodeCount}
92
            sessionQueueSize={sessionQueueSize}
93
          />
94
        )}
95
        <Box
96
          component='main'
97
          sx={{
98
            flexGrow: 1,
99
            height: '100vh',
100
            overflow: 'auto',
101
            paddingTop: 8
102
          }}
103
        >
104
          <Container maxWidth={false} sx={{ paddingY: 4 }}>
105
            <Routes>
106
              <Route path='/sessions' element={<Sessions />} />
107
              <Route path='/session/:sessionId' element={<Sessions />} />
108
              <Route path='/help' element={<Help />} />
109
              <Route path='/' element={<Overview />} />
110
              <Route path='*' element={<Help />} />
111
            </Routes>
112
          </Container>
113
          <Footer />
114
        </Box>
115
      </Box>
116
    </ApolloProvider>
117
  )
118
}
119

120
export default App
121

122