ui: attempt workaround for fortinet

Author: sevein

.editorconfig

@@ -5,7 +5,7 @@ root = true
 [Makefile]
 indent_style = tab
 
-[*.js]
+[*.js,*.ts]
 indent_style = space
 indent_size = 2
 

ui/src/client.ts

@@ -0,0 +1,47 @@
+import * as client from './client/src';
+
+
+declare global {
+  interface Window {
+    enduro: any;
+    fgt_sslvpn: any;
+  }
+}
+
+function apiPath(): string {
+  const location = window.location;
+  const path = location.protocol
+    + '//'
+    + location.hostname
+    + (location.port ? ':' + location.port : '')
+    + location.pathname
+    + (location.search ? location.search : '');
+
+  return path.replace(/\/$/, '');
+}
+
+export let EnduroCollectionClient: client.CollectionApi;
+
+export function setUpEnduroClient() {
+  let path = apiPath();
+
+  // path seems to be wrong when Enduro is deployed behind FortiNet SSLVPN.
+  // There is some URL rewriting going on that is beyond my understanding.
+  // This is an attempt to rewrite the URL using their url_rewrite function.
+  if (typeof window.fgt_sslvpn !== 'undefined') {
+    path = window.fgt_sslvpn.url_rewrite(path);
+  }
+
+  const config: client.Configuration = new client.Configuration({basePath: path});
+  EnduroCollectionClient = new client.CollectionApi(config);
+
+  // tslint:disable-next-line:no-console
+  console.log('Enduro client created', path);
+}
+
+window.enduro = {
+  // As a last resort, user could run window.enduro.reload() from console?
+  reload: () => {
+    setUpEnduroClient();
+  },
+};

ui/src/components/CollectionDetail.vue

@@ -73,7 +73,7 @@
 
 <script lang="ts">
 import { CollectionShowResponseBody } from '../client/src';
-import { EnduroCollectionClient } from '../main';
+import { EnduroCollectionClient } from '../client';
 import { Component, Inject, Prop, Provide, Vue } from 'vue-property-decorator';
 import CollectionStatusBadge from '@/components/CollectionStatusBadge.vue';
 

ui/src/components/CollectionList.vue

@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import { Component, Prop, Provide, Vue } from 'vue-property-decorator';
-import { EnduroCollectionClient } from '../main';
+import { EnduroCollectionClient } from '../client';
 import CollectionStatusBadge from '@/components/CollectionStatusBadge.vue';
 import { CollectionListRequest, CollectionListResponseBody, EnduroStoredCollectionResponseBodyCollection } from '../client/src';
 

ui/src/main.ts

@@ -3,25 +3,7 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 import BootstrapVue from 'bootstrap-vue';
-import * as client from './client/src';
-
-function apiPath(): string {
-  const location = window.location;
-  const path = location.protocol
-    + '//'
-    + location.hostname
-    + (location.port ? ':' + location.port : '')
-    + location.pathname
-    + (location.search ? location.search : '');
-
-  return path.replace(/\/$/, '');
-}
-
-console.log(apiPath());
-
-export let EnduroCollectionClient = new client.CollectionApi(
-  new client.Configuration({basePath: apiPath()},
-));
+import { EnduroCollectionClient, setUpEnduroClient } from './client';
 
 Vue.use(BootstrapVue);
 
@@ -45,4 +27,7 @@ new Vue({
   router,
   store,
   render: (h) => h(App),
+  beforeMount: () => {
+    setUpEnduroClient();
+  },
 }).$mount('#app');

ui/src/views/CollectionWorkflow.vue

@@ -59,7 +59,7 @@
 
 <script lang="ts">
 import { Component, Prop, Provide, Vue } from 'vue-property-decorator';
-import { EnduroCollectionClient } from '../main';
+import { EnduroCollectionClient } from '../client';
 import CollectionStatusBadge from '@/components/CollectionStatusBadge.vue';
 import { CollectionShowResponseBody, CollectionWorkflowResponseBody, EnduroCollectionWorkflowHistoryResponseBody } from '../client/src';