Merge pull request #314 from HIRO-MicroDataCenters-BV/bug/model-server-bug-v2

Bug/model server bug v2

Author: rahulnl

components/app/ModelServingCard.vue

@@ -241,10 +241,10 @@
         </div>
       </div>
 
-      <!-- Traffic split (stop propagation so slider doesn't open sheet) -->
+      <!-- Traffic split: section-level clicks bubble (open the sheet); only
+           the interactive slider/button row stops propagation. -->
       <div
         class="px-4 py-3 border-t border-border/50 dark:border-zinc-700/50 bg-muted/10 dark:bg-zinc-800/20"
-        @click.stop
       >
         <div class="flex items-center justify-between gap-2 mb-2">
           <span class="text-xs font-medium text-muted-foreground"
@@ -277,7 +277,7 @@
         </div>
 
         <!-- Slider, step controls, and update (enabled only when has_canary) -->
-        <div class="flex items-center gap-1.5">
+        <div class="flex items-center gap-1.5" @click.stop>
           <Button
             variant="outline"
             size="icon"
@@ -393,6 +393,8 @@ const localCanaryPercent = ref(initialCanaryPercent);
 const statusDotClass = computed(() => {
   const s = props.serving.status?.toLowerCase();
   if (s === 'ready') return 'bg-green-500 shadow-green-500/50 shadow-sm';
+  if (s === 'not_ready')
+    return 'bg-orange-500 shadow-orange-500/50 shadow-sm animate-pulse';
   if (s === 'pending')
     return 'bg-amber-500 shadow-amber-500/50 shadow-sm animate-pulse';
   if (s === 'failed') return 'bg-red-500 shadow-red-500/50 shadow-sm';
@@ -406,6 +408,8 @@ const statusBadgeClass = computed(() => {
   const s = props.serving.status?.toLowerCase();
   if (s === 'ready')
     return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300';
+  if (s === 'not_ready')
+    return 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300';
   if (s === 'pending')
     return 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300';
   if (s === 'failed')

components/app/ModelServingSheet.vue

@@ -266,6 +266,8 @@ const statusBadgeClass = computed(() => {
   const s = props.serving.status?.toLowerCase();
   if (s === 'ready')
     return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300';
+  if (s === 'not_ready')
+    return 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300';
   if (s === 'pending')
     return 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300';
   if (s === 'failed')

composables/useFilteredSortedPagination.ts

@@ -1,10 +1,95 @@
 import { computed, type ComputedRef, type Ref } from 'vue';
 
+interface ExactFilter<T> {
+  /** Field on `T` to match against. */
+  field: keyof T;
+  /** Reactive value to match. Empty / null / `allValue` means "no filter". */
+  value: Ref<string | null | undefined>;
+  /** Sentinel meaning "show all" (skip this filter). Defaults to `'all'`. */
+  allValue?: string;
+}
+
 interface Options<T> {
   /** Fields on `T` whose lowercased string value should match the search query. */
   searchFields: Array<keyof T>;
   /** Field on `T` to sort by — must be a string parseable by `new Date()` or numeric. */
   sortField: keyof T;
+  /**
+   * Optional exact-match (case-insensitive) pre-filters applied before search.
+   * Useful for dropdown filters like a status selector.
+   */
+  exactFilters?: Array<ExactFilter<T>>;
+}
+
+/**
+ * Pure (non-reactive) version of the same pipeline. Takes a plain array and
+ * primitive options, returns the filtered+sorted+paginated slice plus the
+ * total count of items after filter/search (i.e., the count pagination should
+ * display, not the raw input length).
+ *
+ * Use this when you need the same client-side processing in a non-reactive
+ * context (e.g. an `AppTable` `dataSource` callback that's called with params
+ * by the table itself).
+ */
+export function filterSortPaginate<T>(
+  items: T[],
+  opts: {
+    search?: string;
+    searchFields: Array<keyof T>;
+    sortField: keyof T;
+    sortOrder: 'asc' | 'desc';
+    page: number;
+    pageSize: number;
+    exactFilters?: Array<{
+      field: keyof T;
+      value: string | null | undefined;
+      allValue?: string;
+    }>;
+  },
+): { data: T[]; total: number } {
+  let result = [...items];
+
+  for (const f of opts.exactFilters ?? []) {
+    const allValue = f.allValue ?? 'all';
+    if (!f.value || f.value === allValue) continue;
+    const target = String(f.value).toLowerCase();
+    result = result.filter((item) => {
+      const v = item[f.field];
+      return typeof v === 'string' ? v.toLowerCase() === target : false;
+    });
+  }
+
+  const q = opts.search?.trim().toLowerCase();
+  if (q) {
+    result = result.filter((item) =>
+      opts.searchFields.some((field) => {
+        const value = item[field];
+        return typeof value === 'string'
+          ? value.toLowerCase().includes(q)
+          : false;
+      }),
+    );
+  }
+
+  result.sort((a, b) => {
+    const av = a[opts.sortField] as unknown;
+    const bv = b[opts.sortField] as unknown;
+    const ad = typeof av === 'string' ? Date.parse(av) : NaN;
+    const bd = typeof bv === 'string' ? Date.parse(bv) : NaN;
+    if (!Number.isNaN(ad) && !Number.isNaN(bd)) {
+      return opts.sortOrder === 'desc' ? bd - ad : ad - bd;
+    }
+    if (av == null && bv == null) return 0;
+    if (av == null) return opts.sortOrder === 'desc' ? 1 : -1;
+    if (bv == null) return opts.sortOrder === 'desc' ? -1 : 1;
+    if (av < bv) return opts.sortOrder === 'desc' ? 1 : -1;
+    if (av > bv) return opts.sortOrder === 'desc' ? -1 : 1;
+    return 0;
+  });
+
+  const total = result.length;
+  const start = (opts.page - 1) * opts.pageSize;
+  return { data: result.slice(start, start + opts.pageSize), total };
 }
 
 interface Result<T> {
@@ -35,43 +120,25 @@ export function useFilteredSortedPagination<T>(
   pageSize: Ref<number>,
   options: Options<T>,
 ): Result<T> {
-  const filteredAndSorted = computed(() => {
-    let result = [...items.value];
-
-    const q = searchQuery.value?.trim().toLowerCase();
-    if (q) {
-      result = result.filter((item) =>
-        options.searchFields.some((field) => {
-          const value = item[field];
-          return typeof value === 'string'
-            ? value.toLowerCase().includes(q)
-            : false;
-        }),
-      );
-    }
-
-    const order = sortOrder.value;
-    result.sort((a, b) => {
-      const av = a[options.sortField] as unknown;
-      const bv = b[options.sortField] as unknown;
-
-      // Try date parsing first; fall back to numeric/string compare.
-      const ad = typeof av === 'string' ? Date.parse(av) : NaN;
-      const bd = typeof bv === 'string' ? Date.parse(bv) : NaN;
-      if (!Number.isNaN(ad) && !Number.isNaN(bd)) {
-        return order === 'desc' ? bd - ad : ad - bd;
-      }
-
-      if (av == null && bv == null) return 0;
-      if (av == null) return order === 'desc' ? 1 : -1;
-      if (bv == null) return order === 'desc' ? -1 : 1;
-      if (av < bv) return order === 'desc' ? 1 : -1;
-      if (av > bv) return order === 'desc' ? -1 : 1;
-      return 0;
-    });
-
-    return result;
-  });
+  // Filter+sort step (without pagination) — a sufficiently large pageSize
+  // returns everything so we can derive `totalItems` and re-slice for
+  // `paginated` separately.
+  const filteredAndSorted = computed(
+    () =>
+      filterSortPaginate(items.value, {
+        search: searchQuery.value,
+        searchFields: options.searchFields,
+        sortField: options.sortField,
+        sortOrder: sortOrder.value,
+        page: 1,
+        pageSize: Number.MAX_SAFE_INTEGER,
+        exactFilters: (options.exactFilters ?? []).map((f) => ({
+          field: f.field,
+          value: f.value.value,
+          allValue: f.allValue,
+        })),
+      }).data,
+  );
 
   const totalItems = computed(() => filteredAndSorted.value.length);
 

mocks/get.models-serving.json

@@ -727,6 +727,24 @@
       "canary_revision": null,
       "stable_traffic_percent": 100,
       "canary_traffic_percent": null
+    },
+    {
+      "isvc_name": "session-tracker",
+      "served_model_url": "http://session-tracker.admin.dashboard.cog.hiro-develop.nl",
+      "status": "not_ready",
+      "model_id": "f0a1b2c3-d4e5-6789-1234-012345678901",
+      "model_name": "session-classifier",
+      "model_version": "2",
+      "dataset_id": null,
+      "creation_timestamp": "2025-06-20T14:00:00Z",
+      "age": "258 days, 1:38:30",
+      "latest_ready_revision": "session-tracker-predictor-00001",
+      "traffic_percentage": 0,
+      "has_canary": false,
+      "stable_revision": null,
+      "canary_revision": null,
+      "stable_traffic_percent": 100,
+      "canary_traffic_percent": null
     }
   ]
 }

pages/model-serving/index.vue

@@ -72,9 +72,9 @@ const sortOrder = ref<'asc' | 'desc'>(
     ? route.query.sort_order
     : 'desc') as 'asc' | 'desc',
 );
-// Search + sort + pagination run client-side over the fetched `list`
-// (backend doesn't support these query params). Status is still backend-driven
-// via fetchList.
+// Backend /models-serving doesn't support any filter/sort/page params, so the
+// full pipeline runs client-side: status (exact match) → search → sort →
+// paginate.
 const {
   filteredAndSorted: filteredAndSortedList,
   paginated: paginatedList,
@@ -88,6 +88,7 @@ const {
   {
     searchFields: ['isvc_name', 'model_name', 'status'],
     sortField: 'creation_timestamp',
+    exactFilters: [{ field: 'status', value: statusFilter, allValue: 'all' }],
   },
 );
 
@@ -99,6 +100,7 @@ const SORT_OPTIONS = [
 const STATUS_OPTIONS = [
   { value: 'all', label: 'All status' },
   { value: 'ready', label: 'Ready' },
+  { value: 'not_ready', label: 'Not ready' },
   { value: 'pending', label: 'Pending' },
   { value: 'failed', label: 'Failed' },
   { value: 'terminating', label: 'Terminating' },
@@ -251,16 +253,6 @@ watch(
   { deep: true },
 );
 
-// Status filter still goes to the backend, so refetch when it changes.
-watch(
-  () => route.query.status,
-  () => {
-    if (viewMode.value !== 'cards') return;
-    isRefreshing.value = true;
-    fetchList();
-  },
-);
-
 // Watch status filter - update route
 watch(statusFilter, () => {
   const query = { ...route.query } as Record<string, string>;
@@ -368,6 +360,8 @@ const tableColumns = [
       const statusClasses: Record<string, string> = {
         ready:
           'bg-green-100 text-green-700 dark:bg-green-800 dark:text-green-100',
+        not_ready:
+          'bg-orange-100 text-orange-700 dark:bg-orange-800 dark:text-orange-100',
         pending:
           'bg-yellow-100 text-yellow-700 dark:bg-yellow-800 dark:text-yellow-100',
         failed: 'bg-red-100 text-red-700 dark:bg-red-800 dark:text-red-100',
@@ -447,13 +441,9 @@ async function fetchList() {
   if (!isRefreshing.value) loading.value = true;
   error.value = null;
   try {
-    // Backend /models-serving does not support page/limit/search/sort_by/sort_order
-    // query params, so we don't send them. Status is kept conditionally because
-    // it's only added when the user picks a non-"all" filter.
-    const res = await getModelsServing({
-      ...(statusFilter.value &&
-        statusFilter.value !== 'all' && { status: statusFilter.value }),
-    });
+    // Backend /models-serving doesn't support any filter/sort/page params,
+    // so we just fetch the full list and do everything client-side.
+    const res = await getModelsServing({});
     const data = res?.data;
     list.value = Array.isArray(data) ? data : [];
   } catch (e) {
@@ -465,6 +455,53 @@ async function fetchList() {
   }
 }
 
+// Table view's `dataSource`. AppTable calls this with route-derived params
+// (page, limit, search, sort_by, sort_order, status, isvc_name, etc.); we
+// run the same client-side pipeline as the cards view over `list.value` and
+// return the slice in AppTable's expected shape. Performs a lazy fetch on
+// the first call so the table view also works on direct entry.
+async function tableDataSource(params: Record<string, unknown> = {}): Promise<{
+  status_code: number;
+  data: ModelServing[];
+  pagination: {
+    total_items: number;
+    page: number;
+    limit: number;
+    total_pages: number;
+  };
+}> {
+  if (list.value.length === 0) await fetchList();
+
+  const page = parseInt(String(params.page ?? 1)) || 1;
+  const pageSizeParam = parseInt(String(params.limit ?? 10)) || 10;
+  const order: 'asc' | 'desc' =
+    String(params.sort_order ?? 'desc') === 'asc' ? 'asc' : 'desc';
+  const search =
+    (params.isvc_name as string) || (params.search as string) || '';
+  const status = (params.status as string) || 'all';
+
+  const { data, total } = filterSortPaginate<ModelServing>(list.value, {
+    search,
+    searchFields: ['isvc_name', 'model_name', 'status'],
+    sortField: 'creation_timestamp',
+    sortOrder: order,
+    page,
+    pageSize: pageSizeParam,
+    exactFilters: [{ field: 'status', value: status, allValue: 'all' }],
+  });
+
+  return {
+    status_code: 200,
+    data,
+    pagination: {
+      total_items: total,
+      page,
+      limit: pageSizeParam,
+      total_pages: Math.max(1, Math.ceil(total / pageSizeParam)),
+    },
+  };
+}
+
 const cardsTotalPages = computed(() =>
   Math.ceil(cardsTotalItems.value / cardsPageSize.value),
 );
@@ -548,7 +585,7 @@ onMounted(() => {
       v-if="viewMode === 'table'"
       ref="tableRef"
       :columns="tableColumns"
-      :data-source="getModelsServing"
+      :data-source="tableDataSource"
       :sortable-columns="['creation_timestamp']"
       :filterable-columns="['status']"
       :page-size="10"