@skyhook-io/k8s-ui 1.14.4 → 1.14.6

package/src/components/resources/renderers/ReflectorSection.tsx

@@ -0,0 +1,296 @@
+import { useState } from "react";
+import { Copy } from "lucide-react";
+import type { ResourceRef } from "../../../types";
+import { pluralize } from "../../../utils/pluralize";
+import { formatRelativeAgeTime } from "../../../utils/format";
+import {
+  hasReflectorDetails,
+  parseReflector,
+  type Reflection,
+  type ReflectorResource,
+} from "../../../utils/reflector";
+export {
+  hasReflectorDetails,
+  isReflectorMirror,
+  reflectorEditNotice,
+} from "../../../utils/reflector";
+import { Badge } from "../../ui/Badge";
+import {
+  AlertBanner,
+  Property,
+  PropertyList,
+  ResourceLink,
+  Section,
+} from "../../ui/drawer-components";
+
+interface ReflectorSectionProps {
+  data: ReflectorResource;
+  reflection?: Reflection;
+  onNavigate?: (ref: ResourceRef) => void;
+}
+
+function NamespaceRule({
+  patterns,
+  selector,
+}: {
+  patterns?: string;
+  selector?: string;
+}) {
+  if (!patterns && !selector) return <>No namespace restriction configured</>;
+  return (
+    <span className="space-y-1 block">
+      {patterns && (
+        <span className="block break-all">
+          <span className="text-theme-text-tertiary">Name patterns: </span>
+          {patterns}
+        </span>
+      )}
+      {patterns && selector && (
+        <span className="block text-theme-text-tertiary">or</span>
+      )}
+      {selector && (
+        <span className="block break-all">
+          <span className="text-theme-text-tertiary">Label selector: </span>
+          {selector}
+        </span>
+      )}
+    </span>
+  );
+}
+
+export function ReflectorSection({
+  data,
+  reflection,
+  onNavigate,
+}: ReflectorSectionProps) {
+  const [showAll, setShowAll] = useState(false);
+  if (!hasReflectorDetails(data, reflection)) return null;
+  const {
+    value,
+    hasDeclaration,
+    isMirror,
+    allowed,
+    autoEnabled,
+    automatic,
+    mirrors,
+    sourceSettings,
+    copiedVersion,
+    sourceVersion,
+    warnings,
+  } = parseReflector(data, reflection);
+
+  return (
+    <Section
+      title={
+        mirrors.length
+          ? `Reflector (${pluralize(mirrors.length, "visible mirror")})`
+          : "Reflector"
+      }
+      icon={Copy}
+      defaultExpanded={warnings.length > 0}
+    >
+      <div className="space-y-3">
+        <PropertyList>
+          <Property
+            label="Role"
+            value={
+              <Badge tone="structural">
+                {isMirror
+                  ? automatic === true
+                    ? "Automatic mirror"
+                    : automatic === false
+                      ? "Manual mirror"
+                      : "Mirror"
+                  : hasDeclaration
+                    ? "Invalid source reference"
+                    : "Source"}
+              </Badge>
+            }
+          />
+          {sourceSettings && (
+            <>
+              <Property
+                label="Reflection allowed"
+                value={
+                  allowed === undefined
+                    ? "Invalid annotation"
+                    : allowed
+                      ? "Yes"
+                      : "No"
+                }
+              />
+              <Property
+                label="Allowed namespaces"
+                value={
+                  <NamespaceRule
+                    patterns={value("reflection-allowed-namespaces")}
+                    selector={value("reflection-allowed-namespaces-selector")}
+                  />
+                }
+              />
+              <Property
+                label="Automatic creation"
+                value={
+                  autoEnabled === undefined
+                    ? "Invalid annotation"
+                    : autoEnabled
+                      ? "Enabled"
+                      : "Disabled"
+                }
+              />
+              {(autoEnabled ||
+                value("reflection-auto-namespaces") ||
+                value("reflection-auto-namespaces-selector")) && (
+                <Property
+                  label="Automatic namespaces"
+                  value={
+                    <NamespaceRule
+                      patterns={value("reflection-auto-namespaces")}
+                      selector={value("reflection-auto-namespaces-selector")}
+                    />
+                  }
+                />
+              )}
+              <p className="text-xs text-theme-text-tertiary">
+                Automatic destinations must also satisfy the allowed rule.
+                Controller version and settings may further limit destinations.
+              </p>
+            </>
+          )}
+          {isMirror && (
+            <>
+              <Property
+                label="Copied source version"
+                value={copiedVersion || "No version recorded"}
+              />
+              <Property
+                label="Source version (snapshot)"
+                value={sourceVersion}
+              />
+              <Property
+                label="Recorded copy time"
+                value={
+                  value("reflected-at") ? (
+                    <span title={value("reflected-at")}>
+                      {formatRelativeAgeTime(value("reflected-at"))}
+                    </span>
+                  ) : undefined
+                }
+              />
+              {copiedVersion && sourceVersion && (
+                <p className="text-xs text-theme-text-secondary">
+                  {copiedVersion === sourceVersion
+                    ? "The recorded version matches the source snapshot."
+                    : "The recorded version differs from the source snapshot."}{" "}
+                  Cached versions can lag reconciliation; matching versions do
+                  not prove matching contents.
+                </p>
+              )}
+            </>
+          )}
+        </PropertyList>
+        {mirrors.length > 0 && (
+          <div className="space-y-2">
+            <div className="text-sm text-theme-text-secondary">
+              Visible mirrors{" "}
+              <Badge tone="structural" size="sm">
+                {mirrors.length}
+              </Badge>
+            </div>
+            <div className="space-y-1 max-h-60 overflow-y-auto text-sm">
+              {(showAll ? mirrors : mirrors.slice(0, 5)).map((ref) => (
+                <div key={`${ref.namespace}/${ref.name}`} className="break-all">
+                  <ResourceLink
+                    {...ref}
+                    label={`${ref.namespace}/${ref.name}`}
+                    onNavigate={onNavigate}
+                  />
+                </div>
+              ))}
+            </div>
+            {mirrors.length > 5 && (
+              <button
+                className="text-xs text-accent-text hover:underline"
+                onClick={() => setShowAll(!showAll)}
+              >
+                {showAll
+                  ? "Show fewer"
+                  : `Show all ${mirrors.length} visible mirrors`}
+              </button>
+            )}
+            <p className="text-xs text-theme-text-tertiary">
+              Visible relationships only; other mirrors may exist.
+            </p>
+          </div>
+        )}
+        {sourceSettings && mirrors.length === 0 && (
+          <p className="text-xs text-theme-text-tertiary">
+            No mirrors visible in this view.
+          </p>
+        )}
+      </div>
+    </Section>
+  );
+}
+
+export function ReflectorSummary({
+  data,
+  reflection,
+  onNavigate,
+}: ReflectorSectionProps) {
+  if (!hasReflectorDetails(data, reflection)) return null;
+  const { isMirror, declaration, source, warnings } = parseReflector(
+    data,
+    reflection,
+  );
+  if (!isMirror && warnings.length === 0) return null;
+  return (
+    <div className="space-y-2">
+      {isMirror && (
+        <AlertBanner
+          variant="info"
+          title="Reflector mirror"
+          message={
+            <>
+              <span className="block break-all">
+                Source:{" "}
+                {source ? (
+                  <ResourceLink
+                    {...source}
+                    label={`${source.namespace}/${source.name}`}
+                    onNavigate={onNavigate}
+                  />
+                ) : (
+                  declaration
+                )}
+              </span>
+              {!source && (
+                <span className="block">
+                  Source is not available in this view; its existence and
+                  version are unverified.
+                </span>
+              )}
+              <span className="block mt-1">
+                Edit the source for lasting changes. Local edits may persist
+                until the source changes, then be overwritten.
+              </span>
+            </>
+          }
+        />
+      )}
+      {warnings.length > 0 && (
+        <AlertBanner
+          variant="warning"
+          title="Check reflection configuration"
+          message={
+            <ul className="list-disc pl-4 space-y-1">
+              {warnings.map((warning) => (
+                <li key={warning}>{warning}</li>
+              ))}
+            </ul>
+          }
+        />
+      )}
+    </div>
+  );
+}

package/src/components/resources/renderers/RolloutRenderer.test.tsx

@@ -4,9 +4,11 @@ import {
   RolloutRenderer,
   rolloutActions,
   canaryStepLabel,
+  canaryStepTemplateRefs,
   rolloutAnalysisRuns,
   rolloutConditionTone,
   rolloutProblems,
+  blueGreenPhases,
   type RolloutAction,
   type RolloutCapabilities,
 } from './RolloutRenderer'
@@ -173,6 +175,46 @@ describe('RolloutRenderer step display', () => {
   })
 })
 
+describe('RolloutRenderer analysis history availability', () => {
+  const rollout = canaryRollout({ phase: 'Healthy', currentStepIndex: 4 }, 4)
+  const forbidden = Object.assign(new Error('forbidden'), { status: 403 })
+  const oneRun = [
+    { name: 'run-1', phase: 'Successful', createdAt: '2026-01-01T00:00:00Z', metricsTotal: 1, metricsPassing: 1, metricsNotPassing: 0 },
+  ]
+  // Section keeps collapsed content in the DOM and flattens it to zero height,
+  // so "is the text present" says nothing about whether anyone can read it.
+  const historySection = (html: string) => html.slice(html.indexOf('AnalysisRun History'))
+  const isOpen = (html: string) => historySection(html).includes('grid-template-rows:1fr')
+
+  it('says the history could not be read instead of rendering nothing', () => {
+    const html = renderToString(<RolloutRenderer data={rollout} analysisRunHistoryError={forbidden} />)
+    expect(html).toContain('AnalysisRun History')
+    expect(html).toContain('permission')
+    expect(isOpen(html)).toBe(true)
+  })
+
+  // React Query keeps the last good data when a refetch fails, so a refusal can
+  // arrive on top of rows that are already on screen.
+  it('opens and calls itself partial when rows are already showing', () => {
+    const html = renderToString(
+      <RolloutRenderer data={rollout} analysisRunHistoryError={forbidden} analysisRunHistory={oneRun} />
+    )
+    expect(html).toContain('run-1')
+    expect(html).toContain('may be incomplete')
+    expect(isOpen(html)).toBe(true)
+  })
+
+  it('leaves a readable history collapsed, since it is backward-looking', () => {
+    const html = renderToString(<RolloutRenderer data={rollout} analysisRunHistory={oneRun} />)
+    expect(html).toContain('run-1')
+    expect(isOpen(html)).toBe(false)
+  })
+
+  it('renders no history section when there is neither history nor an error', () => {
+    expect(renderToString(<RolloutRenderer data={rollout} />)).not.toContain('AnalysisRun History')
+  })
+})
+
 describe('rolloutProblems', () => {
   it('reports an aborted rollout once, not once per matching branch', () => {
     const problems = rolloutProblems(
@@ -403,6 +445,81 @@ describe('canaryStepLabel', () => {
   })
 })
 
+describe('canaryStepTemplateRefs', () => {
+  it('reads a canary step analysis.templates[] entry', () => {
+    const refs = canaryStepTemplateRefs({ analysis: { templates: [{ templateName: 'success-rate' }] } })
+    expect(refs).toEqual([{ name: 'success-rate', clusterScoped: false }])
+  })
+
+  // Real Argo Rollouts schema uses ONE field name (templateName) for both
+  // namespaced and cluster-scoped refs, disambiguated by a separate
+  // clusterScope boolean — not a distinct clusterTemplateName field.
+  it('reads clusterScoped off the clusterScope flag, not a distinct field name', () => {
+    const refs = canaryStepTemplateRefs({ analysis: { templates: [{ templateName: 'shared-check', clusterScope: true }] } })
+    expect(refs).toEqual([{ name: 'shared-check', clusterScoped: true }])
+  })
+
+  // Experiment spec.analyses[] entries carry templateName/clusterScope flat
+  // on the entry itself, not nested under a templates[] array.
+  it('reads a flat Experiment spec.analyses[] entry', () => {
+    const refs = canaryStepTemplateRefs({ name: 'baseline-check', templateName: 'success-rate', clusterScope: false })
+    expect(refs).toEqual([{ name: 'success-rate', clusterScoped: false }])
+  })
+
+  it('reads a flat, cluster-scoped Experiment analysis entry', () => {
+    const refs = canaryStepTemplateRefs({ name: 'shared', templateName: 'shared-check', clusterScope: true })
+    expect(refs).toEqual([{ name: 'shared-check', clusterScoped: true }])
+  })
+
+  it('returns an empty list for a step with no analysis refs', () => {
+    expect(canaryStepTemplateRefs({ setWeight: 25 })).toEqual([])
+    expect(canaryStepTemplateRefs(null)).toEqual([])
+  })
+})
+
+describe('blueGreenPhases', () => {
+  // Argo Rollouts clears previewSelector once there's no active preview to
+  // track — a settled, fully-promoted blueGreen commonly has none, so
+  // activeSelector === previewSelector alone never fires here even though
+  // cutover genuinely completed.
+  it('treats activeSelector matching currentPodHash as promoted, even with an empty previewSelector', () => {
+    const data = {
+      spec: { strategy: { blueGreen: {} } },
+      status: {
+        currentPodHash: 'abc123',
+        blueGreen: { activeSelector: 'abc123', previewSelector: '' },
+      },
+    }
+    const phases = blueGreenPhases(data)
+    expect(phases.find((p) => p.label === 'Active cutover')?.state).toBe('completed')
+    expect(phases.every((p) => p.state !== 'current')).toBe(true)
+  })
+
+  it('still recognizes the narrower activeSelector === previewSelector window', () => {
+    const data = {
+      spec: { strategy: { blueGreen: {} } },
+      status: {
+        currentPodHash: 'def456',
+        blueGreen: { activeSelector: 'abc123', previewSelector: 'abc123' },
+      },
+    }
+    const phases = blueGreenPhases(data)
+    expect(phases.find((p) => p.label === 'Active cutover')?.state).toBe('completed')
+  })
+
+  it('is not promoted before either selector matches anything', () => {
+    const data = {
+      spec: { strategy: { blueGreen: {} } },
+      status: {
+        currentPodHash: 'abc123',
+        blueGreen: { activeSelector: 'old999', previewSelector: 'abc123' },
+      },
+    }
+    const phases = blueGreenPhases(data)
+    expect(phases.find((p) => p.label === 'Active cutover')?.state).not.toBe('completed')
+  })
+})
+
 describe('rolloutConditionTone', () => {
   it('reads Paused=False as the healthy state', () => {
     expect(rolloutConditionTone({ type: 'Paused', status: 'False' })).toBe('ok')