Merge pull request #133 from biothings/modal-es-selection

updated es loading in modal for api and diff release
biothings · Feb 12, 2024 · 3d8352d · 3d8352d
2 parents 01ff445 + 3ce659e
commit 3d8352d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 22 deletions.
diff --git a/webapp/src/ApiGrid.vue b/webapp/src/ApiGrid.vue
@@ -58,17 +58,20 @@
                             <br>
                             <br>
 
-                            <label>Select a ElasticSeach server</label>
+                            <label>Select an ElasticSearch server</label>
                             <div>
-                                <select class="ui fluid es_servers dropdown" name="es_server">
-                                  <option value="">------</option>
-                                  <option v-if="es_servers" v-for="(server_data, es_server) in es_servers"
-                                    :value="es_server"
-                                  >
-                                  {{ es_server}} ({{ server_data.host }})
-                                  </option>
-                                </select>
-                                <br>
+                              <div class="ui fluid es_servers dropdown selection" :class="{loading: isLoadingESServers}">
+                                <input type="hidden" name="es_server">
+                                <i class="dropdown icon"></i>
+                                <div class="default text" v-if="isLoadingESServers">Loading...</div>
+                                <div class="default text" v-else>Select an ElasticSearch server</div>
+                                <div class="menu">
+                                  <div v-if="!isLoadingESServers" v-for="(server_data, es_server) in es_servers" :key="es_server" class="item" :data-value="es_server">
+                                    {{ es_server }} ({{ server_data.host }})
+                                  </div>
+                                </div>
+                              </div>
+                              <br>
                             </div>
 
                             <label>Select a backend the API will connect to to serve the data</label>
@@ -181,7 +184,8 @@ export default {
       es_servers: {},
       backends: {},
       isLoadingBackends: false,
-      backendsDisabled: true
+      backendsDisabled: true,
+      isLoadingESServers: false
     }
   },
   components: { API, PaginatedList },
@@ -205,12 +209,21 @@ export default {
     },
     fetchESServers: function () {
       const self = this
+      self.isLoadingESServers = true
 
       axios.get(axios.defaults.baseURL + '/config')
       .then(response => {
         const conf = response.data.result.scope.config
         self.es_servers = conf.INDEX_CONFIG.value.env
       })
+      .catch(err => {
+        console.log('Error getting index environments: ')
+        console.log(err)
+        self.loaderror(err)
+      })
+      .finally(() => {
+        self.isLoadingESServers = false
+      })
     },
     fetchIndexes: function() {
       const self = this

diff --git a/webapp/src/DiffReleaseEvent.vue b/webapp/src/DiffReleaseEvent.vue
@@ -49,17 +49,20 @@
                 <div class="ui form">
                     <div class="ui centered grid">
                         <div class="eight wide column">
-                            <label>Select a ElasticSeach server</label>
+                          <label>Select an ElasticSearch server</label>
                             <div>
-                                <select class="ui fluid es_servers dropdown" name="es_server">
-                                  <option value="">------</option>
-                                  <option v-if="es_servers" v-for="(server_data, es_server) in es_servers"
-                                    :value="es_server"
-                                  >
-                                  {{ es_server}} ({{ server_data.host }})
-                                  </option>
-                                </select>
-                                <br>
+                              <div class="ui fluid es_servers dropdown selection" :class="{loading: isLoadingESServers}">
+                                <input type="hidden" name="es_server">
+                                <i class="dropdown icon"></i>
+                                <div class="default text" v-if="isLoadingESServers">Loading...</div>
+                                <div class="default text" v-else>Select an ElasticSearch server</div>
+                                <div class="menu">
+                                  <div v-if="!isLoadingESServers" v-for="(server_data, es_server) in es_servers" :key="es_server" class="item" :data-value="es_server">
+                                    {{ es_server }} ({{ server_data.host }})
+                                  </div>
+                                </div>
+                              </div>
+                              <br>
                             </div>
 
                             <label>Select a backend to apply the diff to</label>
@@ -213,7 +216,8 @@ export default {
       es_servers: {},
       selecting_build_config: null,
       isLoadingBackends: false,
-      backendsDisabled: true
+      backendsDisabled: true,
+      isLoadingESServers: false,
     }
   },
   computed: {
@@ -233,6 +237,7 @@ export default {
   methods: {
     fetchESServers: function () {
       const self = this
+      self.isLoadingESServers = true
 
       axios.get(axios.defaults.baseURL + '/config')
       .then(response => {
@@ -247,6 +252,14 @@ export default {
 
         self.es_servers = conf.INDEX_CONFIG.value.env
       })
+      .catch(err => {
+        console.log('Error getting ES servers: ')
+        console.log(err)
+        self.loaderror(err)
+      })
+      .finally(() => {
+        self.isLoadingESServers = false
+      })
     },
     applyDiff (release) {
       var self = this