@skyhook-io/k8s-ui 1.8.7 → 1.8.8

package/src/utils/format-freshness.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { formatUpdatedAgo, formatLastUpdatedBucket, msToNextBucket } from './format'
+
+describe('formatUpdatedAgo', () => {
+  it('collapses the first minute to "just now"', () => {
+    expect(formatUpdatedAgo(0)).toBe('just now')
+    expect(formatUpdatedAgo(59_000)).toBe('just now')
+  })
+  it('renders minutes and hours with an "ago" suffix', () => {
+    expect(formatUpdatedAgo(60_000)).toBe('1m ago')
+    expect(formatUpdatedAgo(3_600_000)).toBe('1h ago')
+  })
+  it('collapses anything past a day to "over a day ago"', () => {
+    expect(formatUpdatedAgo(25 * 3_600_000)).toBe('over a day ago')
+  })
+})
+
+describe('formatLastUpdatedBucket', () => {
+  it('buckets by the coarsest unit', () => {
+    expect(formatLastUpdatedBucket(0)).toBe('just now')
+    expect(formatLastUpdatedBucket(60_000)).toBe('1m')
+    expect(formatLastUpdatedBucket(3_600_000)).toBe('1h')
+    expect(formatLastUpdatedBucket(86_400_000)).toBe('1d')
+  })
+})
+
+describe('msToNextBucket', () => {
+  it('schedules the next re-render exactly on the bucket boundary', () => {
+    expect(msToNextBucket(0)).toBe(60_000)
+    expect(msToNextBucket(30_000)).toBe(30_000)
+    // 90s elapsed → 30s until the "2m" bucket flips.
+    expect(msToNextBucket(90_000)).toBe(30_000)
+  })
+})

package/src/utils/format.ts

@@ -192,6 +192,38 @@ export function formatCompactAge(value?: string): string {
   return `${Math.floor(hours / 24)}d`
 }
 
+// Coarse "just now / Xm / Xh / Xd" buckets for freshness labels — finer-grained
+// updates add motion in the periphery without aiding any user decision.
+export function formatLastUpdatedBucket(elapsedMs: number): string {
+  const elapsedSec = Math.max(0, Math.floor(elapsedMs / 1000))
+  if (elapsedSec < 60) return 'just now'
+  const minutes = Math.floor(elapsedSec / 60)
+  if (minutes < 60) return `${minutes}m`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h`
+  return `${Math.floor(hours / 24)}d`
+}
+
+// ms until the bucket produced by formatLastUpdatedBucket would change — lets a
+// ticker re-render exactly on the boundary instead of polling every second.
+export function msToNextBucket(elapsedMs: number): number {
+  const elapsed = Math.max(0, elapsedMs)
+  if (elapsed < 60_000) return 60_000 - elapsed
+  if (elapsed < 3_600_000) return 60_000 - (elapsed % 60_000)
+  if (elapsed < 86_400_000) return 3_600_000 - (elapsed % 3_600_000)
+  return 86_400_000 - (elapsed % 86_400_000)
+}
+
+// Freshness phrasing for "Updated X" indicators: just now / Xm ago / Xh ago /
+// over a day ago. An exact day count is noise for an auto-refresh signal, so
+// anything past 24h collapses to "over a day ago".
+export function formatUpdatedAgo(elapsedMs: number): string {
+  const bucket = formatLastUpdatedBucket(elapsedMs)
+  if (bucket === 'just now') return 'just now'
+  if (bucket.endsWith('d')) return 'over a day ago'
+  return `${bucket} ago`
+}
+
 export function formatRelativeAgeTime(value?: string, fallback = '-'): string {
   if (!value) return fallback
   const time = Date.parse(value)

package/src/utils/resource-hierarchy.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+
+import type { TimelineEvent, Topology } from '../types/core'
+
+import { buildResourceHierarchy } from './resource-hierarchy'
+
+function svcEvent(namespace: string, name: string): TimelineEvent {
+  return {
+    id: `${namespace}/${name}`,
+    timestamp: '2024-01-01T00:00:00.000Z',
+    source: 'informer',
+    kind: 'Service',
+    namespace,
+    name,
+    eventType: 'update',
+  }
+}
+
+function svcNode(namespace: string, name: string, app: string) {
+  return {
+    id: `service/${namespace}/${name}`,
+    data: { apiVersion: 'v1', labels: { 'app.kubernetes.io/name': app } },
+  }
+}
+
+function topo(nodes: ReturnType<typeof svcNode>[]): Topology {
+  return { nodes, edges: [] } as unknown as Topology
+}
+
+describe('buildResourceHierarchy app-label grouping', () => {
+  it('does not merge the same app label across namespaces', () => {
+    const events = [svcEvent('team-a', 'web'), svcEvent('team-b', 'web')]
+    const topology = topo([svcNode('team-a', 'web', 'web'), svcNode('team-b', 'web', 'web')])
+
+    const lanes = buildResourceHierarchy({ events, topology, groupByApp: true })
+
+    expect(lanes).toHaveLength(2)
+    expect(lanes.every((l) => (l.children ?? []).length === 0)).toBe(true)
+    expect(new Set(lanes.map((l) => l.namespace))).toEqual(new Set(['team-a', 'team-b']))
+  })
+
+  it('groups distinct resources sharing an app label within one namespace', () => {
+    const events = [svcEvent('team-a', 'web'), svcEvent('team-a', 'web-edge')]
+    const topology = topo([svcNode('team-a', 'web', 'web'), svcNode('team-a', 'web-edge', 'web')])
+
+    const lanes = buildResourceHierarchy({ events, topology, groupByApp: true })
+
+    expect(lanes).toHaveLength(1)
+    expect(lanes[0].children).toHaveLength(1)
+  })
+})

package/src/utils/resource-hierarchy.ts

@@ -465,17 +465,20 @@ export function buildResourceHierarchy(options: HierarchyOptions): ResourceLane[
       'HTTPProxy', // Contour
     ])
 
-    // Group lanes by app label
+    // Group lanes by app label, scoped to namespace: the same app label in two
+    // namespaces (e.g. the same workload deployed to dev and staging) is two
+    // distinct apps and must not collapse into one lane.
     const appGroups = new Map<string, string[]>()
     for (const [laneId, lane] of laneMap) {
       if (laneParent.has(laneId)) continue
       if (!appLabelEligibleKinds.has(lane.kind)) continue
       const appLabel = laneAppLabels.get(laneId)
       if (!appLabel) continue
-      if (!appGroups.has(appLabel)) {
-        appGroups.set(appLabel, [])
+      const groupKey = `${lane.namespace}/${appLabel}`
+      if (!appGroups.has(groupKey)) {
+        appGroups.set(groupKey, [])
       }
-      appGroups.get(appLabel)!.push(laneId)
+      appGroups.get(groupKey)!.push(laneId)
     }
 
     // For each app group with multiple members, pick the best parent