Allow Horizon to be used on a subdomain without a subfolder

resources/js/app.js

@@ -21,10 +21,19 @@ window.Popper = require('popper.js').default;
 
 Vue.prototype.$http = axios.create();
 
+window.Horizon.basePath = '/' + window.Horizon.path;
+
+let routerBasePath = window.Horizon.basePath + '/';
+
+if (window.Horizon.path === '' || window.Horizon.path === '/') {
+    routerBasePath = '/';
+    window.Horizon.basePath = '';
+}
+
 const router = new VueRouter({
     routes: Routes,
     mode: 'history',
-    base: '/' + window.Horizon.path + '/',
+    base: routerBasePath,
 });
 
 Vue.component('vue-json-pretty', VueJsonPretty);

resources/js/screens/dashboard.vue

@@ -64,7 +64,7 @@
              * Load the general stats.
              */
             loadStats() {
-                return this.$http.get('/' + Horizon.path + '/api/stats')
+                return this.$http.get(Horizon.basePath + '/api/stats')
                     .then(response => {
                         this.stats = response.data;
 
@@ -80,7 +80,7 @@
              * Load the workers stats.
              */
             loadWorkers() {
-                return this.$http.get('/' + Horizon.path + '/api/masters')
+                return this.$http.get(Horizon.basePath + '/api/masters')
                     .then(response => {
                         this.workers = response.data;
                     });
@@ -91,7 +91,7 @@
              * Load the workload stats.
              */
             loadWorkload() {
-                return this.$http.get('/' + Horizon.path + '/api/workload')
+                return this.$http.get(Horizon.basePath + '/api/workload')
                     .then(response => {
                         this.workload = response.data;
                     });

resources/js/screens/failedJobs/index.vue

@@ -70,7 +70,7 @@
 
                 var tagQuery = this.tagSearchPhrase ? 'tag=' + this.tagSearchPhrase + '&' : '';
 
-                this.$http.get('/' + Horizon.path + '/api/jobs/failed?' + tagQuery + 'starting_at=' + starting)
+                this.$http.get(Horizon.basePath + '/api/jobs/failed?' + tagQuery + 'starting_at=' + starting)
                     .then(response => {
                         if (!this.$root.autoLoadsNewEntries && refreshing && !response.data.jobs.length) {
                             return;
@@ -109,7 +109,7 @@
 
                 this.retryingJobs.push(id);
 
-                this.$http.post('/' + Horizon.path + '/api/jobs/retry/' + id)
+                this.$http.post(Horizon.basePath + '/api/jobs/retry/' + id)
                     .then((response) => {
                         setTimeout(() => {
                             this.retryingJobs = _.reject(this.retryingJobs, job => job == id);

resources/js/screens/failedJobs/job.vue

@@ -44,7 +44,7 @@
             loadFailedJob(id) {
                 this.ready = false;
 
-                this.$http.get('/' + Horizon.path + '/api/jobs/failed/' + id)
+                this.$http.get(Horizon.basePath + '/api/jobs/failed/' + id)
                     .then(response => {
                         this.job = response.data;
 
@@ -57,7 +57,7 @@
              * Reload the job retries.
              */
             reloadRetries() {
-                this.$http.get('/' + Horizon.path + '/api/jobs/failed/' + this.$route.params.jobId)
+                this.$http.get(Horizon.basePath + '/api/jobs/failed/' + this.$route.params.jobId)
                     .then(response => {
                         this.job.retried_by = response.data.retried_by;
 
@@ -75,7 +75,7 @@
 
                 this.retrying = true;
 
-                this.$http.post('/' + Horizon.path + '/api/jobs/retry/' + id)
+                this.$http.post(Horizon.basePath + '/api/jobs/retry/' + id)
                     .then(() => {
                         setTimeout(() => {
                             this.reloadRetries();
@@ -211,7 +211,7 @@
                     </td>
 
                     <td class="table-fit">
-                        <a v-if="retry.status == 'failed'" :href="'/' + Horizon.path + '/failed/'+retry.id">
+                        <a v-if="retry.status == 'failed'" :href="Horizon.basePath + '/failed/'+retry.id">
                             {{ retry.id }}
                         </a>
                         <span v-else>{{ retry.id }}</span>

resources/js/screens/metrics/jobs.vue

@@ -29,7 +29,7 @@
             loadJobs() {
                 this.ready = false;
 
-                this.$http.get('/' + Horizon.path + '/api/metrics/jobs')
+                this.$http.get(Horizon.basePath + '/api/metrics/jobs')
                     .then(response => {
                         this.jobs = response.data;
 

resources/js/screens/metrics/preview.vue

@@ -36,7 +36,7 @@
             loadMetric() {
                 this.ready = false;
 
-                this.$http.get('/' + Horizon.path + '/api/metrics/' + this.$route.params.type + '/' + encodeURIComponent(this.$route.params.slug))
+                this.$http.get(Horizon.basePath + '/api/metrics/' + this.$route.params.type + '/' + encodeURIComponent(this.$route.params.slug))
                     .then(response => {
                         let data = this.prepareData(response.data);
 

resources/js/screens/metrics/queues.vue

@@ -29,7 +29,7 @@
             loadQueues() {
                 this.ready = false;
 
-                this.$http.get('/' + Horizon.path + '/api/metrics/queues')
+                this.$http.get(Horizon.basePath + '/api/metrics/queues')
                     .then(response => {
                         this.queues = response.data;
 

resources/js/screens/monitoring/index.vue

@@ -36,7 +36,7 @@
             loadTags() {
                 this.ready = false;
 
-                this.$http.get('/' + Horizon.path + '/api/monitoring')
+                this.$http.get(Horizon.basePath + '/api/monitoring')
                     .then(response => {
                         this.tags = response.data;
 
@@ -66,7 +66,7 @@
                     return;
                 }
 
-                this.$http.post('/' + Horizon.path + '/api/monitoring', {'tag': this.newTag})
+                this.$http.post(Horizon.basePath + '/api/monitoring', {'tag': this.newTag})
                     .then(response => {
                         $('#addTagModal').modal('hide');
 
@@ -92,7 +92,7 @@
              * Stop monitoring the given tag.
              */
             stopMonitoring(tag) {
-                this.$http.delete('/' + Horizon.path + '/api/monitoring/' + encodeURIComponent(tag))
+                this.$http.delete(Horizon.basePath + '/api/monitoring/' + encodeURIComponent(tag))
                     .then(() => {
                         this.tags = _.reject(this.tags, existing => existing.tag == tag)
                     })

resources/js/screens/monitoring/tag-jobs.vue

@@ -61,7 +61,7 @@
 
                 tag = this.type == 'failed' ? 'failed:' + tag : tag;
 
-                this.$http.get('/' + Horizon.path + '/api/monitoring/' + encodeURIComponent(tag) + '?starting_at=' + starting + '&limit=' + this.perPage)
+                this.$http.get(Horizon.basePath + '/api/monitoring/' + encodeURIComponent(tag) + '?starting_at=' + starting + '&limit=' + this.perPage)
                     .then(response => {
                         if (!this.$root.autoLoadsNewEntries && refreshing && this.jobs.length && _.first(response.data.jobs).id !== _.first(this.jobs).id) {
                             this.hasNewEntries = true;

resources/js/screens/recentJobs/index.vue

@@ -57,7 +57,7 @@
                     this.ready = false;
                 }
 
-                this.$http.get('/' + Horizon.path + '/api/jobs/recent?starting_at=' + starting + '&limit=' + this.perPage)
+                this.$http.get(Horizon.basePath + '/api/jobs/recent?starting_at=' + starting + '&limit=' + this.perPage)
                     .then(response => {
                         if (!this.$root.autoLoadsNewEntries && refreshing && this.jobs.length && _.first(response.data.jobs).id !== _.first(this.jobs).id) {
                             this.hasNewEntries = true;