mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 09:22:43 +03:00
76ceb707f4
This PR builds console static assets into the server docker image at `/srv/console-assets`. When env var `HASURA_GRAPHQL_CONSOLE_ASSETS_DIR=/srv/console-assets` or flag `--console-assets-dir=/srv/console-assets` is set on the server, the files in this directory are served at `/console/assets/*`.
The console html template will have a variable called `cdnAssets: false` when this flag is set and it loads assets from server itself instead of CDN.
The assets are moved to a new bucket with a new naming scheme:
```
graphql-engine-cdn.hasura.io/console/assets/
/common/{}
/versioned/<version/{}
/channel/<channel>/<version>/{}
```
Console served by CLI will still load assets from CDN - will fix that in the next release.
113 lines
3.9 KiB
HTML
113 lines
3.9 KiB
HTML
<html lang="en-us">
|
|
<head>
|
|
<script>
|
|
window.__env = {
|
|
consoleMode: "server",
|
|
urlPrefix: "/console",
|
|
consolePath: "{{consolePath}}",
|
|
isAccessKeySet: {{isAdminSecretSet}},
|
|
isAdminSecretSet: {{isAdminSecretSet}},
|
|
enableTelemetry: {{enableTelemetry}},
|
|
assetsPath: "https://graphql-engine-cdn.hasura.io/console/assets",
|
|
assetsVersion: "{{assetsVersion}}",
|
|
cdnAssets: {{cdnAssets}},
|
|
};
|
|
window.__env.versionedAssetsPath = window.__env.assetsPath;
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.mainContent {
|
|
display: 'none';
|
|
opacity: 0;
|
|
transition: opacity .20s linear;
|
|
}
|
|
.mainContent.show {
|
|
display: 'block';
|
|
opacity: 1;
|
|
transition: opacity .20s linear;
|
|
}
|
|
</style>
|
|
|
|
<div id="loading">
|
|
<div class="page-loading" style="
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: sans-serif;
|
|
justify-content: center;
|
|
">
|
|
<span class="" style="
|
|
font-size: 2em;
|
|
margin-top: -3em;
|
|
color: #848484;
|
|
">
|
|
Loading...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="content" class="mainContent"></div>
|
|
|
|
<script>
|
|
const assetsPathReadyEvent = new Event('assetsPathReadyEvent');
|
|
const loadIcon = (url) => {
|
|
linkElem = document.createElement('link');
|
|
linkElem.rel = 'icon';
|
|
linkElem.type = 'image/svg+xml';
|
|
linkElem.href = url;
|
|
document.head.append(linkElem);
|
|
};
|
|
const loadCSS = (url) => {
|
|
linkElem = document.createElement('link');
|
|
linkElem.rel = 'stylesheet';
|
|
linkElem.charset = 'UTF-8';
|
|
linkElem.href = url;
|
|
document.body.append(linkElem);
|
|
};
|
|
const loadScript = (url) => {
|
|
scriptElem = document.createElement('script');
|
|
scriptElem.charset = 'UTF-8';
|
|
scriptElem.src = url;
|
|
document.body.append(scriptElem);
|
|
};
|
|
const prependSlash = (str) => str === '' ? '' : '/' + str;
|
|
document.body.addEventListener('assetsPathReadyEvent', (e) => {
|
|
loadCSS(window.__env.assetsPath + '/common/css/font-awesome.min.css.gz');
|
|
loadIcon(window.__env.assetsPath + '/common/img/hasura_icon_green.svg');
|
|
loadCSS(window.__env.versionedAssetsPath + '/main.css.gz');
|
|
loadScript(window.__env.versionedAssetsPath + '/main.js.gz');
|
|
loadScript(window.__env.versionedAssetsPath + '/vendor.js.gz');
|
|
|
|
// remove this before merging.
|
|
console.log(window.__env.assetsPath + '/common/css/font-awesome.min.css.gz');
|
|
console.log(window.__env.assetsPath + '/common/img/hasura_icon_green.svg');
|
|
console.log(window.__env.versionedAssetsPath + '/main.css.gz');
|
|
console.log(window.__env.versionedAssetsPath + '/main.js.gz');
|
|
console.log(window.__env.versionedAssetsPath + '/vendor.js.gz');
|
|
}, false);
|
|
|
|
// if cdnAssets is set to false, load assets from server instead of cdn
|
|
if (window.__env.cdnAssets === false) {
|
|
console.log('cdnAssets=false, loading assets from static-dir');
|
|
window.__env.assetsPath =
|
|
window.location.pathname.slice(
|
|
0, window.location.pathname.lastIndexOf(window.__env.consolePath)
|
|
) + '/console/assets';
|
|
// set the path to get versioned assets from server
|
|
window.__env.versionedAssetsPath = window.__env.assetsPath + '/versioned';
|
|
// dispatch the event to load the assets now
|
|
document.body.dispatchEvent(assetsPathReadyEvent);
|
|
|
|
// otherwise load from cdn itself
|
|
} else {
|
|
console.log('cdnAssets=true, loading assets from cdn');
|
|
// set the path (cdn-based) to get assets from
|
|
window.__env.versionedAssetsPath = window.__env.assetsPath + prependSlash(window.__env.assetsVersion);
|
|
// fire the event
|
|
document.body.dispatchEvent(assetsPathReadyEvent);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|