mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 01:12:56 +03:00
add About page to console to show versions info (#2334)
This commit is contained in:
IMRAN KHAN
Rikin Kachhia
parent
e3f68dbb67
commit
4aef5b4c26
@ -100,6 +100,7 @@
|
||||
"__DISABLE_SSR__": true,
|
||||
"__DEVTOOLS__": true,
|
||||
"socket": true,
|
||||
"webpackIsomorphicTools": true
|
||||
"webpackIsomorphicTools": true,
|
||||
"CONSOLE_ASSET_VERSION": true
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,6 +44,7 @@ const globals = {
|
||||
window.__env.nodeEnv !== 'development' ? 'console' : 'console_test',
|
||||
assetsPath: window.__env.assetsPath,
|
||||
serverVersion: window.__env.serverVersion,
|
||||
consoleAssetVersion: CONSOLE_ASSET_VERSION,
|
||||
featuresCompatibility: window.__env.serverVersion
|
||||
? getFeaturesCompatibility(window.__env.serverVersion)
|
||||
: null,
|
||||
@ -57,6 +58,7 @@ if (!window.__env.urlPrefix) {
|
||||
if (!window.__env.consoleMode) {
|
||||
globals.consoleMode = SERVER_CONSOLE_MODE;
|
||||
}
|
||||
|
||||
if (!globals.adminSecret) {
|
||||
globals.adminSecret = null;
|
||||
}
|
||||
|
||||
@ -162,7 +162,8 @@ class Main extends React.Component {
|
||||
const github = require('./images/Github.svg');
|
||||
const discord = require('./images/Discord.svg');
|
||||
const mail = require('./images/mail.svg');
|
||||
const docs = require('./images/logo.svg');
|
||||
const docs = require('./images/docs-logo.svg');
|
||||
const about = require('./images/console-logo.svg');
|
||||
const pixHeart = require('./images/pix-heart.svg');
|
||||
|
||||
const currentLocation = location.pathname;
|
||||
@ -604,6 +605,16 @@ class Main extends React.Component {
|
||||
<span>Head to docs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className={'dropdown-item'}>
|
||||
<Link to="/about">
|
||||
<img
|
||||
className={'img-responsive'}
|
||||
src={about}
|
||||
alt={'about'}
|
||||
/>
|
||||
<span>About</span>
|
||||
</Link>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
22
console/src/components/Main/images/console-logo.svg
Normal file
22
console/src/components/Main/images/console-logo.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#102954;}
|
||||
.st1{fill:#4AD879;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M88.8,35.2c2.6-6.4,2.7-19.6-0.8-29.8l0,0c-0.9-1.8-3.7-1.3-3.8,0.8l0,0.7c-0.6,9.6-4.2,14.9-9.3,17.4
|
||||
c-0.9,0.4-2.2,0.3-3-0.2c-6.2-3.9-13.5-6.2-21.4-6.2c-7.9,0-15.2,2.3-21.4,6.2c-0.8,0.5-1.8,0.6-2.7,0.3c-5.3-2-9-7.8-9.7-17.5
|
||||
l0-0.7c-0.1-2-2.9-2.6-3.8-0.8c-3.5,10.2-3.5,23.4-0.8,29.8c1.3,3.2,1.4,6.8,0.3,10.1c-1.4,4.2-2.1,8.7-2.1,13.4
|
||||
C10.5,79.9,28.6,98,49.8,98.2c22.4,0.3,40.7-17.8,40.7-40.2c0-4.5-0.7-8.8-2.1-12.8C87.4,42,87.4,38.4,88.8,35.2z"/>
|
||||
</g>
|
||||
<ellipse transform="matrix(0.7062 -0.708 0.708 0.7062 -26.3149 52.7024)" class="st1" cx="50.3" cy="58.1" rx="30.6" ry="30.6"/>
|
||||
<path class="st0" d="M55.1,54.8l-7.2-11.1c-1.2-1.8-3.6-2.3-5.4-1.2c-1.1,0.7-1.8,1.9-1.8,3.3c0,0.7,0.3,1.5,0.7,2.1l4.9,7.6
|
||||
c0.4,0.6,0.3,1.3-0.1,1.8l-7.6,8.3c-1.4,1.6-1.3,4,0.3,5.5c0.7,0.7,1.7,1,2.7,1c1.1,0,2.1-0.5,2.8-1.3l5.6-6.6
|
||||
c0.4-0.5,1.2-0.5,1.6,0.1l4,5.7c0.3,0.4,0.6,0.8,1.1,1.2c1.4,1,3.1,0.9,4.3,0.1h0c1.1-0.7,1.8-1.9,1.8-3.3c0-0.7-0.3-1.5-0.6-2.1
|
||||
L55.1,54.8z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
22
console/src/components/Main/images/docs-logo.svg
Normal file
22
console/src/components/Main/images/docs-logo.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#E24444;}
|
||||
.st1{fill:#FFD00B;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M88.8,35.2c2.6-6.4,2.7-19.6-0.8-29.8l0,0c-0.9-1.8-3.7-1.3-3.8,0.8l0,0.7c-0.6,9.6-4.2,14.9-9.3,17.4
|
||||
c-0.9,0.4-2.2,0.3-3-0.2c-6.2-3.9-13.5-6.2-21.4-6.2c-7.9,0-15.2,2.3-21.4,6.2c-0.8,0.5-1.8,0.6-2.7,0.3c-5.3-2-9-7.8-9.7-17.5
|
||||
l0-0.7c-0.1-2-2.9-2.6-3.8-0.8c-3.5,10.2-3.5,23.4-0.8,29.8c1.3,3.2,1.4,6.8,0.3,10.1c-1.4,4.2-2.1,8.7-2.1,13.4
|
||||
C10.5,79.9,28.6,98,49.8,98.2c22.4,0.3,40.7-17.8,40.7-40.2c0-4.5-0.7-8.8-2.1-12.8C87.4,42,87.4,38.4,88.8,35.2z"/>
|
||||
</g>
|
||||
<ellipse transform="matrix(0.7062 -0.708 0.708 0.7062 -26.3149 52.7024)" class="st1" cx="50.3" cy="58.1" rx="30.6" ry="30.6"/>
|
||||
<path class="st0" d="M55.1,54.8l-7.2-11.1c-1.2-1.8-3.6-2.3-5.4-1.2c-1.1,0.7-1.8,1.9-1.8,3.3c0,0.7,0.3,1.5,0.7,2.1l4.9,7.6
|
||||
c0.4,0.6,0.3,1.3-0.1,1.8l-7.6,8.3c-1.4,1.6-1.3,4,0.3,5.5c0.7,0.7,1.7,1,2.7,1c1.1,0,2.1-0.5,2.8-1.3l5.6-6.6
|
||||
c0.4-0.5,1.2-0.5,1.6,0.1l4,5.7c0.3,0.4,0.6,0.8,1.1,1.2c1.4,1,3.1,0.9,4.3,0.1h0c1.1-0.7,1.8-1.9,1.8-3.3c0-0.7-0.3-1.5-0.6-2.1
|
||||
L55.1,54.8z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -1,29 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
.st1{fill:#102954;}
|
||||
</style>
|
||||
<g>
|
||||
<g id="Layer_2_2_">
|
||||
<g id="Layer_2_1_">
|
||||
<circle id="XMLID_118_" class="st0" cx="15" cy="15" r="15"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st1" d="M23.2,11.6c0.6-1.4,0.6-4.2-0.2-6.4l0,0c-0.2-0.4-0.8-0.3-0.8,0.2v0.2c-0.1,2.1-0.9,3.2-2,3.7
|
||||
c-0.2,0.1-0.5,0.1-0.6-0.1c-1.3-0.8-2.9-1.3-4.6-1.3s-3.3,0.5-4.6,1.3c-0.2,0.1-0.4,0.1-0.6,0.1C8.8,8.8,8,7.5,7.8,5.5V5.3
|
||||
C7.7,4.9,7.2,4.8,7,5.2c-0.8,2.2-0.8,5-0.2,6.4c0.3,0.7,0.3,1.4,0.1,2.2c-0.3,0.9-0.5,1.9-0.4,2.9c0.1,4.5,3.9,8.4,8.5,8.4
|
||||
c4.8,0.1,8.7-3.8,8.7-8.6c0-1-0.2-1.9-0.4-2.7C22.9,13,23,12.2,23.2,11.6z"/>
|
||||
</g>
|
||||
<ellipse class="st0" cx="15" cy="16.5" rx="6.6" ry="6.6"/>
|
||||
<path class="st1" d="M16,15.8l-1.6-2.4c-0.3-0.4-0.8-0.5-1.2-0.3c-0.2,0.2-0.4,0.4-0.4,0.7c0,0.2,0.1,0.3,0.2,0.4l1.1,1.6
|
||||
c0.1,0.1,0.1,0.3,0,0.4l-1.6,1.8c-0.3,0.3-0.3,0.9,0.1,1.2c0.2,0.2,0.4,0.2,0.6,0.2c0.2,0,0.4-0.1,0.6-0.3l1.2-1.4
|
||||
c0.1-0.1,0.3-0.1,0.3,0l0.9,1.2c0.1,0.1,0.1,0.2,0.2,0.3c0.3,0.2,0.7,0.2,0.9,0l0,0c0.2-0.2,0.4-0.4,0.4-0.7
|
||||
c0-0.2-0.1-0.3-0.1-0.4L16,15.8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
143
console/src/components/Services/About/About.js
Normal file
143
console/src/components/Services/About/About.js
Normal file
@ -0,0 +1,143 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Endpoints from '../../../Endpoints';
|
||||
|
||||
import globals from '../../../Globals';
|
||||
|
||||
import styles from './About.scss';
|
||||
|
||||
class About extends Component {
|
||||
state = {
|
||||
serverVersion: null,
|
||||
latestServerVersion: null,
|
||||
consoleAssetVersion: globals.consoleAssetVersion,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
fetch(Endpoints.version)
|
||||
.then(response => response.json())
|
||||
.then(serverVersion =>
|
||||
this.setState({
|
||||
serverVersion: serverVersion.version,
|
||||
})
|
||||
);
|
||||
|
||||
fetch(Endpoints.updateCheck)
|
||||
.then(response => response.json())
|
||||
.then(latest =>
|
||||
this.setState({
|
||||
latestServerVersion: latest.latest,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
serverVersion,
|
||||
latestServerVersion,
|
||||
consoleAssetVersion,
|
||||
} = this.state;
|
||||
|
||||
const spinner = <i className="fa fa-spinner fa-spin" />;
|
||||
|
||||
const getServerVersionSection = () => {
|
||||
return (
|
||||
<div>
|
||||
<b>Server version: </b>
|
||||
<span className={styles.add_mar_left_mid}>
|
||||
{serverVersion || spinner}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getLatestServerVersionSection = () => {
|
||||
let updateLinks;
|
||||
if (
|
||||
serverVersion &&
|
||||
latestServerVersion &&
|
||||
serverVersion !== latestServerVersion
|
||||
) {
|
||||
updateLinks = (
|
||||
<span className={styles.add_mar_left_mid}>
|
||||
<a
|
||||
href={
|
||||
'https://github.com/hasura/graphql-engine/releases/tag/' +
|
||||
latestServerVersion
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<i>View Changelog</i>
|
||||
</span>
|
||||
</a>
|
||||
<span>
|
||||
<b>·</b>
|
||||
</span>
|
||||
<a
|
||||
href="https://docs.hasura.io/1.0/graphql/manual/deployment/updating.html"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<i>Update Now</i>
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<b>Latest server version: </b>
|
||||
<span className={styles.add_mar_left_mid}>
|
||||
{latestServerVersion || spinner} {updateLinks}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getConsoleAssetVersionSection = () => {
|
||||
return (
|
||||
<div>
|
||||
<b>Console asset version: </b>
|
||||
<span className={styles.add_mar_left_mid}>
|
||||
{consoleAssetVersion || 'NA'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`container-fluid ${styles.add_mar_top} ${styles.add_mar_left}`}
|
||||
>
|
||||
<div className={styles.subHeader}>
|
||||
<h2 className={`${styles.heading_text} ${styles.remove_pad_bottom}`}>
|
||||
About
|
||||
</h2>
|
||||
<div className={styles.wd60}>
|
||||
<div className={styles.add_mar_top}>
|
||||
{getServerVersionSection()}
|
||||
</div>
|
||||
<div className={styles.add_mar_top}>
|
||||
{getLatestServerVersionSection()}
|
||||
</div>
|
||||
<div className={styles.add_mar_top}>
|
||||
{getConsoleAssetVersionSection()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = () => {
|
||||
return {};
|
||||
};
|
||||
|
||||
const aboutConnector = connect => connect(mapStateToProps)(About);
|
||||
|
||||
export default aboutConnector;
|
||||
3
console/src/components/Services/About/About.scss
Normal file
3
console/src/components/Services/About/About.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import "../../Common/Common.scss";
|
||||
|
||||
|
||||
@ -455,7 +455,9 @@ class PermissionBuilder extends React.Component {
|
||||
input = inputBox();
|
||||
suggestion = jsonSuggestion();
|
||||
} else if (valueType === 'column') {
|
||||
input = renderSelect(dispatchInput, value, tableColumns);
|
||||
input = wrapDoubleQuotes(
|
||||
renderSelect(dispatchInput, value, tableColumns)
|
||||
);
|
||||
} else {
|
||||
input = wrapDoubleQuotes(inputBox());
|
||||
suggestion = sessionVariableSuggestion();
|
||||
|
||||
@ -33,7 +33,7 @@ const Sidebar = ({ location, metadata }) => {
|
||||
sectionsData.push({
|
||||
key: 'allowed-queries',
|
||||
link: '/metadata/allowed-queries',
|
||||
dataTestVal: 'metadata-allowed-queries-link',
|
||||
dataTestVal: 'allowed-queries-link',
|
||||
title: 'Allowed Queries',
|
||||
});
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import { GraphQLVoyager } from 'graphql-voyager';
|
||||
import fetch from 'isomorphic-fetch';
|
||||
import Endpoints from '../../Endpoints';
|
||||
import '../../../node_modules/graphql-voyager/dist/voyager.css';
|
||||
import Endpoints from '../../../Endpoints';
|
||||
import '../../../../node_modules/graphql-voyager/dist/voyager.css';
|
||||
import './voyagerView.css';
|
||||
|
||||
class VoyagerView extends Component {
|
||||
@ -21,9 +21,11 @@ import { getCustomResolverRouter } from './components/Services/CustomResolver';
|
||||
|
||||
import generatedApiExplorer from './components/Services/ApiExplorer/ApiExplorerGenerator';
|
||||
|
||||
import generatedLoginConnector from './components/Login/Login';
|
||||
import generatedVoyagerConnector from './components/Services/VoyagerView/VoyagerView';
|
||||
|
||||
import generatedVoyagerConnector from './components/VoyagerView/VoyagerView';
|
||||
import about from './components/Services/About/About';
|
||||
|
||||
import generatedLoginConnector from './components/Login/Login';
|
||||
|
||||
import metadataContainer from './components/Services/Metadata/Container';
|
||||
import metadataOptionsContainer from './components/Services/Metadata/MetadataOptions/MetadataOptions';
|
||||
@ -91,14 +93,15 @@ const routes = store => {
|
||||
>
|
||||
<Route path="">
|
||||
<IndexRoute component={generatedApiExplorer(connect)} />
|
||||
<Route
|
||||
path="voyager-view"
|
||||
component={generatedVoyagerConnector(connect)}
|
||||
/>
|
||||
<Route
|
||||
path="api-explorer"
|
||||
component={generatedApiExplorer(connect)}
|
||||
/>
|
||||
<Route
|
||||
path="voyager-view"
|
||||
component={generatedVoyagerConnector(connect)}
|
||||
/>
|
||||
<Route path="about" component={about(connect)} />
|
||||
<Route path="metadata" component={metadataContainer(connect)}>
|
||||
<IndexRedirect to="actions" />
|
||||
<Route path="status" component={metadataStatusContainer(connect)} />
|
||||
|
||||
@ -20,6 +20,12 @@ const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(
|
||||
|
||||
// const { UnusedFilesWebpackPlugin } = require('unused-files-webpack-plugin');
|
||||
|
||||
const getRandomHexString = () => {
|
||||
return Math.random()
|
||||
.toString(16)
|
||||
.slice(2);
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
mode: 'development',
|
||||
devtool: 'inline-source-map',
|
||||
@ -147,6 +153,10 @@ module.exports = {
|
||||
__DEVELOPMENT__: true,
|
||||
__DEVTOOLS__: true, // <-------- DISABLE redux-devtools HERE
|
||||
}),
|
||||
// set global consts
|
||||
new webpack.DefinePlugin({
|
||||
CONSOLE_ASSET_VERSION: JSON.stringify(getRandomHexString()),
|
||||
}),
|
||||
webpackIsomorphicToolsPlugin.development(),
|
||||
],
|
||||
};
|
||||
|
||||
@ -22,6 +22,12 @@ const cleanOptions = {
|
||||
dry: false,
|
||||
};
|
||||
|
||||
const getRandomHexString = () => {
|
||||
return Math.random()
|
||||
.toString(16)
|
||||
.slice(2);
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
context: path.resolve(__dirname, '..'),
|
||||
@ -187,6 +193,7 @@ module.exports = {
|
||||
// Useful to reduce the size of client-side libraries, e.g. react
|
||||
NODE_ENV: JSON.stringify('production'),
|
||||
},
|
||||
CONSOLE_ASSET_VERSION: JSON.stringify(getRandomHexString()),
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user