fix(ui): improve filters, companies and page breadcrumb

frontend/package.json

@@ -26,8 +26,8 @@
     "@logto/vue": "^3.0.8",
     "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-    "@nethesis/vue-components": "^3.11.0",
-    "@pinia/colada": "^1.3.1",
+    "@nethesis/vue-components": "^3.12.1",
+    "@pinia/colada": "^1.4.2",
     "@pinia/colada-plugin-auto-refetch": "^0.2.6",
     "@tailwindcss/vite": "^4.1.10",
     "@vuepic/vue-datepicker": "^12.1.0",
@@ -54,7 +54,7 @@
     "ws": "^8.21.0"
   },
   "devDependencies": {
-    "@pinia/colada-devtools": "^1.1.0",
+    "@pinia/colada-devtools": "^1.1.2",
     "@tsconfig/node22": "^22.0.1",
     "@types/lodash": "^4.17.18",
     "@types/node": "^22.14.0",

frontend/src/components/account/apiKeys/ApiKeysPanel.vue

@@ -19,6 +19,8 @@ import {
   NeTextInput,
   NeSortDropdown,
   type SortEvent,
+  formatDateTimeNoSeconds,
+  formatRelativeTime,
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
@@ -37,7 +39,6 @@ import { useLoginStore } from '@/stores/login'
 import { useNotificationsStore } from '@/stores/notifications'
 import { useApiKeys } from '@/queries/apiKeys'
 import { API_KEYS_KEY, API_KEYS_TABLE_ID, deleteApiKey, type ApiKey } from '@/lib/apiKeys'
-import { formatDateTimeNoSeconds, formatRelativeTime } from '@/lib/dateTime'
 import {
   DEFAULT_PAGE_SIZE,
   PAGE_SIZE_OPTIONS,
@@ -339,7 +340,7 @@ function confirmDelete() {
             </NeTableCell>
             <NeTableCell :data-label="$t('account.api_keys.last_used')">
               <div v-if="key.last_used_at" class="flex flex-col">
-                <span>{{ formatRelativeTime(key.last_used_at, locale) }}</span>
+                <span>{{ formatRelativeTime(new Date(key.last_used_at), locale) }}</span>
                 <span class="text-tertiary-neutral">
                   {{ formatDateTimeNoSeconds(new Date(key.last_used_at), locale) }}
                 </span>
@@ -348,7 +349,7 @@ function confirmDelete() {
             </NeTableCell>
             <NeTableCell :data-label="$t('account.api_keys.expires')">
               <div class="flex flex-col">
-                <span>{{ formatRelativeTime(key.expires_at, locale) }}</span>
+                <span>{{ formatRelativeTime(new Date(key.expires_at), locale) }}</span>
                 <span class="text-tertiary-neutral">
                   {{ formatDateTimeNoSeconds(new Date(key.expires_at), locale) }}
                 </span>

frontend/src/components/account/impersonation/ImpersonationPanel.vue

@@ -6,15 +6,20 @@
 <script lang="ts" setup>
 import { useLoginStore } from '@/stores/login'
 import { useNotificationsStore } from '@/stores/notifications'
-import { NeButton, NeHeading, NeInlineNotification, NeSkeleton } from '@nethesis/vue-components'
+import {
+  NeButton,
+  NeHeading,
+  NeInlineNotification,
+  NeSkeleton,
+  formatDateTimeNoSeconds,
+} from '@nethesis/vue-components'
 import { useMutation, useQueryCache } from '@pinia/colada'
 import { useI18n } from 'vue-i18n'
 import { useImpersonationConsent } from '@/queries/impersonationConsent'
 import { deleteConsent, IMPERSONATION_CONSENT_KEY } from '@/lib/impersonation'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCircleCheck, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref } from 'vue'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 import EnableImpersonationConsentModal from './EnableImpersonationConsentModal.vue'
 import SessionsTable from './SessionsTable.vue'
 

frontend/src/components/account/impersonation/SessionModal.vue

@@ -16,12 +16,14 @@ import {
   NeTableHeadCell,
   NeTableRow,
   NeTooltip,
+  formatDateTime,
+  formatDateTimeNoSeconds,
 } from '@nethesis/vue-components'
 import {
   useImpersonationSessionAudit,
   useImpersonationSessionAuditStore,
 } from '@/queries/impersonationSessionAudit'
-import { formatDateTime, formatDateTimeNoSeconds, formatMinutes } from '@/lib/dateTime'
+import { formatMinutes } from '@/lib/dateTime'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { SESSION_AUDIT_TABLE_ID } from '@/lib/impersonationSessions'
@@ -152,7 +154,7 @@ const copyRequestDataToClipboard = (jsonString: string) => {
         <NeTableHeadCell>{{ $t('account.impersonation.response_status') }}</NeTableHeadCell>
       </NeTableHead>
       <NeTableBody>
-        <NeTableRow v-for="(item, index) in sessionsPage" :key="index">
+        <NeTableRow v-for="item in sessionsPage" :key="item.session_id">
           <NeTableCell :data-label="$t('account.impersonation.timestamp')">
             {{ item.timestamp ? formatDateTime(new Date(item.timestamp), locale) : '-' }}
           </NeTableCell>

frontend/src/components/account/impersonation/SessionsTable.vue

@@ -16,14 +16,15 @@ import {
   NeButton,
   NeEmptyState,
   NeInlineNotification,
+  formatDateTimeNoSeconds,
 } from '@nethesis/vue-components'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { savePageSizeToStorage, PAGE_SIZE_OPTIONS } from '@/lib/tablePageSize'
 import { useImpersonationSessions } from '@/queries/impersonationSessions'
 import { SESSIONS_TABLE_ID, type Session } from '@/lib/impersonationSessions'
 import UpdatingSpinner from '@/components/common/UpdatingSpinner.vue'
-import { formatDateTimeNoSeconds, formatMinutes } from '@/lib/dateTime'
+import { formatMinutes } from '@/lib/dateTime'
 import SessionModal from './SessionModal.vue'
 import { useImpersonationSessionAuditStore } from '@/queries/impersonationSessionAudit'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -96,7 +97,7 @@ const onSessionModalClose = () => {
           </NeTableHeadCell>
         </NeTableHead>
         <NeTableBody>
-          <NeTableRow v-for="(item, index) in sessionsPage" :key="index">
+          <NeTableRow v-for="item in sessionsPage" :key="item.session_id">
             <NeTableCell :data-label="$t('account.impersonation.session_start')">
               {{
                 item.start_time ? formatDateTimeNoSeconds(new Date(item.start_time), locale) : '-'

frontend/src/components/alerts/AlertDetailsDrawer.vue

@@ -12,6 +12,7 @@ import {
   NeSideDrawer,
   NeFormItemLabel,
   NeRoundedIcon,
+  formatDateTimeNoSeconds,
 } from '@nethesis/vue-components'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -28,7 +29,6 @@ import ProcessingAlertBadge from '@/components/alerts/ProcessingAlertBadge.vue'
 import SystemLogoAndLink from '@/components/systems/SystemLogoAndLink.vue'
 import AlertAssignee from '@/components/alerts/AlertAssignee.vue'
 import AlertEventsTimeline from '@/components/alerts/AlertEventsTimeline.vue'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 
 interface Props {
   isShown: boolean

frontend/src/components/alerts/AlertEventsTimeline.vue

@@ -9,14 +9,15 @@ import {
   NeInlineNotification,
   NeSkeleton,
   NeTooltip,
+  formatDateTimeNoSeconds,
+  formatRelativeTime,
 } from '@nethesis/vue-components'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAlertActivity } from '@/queries/alerts/alertActivity'
 import type { Alert } from '@/lib/alerts'
 import UserAvatar from '@/components/users/UserAvatar.vue'
 import AlertCommentText from '@/components/alerts/AlertCommentText.vue'
-import { formatDateTimeNoSeconds, formatRelativeTime } from '@/lib/dateTime'
 
 const props = defineProps<{
   alert: Alert | undefined
@@ -107,7 +108,7 @@ function getEventText(details: Record<string, unknown>): string | null {
         <NeTooltip placement="top" trigger-event="mouseenter focus">
           <template #trigger>
             <span class="text-tertiary-neutral w-fit cursor-default">
-              {{ formatRelativeTime(event.created_at, locale) }}
+              {{ formatRelativeTime(new Date(event.created_at), locale) }}
             </span>
           </template>
           <template #content>

frontend/src/components/alerts/AlertsTable.vue

@@ -35,6 +35,8 @@ import {
   type NeDropdownFilterV2Option,
   type NeDropdownItem,
   type SortEvent,
+  formatDateTime,
+  formatRelativeTime,
 } from '@nethesis/vue-components'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -58,7 +60,6 @@ import {
 import { setPendingAlertState, isProcessing } from '@/lib/alertPendingStates'
 import { type AlertFilterAlert } from '@/lib/alertFilters'
 import { useNotificationsStore } from '@/stores/notifications'
-import { formatDateTime, formatRelativeTime } from '@/lib/dateTime'
 import { canManageSystems, canReadUsers } from '@/lib/permissions'
 import OrganizationIconAndLink from '@/components/organizations/OrganizationIconAndLink.vue'
 import MuteAlertDrawer from '@/components/alerts/MuteAlertDrawer.vue'
@@ -589,7 +590,7 @@ function goToSystems() {
           <!-- Started at -->
           <NeTableCell :data-label="$t('alerts.started')">
             <div>
-              <p>{{ formatRelativeTime(alert.startsAt, locale) }}</p>
+              <p>{{ formatRelativeTime(new Date(alert.startsAt), locale) }}</p>
               <p class="text-tertiary-neutral dark:text-tertiary-neutral mt-0.5">
                 {{ formatDateTime(new Date(alert.startsAt), locale) }}
               </p>

frontend/src/components/applications/ApplicationsTable.vue

@@ -62,6 +62,7 @@ const {
   versionFilter,
   systemFilter,
   organizationFilter,
+  includeHierarchy,
   sortBy,
   sortDescending,
   clearFilters,
@@ -179,7 +180,13 @@ const onSort = (payload: SortEvent) => {
 }
 
 const goToApplicationDetails = (application: Application) => {
-  router.push({ name: 'application_detail', params: { applicationId: application.id } })
+  router
+    .push({ name: 'application_detail', params: { applicationId: application.id } })
+    .catch((error) => {
+      // router.push() swallows navigation failures by default; log them so an
+      // intermittent "URL changes but the page doesn't" report leaves a trace
+      console.error('[goToApplicationDetails]', error)
+    })
 }
 </script>
 
@@ -193,6 +200,18 @@ const goToApplicationDetails = (application: Application) => {
       :description="state.error.message"
       class="mb-6"
     />
+    <!-- company hierarchy filter notification -->
+    <NeInlineNotification
+      v-if="includeHierarchy && organizationFilter.length === 1"
+      kind="info"
+      :title="$t('applications.hierarchy_filter_title')"
+      :description="
+        $t('applications.hierarchy_filter_description', { name: organizationFilter[0].label })
+      "
+      :secondary-button-label="$t('applications.hierarchy_filter_exact')"
+      class="mb-6"
+      @secondary-click="includeHierarchy = false"
+    />
     <!-- empty state -->
     <NeEmptyState
       v-if="isNoDataEmptyStateShown"
@@ -318,7 +337,7 @@ const goToApplicationDetails = (application: Application) => {
           </NeTableHeadCell>
         </NeTableHead>
         <NeTableBody>
-          <NeTableRow v-for="(item, index) in applicationsPage" :key="index">
+          <NeTableRow v-for="item in applicationsPage" :key="item.id">
             <NeTableCell :data-label="$t('applications.name')">
               <router-link
                 :to="{ name: 'application_detail', params: { applicationId: item.id } }"