adds health filter to shards view

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 * truncate long fields in search results table, fixes [#211](https://github.com/cars10/elasticvue/issues/211)
 * fix search results table column filtering again, fixes [#244](https://github.com/cars10/elasticvue/issues/244)
+* fix hotkey issues, fixes [#273](https://github.com/cars10/elasticvue/issues/273)
+* adds health filter to shards view
 
 ## 1.1.0
 

src/components/shards/IndexShards.vue

@@ -10,13 +10,16 @@
     <q-separator />
 
     <loader-status :request-state="requestState">
-      <shards-table :shards="shards" @reload="load" />
+      <shards-table :shards="shards" @reload="load">
+        <q-select v-model="health" :options="['green', 'yellow', 'red']" label="Health" clearable dense outlined
+                  class="q-mr-md" style="min-width: 140px" />
+      </shards-table>
     </loader-status>
   </q-card>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, Ref, ref } from 'vue'
+  import { onMounted, Ref, ref, watch } from 'vue'
   import ReloadButton from '../shared/ReloadButton.vue'
   import LoaderStatus from '../shared/LoaderStatus.vue'
   import { useElasticsearchAdapter } from '../../composables/CallElasticsearch'
@@ -28,16 +31,21 @@
   const shards: Ref<TableShards> = ref({} as TableShards)
 
   const { requestState, callElasticsearch } = useElasticsearchAdapter()
-  const catIndicesArgs = { h: ['index', 'health', 'pri', 'rep', 'status'], s: ['health:desc', 'index'] }
+  const health = ref(null)
 
   const load = async () => {
+    let catIndicesArgs = { h: ['index', 'health', 'pri', 'rep', 'status'], s: ['health:desc', 'index'] }
+
+    if (health.value) catIndicesArgs['health'] = health.value
+
     const catIndices = callElasticsearch('catIndices', catIndicesArgs)
     const catShards = callElasticsearch('catShards', CAT_METHOD_PARAMS)
 
     const [indices, rawShards]: [EsShardIndex[], EsShard[]] = await Promise.all([catIndices, catShards])
     shards.value = convertShards(rawShards, indices)
   }
 
+  watch(health, load)
   onMounted(load)
 
   const CAT_METHOD_PARAMS = {

src/components/shards/ShardsTable.vue

@@ -8,6 +8,8 @@
     </div>
 
     <div class="flex">
+      <slot />
+
       <filter-input v-model="filter" />
 
       <q-btn icon="settings" round flat class="q-ml-sm">
@@ -47,7 +49,8 @@
             </svg>
             <span :class="{'text-underline': currentReroutingShard.index === col.name}">{{ col.label }}</span>
           </div>
-          <small class="text-weight-regular" :title="`${shards.indices[col.name].pri} pri / ${shards.indices[col.name].rep} rep`">
+          <small class="text-weight-regular"
+                 :title="`${shards.indices[col.name].pri} pri / ${shards.indices[col.name].rep} rep`">
             {{ shards.indices[col.name].pri }}/{{ shards.indices[col.name].rep }} shards
           </small>
         </q-th>