Add clickable unreported nodes box on dashboard

Links the unreported count box to the node overview page filtered to
show unreported nodes. Since 'unreported' is not a PuppetDB status but
is calculated from report timestamps, the node overview page now handles
it as a special client-side filter using the unreported hours threshold
from the server metadata.

Also fixes a pre-existing bug where route query status params were cast
as string[] without normalisation, causing a TypeError when a single
status value was passed as a string.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Chris Boot <crb@tiger-computing.co.uk>

Author: bootc

ui/src/pages/DashboardPage.vue

@@ -174,6 +174,7 @@ onMounted(() => {
         suffix="nodes"
         :caption="$t('LABEL_UNREPORTED', { dur: unreportedDuration?.humanize() })"
         title_color="secondary"
+        :to="{ name: 'NodeOverview', query: { status: 'unreported' } }"
       />
       <DashboardItem
         v-model="population"

ui/src/pages/node/NodeOverviewPage.vue

@@ -5,6 +5,7 @@ import { useSettingsStore } from 'stores/settings';
 import { PuppetNodeWithEventCount } from 'src/puppet/models/puppet-node';
 import NodeTable from 'components/NodeTable.vue';
 import { useRoute, useRouter } from 'vue-router';
+import moment from 'moment';
 
 const route = useRoute();
 const router = useRouter();
@@ -13,13 +14,26 @@ const nodes = ref<PuppetNodeWithEventCount[]>([]);
 const settings = useSettingsStore();
 const isLoading = ref(false);
 const statusFilter = ref<string[]>();
-const statusOptions = ['failed', 'changed', 'unchanged', 'pending'];
+const statusOptions = ['failed', 'changed', 'unchanged', 'pending', 'unreported'];
+const unreportedDate = ref<moment.Moment>();
+
+function loadMeta() {
+  void Backend.getMeta().then((result) => {
+    if (result.status === 200 && result.data.Data.UnreportedHours) {
+      unreportedDate.value = moment().subtract(
+        moment.duration(result.data.Data.UnreportedHours, 'hours'),
+      );
+    }
+  });
+}
 
 function loadData() {
   if (!settings.environment) return;
   const env = settings.hasEnvironment() ? settings.environment : undefined;
+  const hasUnreported = statusFilter.value?.includes('unreported');
+  const apiStatuses = hasUnreported ? undefined : statusFilter.value;
   isLoading.value = true;
-  void Backend.getViewNodeOverview(env, statusFilter.value)
+  void Backend.getViewNodeOverview(env, apiStatuses)
     .then((result) => {
       if (result.status === 200) {
         nodes.value = result.data.Data.map((s) =>
@@ -33,7 +47,19 @@ function loadData() {
 }
 
 const filteredNodes = computed(() => {
-  return nodes.value.filter((s) => s.certname.includes(filter.value));
+  let result = nodes.value.filter((s) => s.certname.includes(filter.value));
+
+  if (statusFilter.value?.includes('unreported')) {
+    const ud = unreportedDate.value;
+    const otherStatuses = statusFilter.value.filter((s) => s !== 'unreported');
+    result = result.filter((s) => {
+      const isUnreported = !s.report_timestamp || (ud ? ud.isAfter(s.report_timestamp) : false);
+      if (otherStatuses.length === 0) return isUnreported;
+      return isUnreported || otherStatuses.includes(s.latest_report_status);
+    });
+  }
+
+  return result;
 });
 
 function updateRoute() {
@@ -60,8 +86,11 @@ watch(settings, () => {
 });
 
 onMounted(() => {
+  loadMeta();
+
   if (route.query.status) {
-    statusFilter.value = route.query.status as string[];
+    const s = route.query.status;
+    statusFilter.value = (Array.isArray(s) ? s : [s]).filter((v): v is string => v !== null);
   }
 
   if (route.query.filter) {