Add support for online status in Media Providers

Author: mythz

AiServer.ServiceInterface/MediaProviderServices.cs

@@ -35,8 +35,12 @@ public object Any(QueryMediaProviders request)
         using var db = autoQuery.GetDb(request, base.Request);
         var q = autoQuery.CreateQuery(request, base.Request, db);
         var r = autoQuery.Execute(request, q, base.Request, db);
-        r.Results.ForEach(x => x.MediaType = appData.MediaTypes.GetAll()
-            .FirstOrDefault(t => t.Id == x.MediaTypeId));
+        var providers = appData.MediaProviders.ToDictionary(x => x.Id);
+        r.Results.ForEach(x =>
+        {
+            x.OfflineDate = providers.GetValueOrDefault(x.Id)?.OfflineDate;
+            x.MediaType = appData.MediaTypes.GetAll().FirstOrDefault(t => t.Id == x.MediaTypeId);
+        });
         return r;
     }
 

AiServer.ServiceInterface/OpenAiChatServices.cs

@@ -86,10 +86,10 @@ public object Any(QueryAiProviders query)
         var q = autoQuery.CreateQuery(query, base.Request, db);
         var r = autoQuery.Execute(query, q, base.Request, db);
         var aiTypes = appData.AiTypes.GetAll().ToDictionary(x => x.Id);
-        var aiProviders = appData.AiProviders.ToDictionary(x => x.Id);
+        var providers = appData.AiProviders.ToDictionary(x => x.Id);
         r.Results.ForEach(x =>
         {
-            x.OfflineDate = aiProviders.GetValueOrDefault(x.Id)?.OfflineDate;
+            x.OfflineDate = providers.GetValueOrDefault(x.Id)?.OfflineDate;
             x.AiType = aiTypes.GetValueOrDefault(x.AiTypeId);
         });
         return r;

AiServer/wwwroot/mjs/components/AiProviders.mjs

@@ -175,8 +175,8 @@ export default {
         const selectedModels = ref([])
         const providerBaseUrls = {}
         const formModel = computed(() => (grid.value?.createForm ?? grid.value?.editForm)?.model)
-        const checking = ref(false)
         let isEdit = false
+        const checking = ref(false)
         const { formatDate, relativeTime } = useFormatters()
 
         onMounted(async () => {

AiServer/wwwroot/mjs/components/MediaProviders.mjs

@@ -1,6 +1,6 @@
 import {ref, computed, onMounted, watch } from "vue"
-import { useClient } from "@servicestack/vue"
-import { QueryMediaModels, QueryMediaTypes, GetComfyModels } from "../dtos.mjs"
+import { useClient, useFormatters } from "@servicestack/vue"
+import {QueryMediaModels, QueryMediaTypes, GetComfyModels, CheckMediaProviderStatus} from "../dtos.mjs"
 
 const SelectModels = {
     template: `
@@ -255,12 +255,13 @@ export default {
         SelectModels,
     },
     template: `
-        <AutoQueryGrid ref="grid" :type="type" selectedColumns="id,enabled,name,type,mediaTypeId,apiKey,models"
-            :visibleFrom="{ id:'never', enabled:'never', mediaTypeId:'never'}" modelTitle="Generation Provider" @nav="onNav">
-            <template #name="{ id, name, enabled }">
+        <AutoQueryGrid ref="grid" :type="type" selectedColumns="id,enabled,offlineDate,name,type,mediaTypeId,apiKey,models"
+            :visibleFrom="{ id:'never', enabled:'never', offlineDate:'never', mediaTypeId:'never'}" modelTitle="Generation Provider" @nav="onNav">
+            <template #name="{ id, name, enabled, offlineDate }">
                 <div class="flex">
                     <svg v-if="enabled" class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17 7H7a5 5 0 0 0-5 5a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5a5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3a3 3 0 0 1-3 3"/></svg>
                     <svg v-else class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6m0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4M7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3"/></svg>
+                    <span :title="!enabled ? 'disabled' : offlineDate ? 'offline ' + relativeTime(offlineDate) : 'online'"><svg :class="['h-6 w-6', !enabled ? 'text-grey-500' : offlineDate ? 'text-red-500' : 'text-green-500']" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="8" fill="currentColor"/></svg></span>
                     <div class="ml-1">{{name}}</div>
                 </div>
             </template>
@@ -298,6 +299,13 @@ export default {
               </div>
             </template>
             <template #formfooter="{ form, formInstance, apis, model, editId, updateModel }">
+                <div v-if="form=='edit'" class="pl-6 mb-2 text-gray-500">
+                    <div class="flex">
+                        <svg :class="['h-6 w-6', !model.enabled ? 'text-grey-500' : model.offlineDate ? 'text-red-500' : 'text-green-500']" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="8" fill="currentColor"/></svg>
+                        <span>{{!model.enabled ? 'disabled' : model.offlineDate ? 'offline ' + relativeTime(model.offlineDate) : 'online'}}</span>
+                        <button type="button" @click="checkStatus(model.name)" class="ml-2 rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" :disabled="checking">{{checking ? 'checking...' : 'check status'}}</button>
+                    </div>
+                </div>
                 <div class="pl-6">
                 <SelectModels 
                     v-if="formModel"
@@ -324,6 +332,8 @@ export default {
         const selectedModels = ref([])
         const providerTypes = ref({})
         const formModel = computed(() => (grid.value?.createForm ?? grid.value?.editForm)?.model)
+        const checking = ref(false)
+        const { formatDate, relativeTime } = useFormatters()
 
         onMounted(async () => {
             const api = await client.api(new QueryMediaTypes())
@@ -353,6 +363,18 @@ export default {
             }
         }
 
+        async function checkStatus(provider) {
+            checking.value = true
+            const api = await client.api(new CheckMediaProviderStatus({ provider }))
+            if (api.response) {
+                grid.value?.setEdit({
+                    offlineDate: api.response.result ? null : new Date(),
+                })
+                grid.value?.update()
+            }
+            checking.value = false
+        }
+
         watch(() => providerType.value, () => {
             if (!providerTypes.value[providerType.value]) return
             let providerTypeDefaults = providerTypes.value[providerType.value]
@@ -377,7 +399,8 @@ export default {
 
         return {
             grid, apiTypes, providerTypes, providerType, providerModels, formModel, selectedModels,
-            allProviderModels, updateSelected, onNav
+            allProviderModels, updateSelected, onNav,
+            checkStatus, checking,
         }
     }
 }