From 35d2cd9bf62a748bc3dd5963a3246b5a5a7e2a18 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 11 Dec 2018 19:33:04 -0500
Subject: [PATCH] Load display application data and display number of available
 applications

---
 client/galaxy/scripts/apps/admin.js           |  3 +++
 .../components/admin/DisplayApplications.vue  | 27 +++++++++++++++----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/client/galaxy/scripts/apps/admin.js b/client/galaxy/scripts/apps/admin.js
index cbd957ed4b2..831c65c54cd 100644
--- a/client/galaxy/scripts/apps/admin.js
+++ b/client/galaxy/scripts/apps/admin.js
@@ -113,15 +113,18 @@ window.app = function app(options, bootstrapped) {
                 })
             );
         },
+
         _display_vue_helper: function(component, props) {
             let instance = Vue.extend(component);
             let vm = document.createElement("div");
             this.page.display(vm);
             new instance(props).$mount(vm);
         },
+
         show_data_tables: function() {
             this._display_vue_helper(DataTables);
         },
+
         show_data_types: function() {
             this._display_vue_helper(DataTypes);
         },
diff --git a/client/galaxy/scripts/components/admin/DisplayApplications.vue b/client/galaxy/scripts/components/admin/DisplayApplications.vue
index 415d01bafc6..02bb25f5dab 100644
--- a/client/galaxy/scripts/components/admin/DisplayApplications.vue
+++ b/client/galaxy/scripts/components/admin/DisplayApplications.vue
@@ -1,9 +1,15 @@
 <template>
     <div>
-        <div v-if="error" class="alert alert-danger">
-            {{ error }}
+        <div v-if="errorVisible" class="alert alert-danger">
+            {{ errorMessage }}
+        </div>
+        <div v-if="applicationsVisible" class="card-header">
+            There are currently {{ applicationsLength }}
+            <a class="icon-btn" href="" title="Reload all display applications" data-placement="bottom">
+                <span class="fa fa-refresh"/>
+            </a>
+            display applications loaded.
         </div>
-        <div>Display Applications</div>
     </div>
 </template>
 <script>
@@ -15,9 +21,20 @@ export default {
     data() {
         return {
             applications: [],
-            error: null
+            errorMessage: null
         };
     },
+    computed: {
+        applicationsVisible: function() {
+            return this.applications.length > 0;
+        },
+        applicationsLength: function() {
+            return this.applications.length;
+        },
+        errorVisible: function() {
+            return this.error != null;
+        }
+    },
     created() {
         let Galaxy = getGalaxyInstance();
         let url = `${getAppRoot()}api/display_applications`;
@@ -27,7 +44,7 @@ export default {
                 this.applications = response.data;
             })
             .catch(e => {
-                this.error = this._errorMessage(e);
+                this.errorMessage = this._errorMessage(e);
             });
     },
     methods: {