fix: upstream availability display #1076

Author: 0xJacky

app/src/components/NgxConfigEditor/NgxUpstream.vue

@@ -134,12 +134,16 @@ watch(curUptreamDirectives, () => {
         </template>
 
         <div class="tab-content">
-          <DirectiveEditor>
+          <DirectiveEditor v-model:directives="v.directives">
             <template #directiveSuffix="{ directive }: {directive: NgxDirective}">
               <template v-if="availabilityResult[directive.params]?.online">
                 <ABadge color="green" />
                 {{ availabilityResult[directive.params]?.latency.toFixed(2) }}ms
               </template>
+              <template v-else>
+                <ABadge color="red" />
+                {{ $gettext('Offline') }}
+              </template>
             </template>
           </DirectiveEditor>
         </div>

app/src/components/NgxConfigEditor/store.ts

@@ -5,6 +5,7 @@ export const useNgxConfigStore = defineStore('ngxConfig', () => {
   const ngxConfig = ref<NgxConfig>({
     name: '',
     servers: [],
+    upstreams: [],
   })
 
   const configText = ref('')