From b24fdfc57cdb39c643ba40e33c00c09efba0ffbf Mon Sep 17 00:00:00 2001 From: richburdon Date: Sat, 23 May 2020 20:38:52 -0400 Subject: [PATCH] Router. --- packages/console-client/config.json | 11 ++++++---- packages/console-client/package.json | 2 +- packages/console-client/src/client.js | 10 ++++++--- .../console-client/src/components/AppBar.js | 21 ++++++++++++------- .../console-client/src/containers/Status.js | 8 ++++--- .../src/containers/StatusBar.js | 20 ++++++++++++------ packages/console-client/version.json | 2 +- packages/console-server/src/main.js | 12 +++++------ 8 files changed, 55 insertions(+), 31 deletions(-) diff --git a/packages/console-client/config.json b/packages/console-client/config.json index 63feb2d..f176fff 100644 --- a/packages/console-client/config.json +++ b/packages/console-client/config.json @@ -1,11 +1,14 @@ { - "publicUrl": "/app", - "port": 4000, - "path": "/api", "app": { "org": "DxOS", "theme": "dark", "title": "Console", - "website": "https://dxos.org" + "website": "https://dxos.org", + "publicUrl": "/console" + }, + "graphql": { + "path": "/api", + "port": 4000, + "pollInterval": 10000 } } diff --git a/packages/console-client/package.json b/packages/console-client/package.json index de64361..17621dd 100644 --- a/packages/console-client/package.json +++ b/packages/console-client/package.json @@ -12,7 +12,7 @@ "analyzer": "webpack --config webpack-analyzer.config.js", "build": "npm run clean && npm run build:module && npm run build:production", "build:module": "babel ./src --out-dir ./dist/es --ignore \"**/*.test.js\" --source-maps inline", - "build:production": "PUBLIC_URL=/app webpack --mode production", + "build:production": "PUBLIC_URL=/console webpack --mode production", "clean": "rm -rf dist", "lint": "semistandard 'src/**/*.js'", "start": "VERBOSE=true webpack-dev-server --mode development", diff --git a/packages/console-client/src/client.js b/packages/console-client/src/client.js index 1e4ce0d..96763ee 100644 --- a/packages/console-client/src/client.js +++ b/packages/console-client/src/client.js @@ -8,16 +8,20 @@ import { InMemoryCache } from 'apollo-cache-inmemory'; const defaultServer = `${window.location.protocol}//${window.location.hostname}`; +export const graphqlApi = config => { + const { graphql: { server = defaultServer, port = 80, path = '/graphql' } } = config; + + return `${server}:${port}${path}`; +}; + // https://www.apollographql.com/docs/react/api/apollo-client/ export const clientFactory = config => { - const { server = defaultServer, port = 80, path = '/graphql' } = config; - // TODO(burdon): Authentication: send signed message to server (from client wallet). // https://www.apollographql.com/docs/react/networking/authentication/ // https://www.apollographql.com/docs/link/ const link = createHttpLink({ - uri: `${server}:${port}${path}` + uri: graphqlApi(config) }); return new ApolloClient({ diff --git a/packages/console-client/src/components/AppBar.js b/packages/console-client/src/components/AppBar.js index 1174741..b4ed0f3 100644 --- a/packages/console-client/src/components/AppBar.js +++ b/packages/console-client/src/components/AppBar.js @@ -5,13 +5,14 @@ import React from 'react'; import { makeStyles } from '@material-ui/core'; import MuiAppBar from '@material-ui/core/AppBar'; -import MuiLink from '@material-ui/core/Link'; +import Link from '@material-ui/core/Link'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; import blueGrey from '@material-ui/core/colors/blueGrey'; -import PublicIcon from '@material-ui/icons/Public'; +import GraphQLIcon from '@material-ui/icons/Adb'; import DxOSIcon from '../icons/DXOS'; +import { graphqlApi } from '../client'; const useStyles = makeStyles((theme) => ({ offset: theme.mixins.denseToolbar, @@ -45,18 +46,24 @@ const AppBar = ({ config }) => { <> - +
- +
{config.app.title}
- - - + + +
diff --git a/packages/console-client/src/containers/Status.js b/packages/console-client/src/containers/Status.js index 3ee38e2..3c757e8 100644 --- a/packages/console-client/src/containers/Status.js +++ b/packages/console-client/src/containers/Status.js @@ -5,12 +5,12 @@ import isObject from 'lodash.isobject'; import omit from 'lodash.omit'; import transform from 'lodash.transform'; -import React from 'react'; +import React, { useContext } from 'react'; import { useQuery } from '@apollo/react-hooks'; import Json from '../components/Json'; -import { useQueryStatusReducer } from '../hooks'; +import { ConsoleContext, useQueryStatusReducer } from '../hooks'; import QUERY_STATUS from '../../gql/status.graphql'; @@ -19,7 +19,9 @@ const removeTypename = data => transform(data, (result, value, key) => { }); const Status = () => { - const data = useQueryStatusReducer(useQuery(QUERY_STATUS, { pollInterval: 5000 })); + const { config } = useContext(ConsoleContext); + + const data = useQueryStatusReducer(useQuery(QUERY_STATUS, { pollInterval: config.graphql.pollInterval })); if (!data) { return null; } diff --git a/packages/console-client/src/containers/StatusBar.js b/packages/console-client/src/containers/StatusBar.js index 256be30..8368db4 100644 --- a/packages/console-client/src/containers/StatusBar.js +++ b/packages/console-client/src/containers/StatusBar.js @@ -5,9 +5,12 @@ import clsx from 'clsx'; import React, { useContext, useEffect, useState } from 'react'; import { makeStyles } from '@material-ui/core'; +import Link from '@material-ui/core/Link'; +import Toolbar from '@material-ui/core/Toolbar'; import ErrorIcon from '@material-ui/icons/Error'; import LoadingIcon from '@material-ui/icons/Wifi'; import RunningIcon from '@material-ui/icons/CheckCircle'; +import PublicIcon from '@material-ui/icons/Public'; import grey from '@material-ui/core/colors/grey'; import green from '@material-ui/core/colors/green'; import red from '@material-ui/core/colors/red'; @@ -22,9 +25,7 @@ const useStyles = makeStyles((theme) => ({ flex: 1, justifyContent: 'space-around', backgroundColor: grey[900], - color: '#EEE', - height: 32, - padding: 4 + color: grey[400] }, left: { width: 160 @@ -40,6 +41,9 @@ const useStyles = makeStyles((theme) => ({ icon: { margin: '0 2px' }, + link: { + color: grey[400] + }, error: { color: red[500] }, @@ -82,14 +86,18 @@ const StatusBar = () => { }; return ( -
-
+ +
+ + + +
(c) {config.app.org} {version}
-
+ ); }; diff --git a/packages/console-client/version.json b/packages/console-client/version.json index 3c6f1d3..90a9a79 100644 --- a/packages/console-client/version.json +++ b/packages/console-client/version.json @@ -1,7 +1,7 @@ { "build": { "name": "@dxos/console-client", - "buildDate": "2020-05-23T23:08:59.032Z", + "buildDate": "2020-05-24T00:17:36.206Z", "version": "1.0.0-beta.0" } } diff --git a/packages/console-server/src/main.js b/packages/console-server/src/main.js index f848888..dbeddb0 100644 --- a/packages/console-server/src/main.js +++ b/packages/console-server/src/main.js @@ -42,12 +42,11 @@ const app = express(); // React app // -const { publicUrl } = config; +const { app: { publicUrl } } = config; app.get(`${publicUrl}(/:filePath)?`, (req, res) => { const { filePath = 'index.html' } = req.params; const file = path.join(__dirname, '../../../node_modules/@dxos/console-client/dist/production', filePath); - console.log(__dirname, file); res.sendFile(file); }); @@ -69,7 +68,8 @@ const server = new ApolloServer({ }, tabs: [ { - endpoint: config.path, + name: 'Status', + endpoint: config.graphql.path, query: print(gql(QUERY_STATUS)) } ] @@ -83,13 +83,13 @@ const server = new ApolloServer({ server.applyMiddleware({ app, - path: config.path + path: config.graphql.path }); // // Start server // -app.listen({ port: config.port }, () => { - log(`Running: http://localhost:${config.port}`); +app.listen({ port: config.graphql.port }, () => { + log(`Running: http://localhost:${config.graphql.port}`); });