1
0
mirror of https://github.com/ohwgiles/laminar.git synced 2026-03-02 03:40:21 +00:00

resolves #80: reverse-proxy with custom base URL

Fix all hrefs and vue routes to correctly operate against the
<base href> tag. Add a configuration parameter to override the
content of the href attribute, and describe its use.
This commit is contained in:
Oliver Giles
2019-03-29 22:43:16 +03:00
parent 210787a352
commit 95482c78a5
7 changed files with 82 additions and 21 deletions

View File

@@ -6,15 +6,16 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon-precomposed" href="/favicon-152.png">
<link rel="apple-touch-icon-precomposed" href="favicon-152.png">
<link rel="icon" href="favicon.ico">
<title>Laminar</title>
<script src="/js/vue.min.js"></script>
<script src="/js/vue-router.min.js"></script>
<script src="/js/ansi_up.js"></script>
<script src="/js/Chart.min.js"></script>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/custom/style.css" rel="stylesheet">
<script src="/js/app.js" defer></script>
<script src="js/vue.min.js"></script>
<script src="js/vue-router.min.js"></script>
<script src="js/ansi_up.js"></script>
<script src="js/Chart.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="custom/style.css" rel="stylesheet">
<script src="js/app.js" defer></script>
<style>
body, html { height: 100%; }
.navbar { margin-bottom: 0; border-radius: 0; }
@@ -326,7 +327,7 @@
<div id="app">
<nav class="navbar navbar-inverse">
<div>
<router-link to="/" class="navbar-brand"><img src="/icon.png">{{title}}</router-link>
<router-link to="/" class="navbar-brand"><img src="icon.png">{{title}}</router-link>
<router-link to="/jobs" class="btn navbar-btn pull-right">Jobs</router-link>
</div>
</nav>

View File

@@ -23,13 +23,9 @@ const timeScale = function(max){
: { scale:function(v){return v;}, label:'Seconds' };
}
const wsp = function(path) {
return new WebSocket((location.protocol === 'https:'?'wss://':'ws://')
+ location.host + path);
}
const WebsocketHandler = function() {
function setupWebsocket(path, next) {
var ws = wsp(path);
let ws = new WebSocket(document.head.baseURI.replace(/^http/,'ws') + path.substr(1));
ws.onmessage = function(msg) {
msg = JSON.parse(msg.data);
// "status" is the first message the websocket always delivers.
@@ -668,7 +664,7 @@ const Run = function() {
var firstLog = false;
const logFetcher = (vm, name, num) => {
const abort = new AbortController();
fetch('/log/'+name+'/'+num, {signal:abort.signal}).then(res => {
fetch('log/'+name+'/'+num, {signal:abort.signal}).then(res => {
// ATOW pipeThrough not supported in Firefox
//const reader = res.body.pipeThrough(new TextDecoderStream).getReader();
const reader = res.body.getReader();
@@ -678,7 +674,7 @@ const Run = function() {
value = utf8decoder.decode(value);
if (done)
return;
state.log += ansi_up.ansi_to_html(value.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\033\[\{([^:]+):(\d+)\033\\/g, (m,$1,$2)=>{return '<a href="/jobs/'+$1+'" onclick="return vroute(this);">'+$1+'</a>:<a href="/jobs/'+$1+'/'+$2+'" onclick="return vroute(this);">#'+$2+'</a>';}));
state.log += ansi_up.ansi_to_html(value.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\033\[\{([^:]+):(\d+)\033\\/g, (m,$1,$2)=>{return '<a href="jobs/'+$1+'" onclick="return vroute(this);">'+$1+'</a>:<a href="jobs/'+$1+'/'+$2+'" onclick="return vroute(this);">#'+$2+'</a>';}));
vm.$forceUpdate();
if (!firstLog) {
firstLog = true;
@@ -799,6 +795,7 @@ new Vue({
},
router: new VueRouter({
mode: 'history',
base: document.head.baseURI.substr(location.origin.length),
routes: [
{ path: '/', component: Home },
{ path: '/jobs', component: Jobs },