@skyhook-io/k8s-ui 1.7.10 → 1.7.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.10",
+  "version": "1.7.11",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/gitops/GitOpsTableView.tsx

@@ -201,6 +201,14 @@ export interface GitOpsTableViewProps {
   // detected" copy. Hub passes "No GitOps resources across the fleet".
   emptyStateTitle?: string
   emptyStateBody?: string
+  /**
+   * Which side the filter rail sits on. Default 'left' (OSS Radar, which
+   * has no app sidebar). A host with its own left navigation rail (the
+   * Cloud hub) passes 'right' so the GitOps filters don't stack a second
+   * column against that nav and instead match the host's other faceted
+   * pages. Mobile stacking (filters above the table) is unaffected.
+   */
+  filtersSide?: 'left' | 'right'
   /**
    * Global namespace pick from the host's NamespaceSwitcher. Used to
    * surface "viewing in namespace: X" context and to power the Clear
@@ -249,6 +257,7 @@ export function GitOpsTableView({
   onClearNamespaces,
   onRowAction,
   pendingRowActions,
+  filtersSide = 'left',
 }: GitOpsTableViewProps) {
   const searchInputRef = useRef<HTMLInputElement>(null)
   const [mode, setMode] = useState<GitOpsMode>('applications')
@@ -492,8 +501,13 @@ export function GitOpsTableView({
   ]
 
   return (
-    <div className="flex h-full min-w-0 flex-1 overflow-hidden bg-theme-base max-lg:flex-col">
+    <div
+      className={`flex h-full min-w-0 flex-1 overflow-hidden bg-theme-base max-lg:flex-col ${
+        filtersSide === 'right' ? 'lg:flex-row-reverse' : ''
+      }`}
+    >
       <GitOpsFilterSidebar
+        side={filtersSide}
         mode={mode}
         onModeChange={setMode}
         modeCounts={modeCounts}
@@ -707,6 +721,7 @@ export function GitOpsTableView({
 // =============================================================================
 
 function GitOpsFilterSidebar({
+  side,
   mode,
   onModeChange,
   modeCounts,
@@ -729,6 +744,7 @@ function GitOpsFilterSidebar({
   onToggleNamespace,
   onClear,
 }: {
+  side: 'left' | 'right'
   mode: GitOpsMode
   onModeChange: (mode: GitOpsMode) => void
   modeCounts: Record<GitOpsMode, number>
@@ -752,7 +768,11 @@ function GitOpsFilterSidebar({
   onClear: () => void
 }) {
   return (
-    <aside className="flex w-72 shrink-0 flex-col overflow-hidden border-r border-theme-border bg-theme-surface/90 max-lg:max-h-72 max-lg:w-full max-lg:border-b max-lg:border-r-0">
+    <aside
+      className={`flex w-72 shrink-0 flex-col overflow-hidden border-theme-border bg-theme-surface/90 max-lg:max-h-72 max-lg:w-full max-lg:border-b ${
+        side === 'right' ? 'border-l max-lg:border-l-0' : 'border-r max-lg:border-r-0'
+      }`}
+    >
       <div className="flex items-center justify-between border-b border-theme-border px-3 py-2">
         <span className="text-sm font-medium text-theme-text-secondary">GitOps Filters</span>
         <button type="button" onClick={onClear} className="text-[10px] font-medium text-blue-500 hover:text-blue-400">

package/src/components/issues/IssuesView.tsx

@@ -215,6 +215,7 @@ function IssueRow({
             <div className="border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">
               <div className="flex flex-col gap-4">
                 <Diagnosis issue={issue} />
+                <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
                 <div className="border-t border-theme-border/70 pt-3">
                   <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
                 </div>
@@ -249,6 +250,11 @@ function Diagnosis({ issue }: { issue: Issue }) {
           error) — so the precise message is never lost, just de-emphasized. */}
       {detail ? <p className="break-words font-mono text-xs leading-relaxed text-theme-text-tertiary">{detail}</p> : null}
       {crash ? <p className="text-xs text-theme-text-tertiary tabular-nums">{crash}</p> : null}
+      {issue.change_context ? (
+        <p className="text-xs text-theme-text-tertiary">
+          {changeContextText(issue.change_context)}
+        </p>
+      ) : null}
       {issue.first_seen ? (
         <p className="text-xs text-theme-text-tertiary tabular-nums">
           Started {formatRelativeAgeTime(issue.first_seen)}
@@ -259,6 +265,105 @@ function Diagnosis({ issue }: { issue: Issue }) {
   );
 }
 
+function changeContextText(change: NonNullable<Issue['change_context']>): string {
+  const parts = [change.when ? `Changed ${change.when} ago` : 'Changed', change.what ? change.what.replace(/_/g, ' ') : null, change.evidence].filter(Boolean);
+  return parts.join(' · ');
+}
+
+function DiagnosticContext({
+  issue,
+  resourceHref,
+  onResourceClick,
+}: {
+  issue: Issue;
+  resourceHref?: (ref: IssueResourceRef) => string;
+  onResourceClick?: (ref: IssueResourceRef) => void;
+}) {
+  const ctx = issue.diagnostic_context;
+  const facts = ctx?.facts?.filter((fact) => fact.message || fact.refs?.length || fact.related_issues?.length) ?? [];
+  if (!ctx || facts.length === 0) return null;
+
+  return (
+    <section className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Context</h4>
+        {ctx.role ? <span className="badge-sm text-[10px] text-theme-text-secondary">{diagnosticRoleLabel(ctx.role)}</span> : null}
+      </div>
+      <ul className="flex flex-col gap-2">
+        {facts.map((fact, idx) => (
+          <li key={`${fact.type}-${idx}`} className="flex flex-col gap-1.5 rounded-md border border-theme-border/70 px-2.5 py-2">
+            <div className="flex min-w-0 items-baseline gap-2">
+              <span className="shrink-0 text-xs font-medium text-theme-text-secondary">{diagnosticFactLabel(fact.type)}</span>
+              {fact.message ? <span className="min-w-0 break-words text-xs leading-relaxed text-theme-text-tertiary">{fact.message}</span> : null}
+            </div>
+            {fact.related_issues?.length ? (
+              <ul className="flex flex-col gap-px">
+                {fact.related_issues.map((related, relIdx) => (
+                  <ResourceLine
+                    key={`${related.ref.group ?? ''}/${related.ref.kind}/${related.ref.namespace ?? ''}/${related.ref.name}#${relIdx}`}
+                    label="Related"
+                    refForLink={memberRef(issue, related.ref)}
+                    resourceHref={resourceHref}
+                    onResourceClick={onResourceClick}
+                  />
+                ))}
+              </ul>
+            ) : null}
+            {fact.refs?.length ? (
+              <ul className="flex flex-col gap-px">
+                {fact.refs.map((ref, refIdx) => (
+                  <ResourceLine
+                    key={`${ref.group ?? ''}/${ref.kind}/${ref.namespace ?? ''}/${ref.name}#${refIdx}`}
+                    refForLink={memberRef(issue, ref)}
+                    resourceHref={resourceHref}
+                    onResourceClick={onResourceClick}
+                  />
+                ))}
+              </ul>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function diagnosticRoleLabel(role: string): string {
+  switch (role) {
+    case 'candidate':
+      return 'Candidate signal';
+    case 'affected':
+      return 'Affected signal';
+    case 'rollup':
+      return 'Rollup';
+    default:
+      return 'Context';
+  }
+}
+
+function diagnosticFactLabel(type: string): string {
+  switch (type) {
+    case 'explicit_reference':
+      return 'Explicit reference';
+    case 'owner_rollup':
+      return 'Owner rollup';
+    case 'selected_backend_issue':
+      return 'Selected backend';
+    case 'service_config_mismatch':
+      return 'Service config';
+    case 'service_env_reference':
+      return 'Service env';
+    case 'probe_target_mismatch':
+      return 'Probe target';
+    case 'blocked_init_container':
+      return 'Init container';
+    case 'restart_cause':
+      return 'Restart cause';
+    default:
+      return type.replace(/_/g, ' ');
+  }
+}
+
 // Native-tooltip detail for the collapsed-row age chip: absolute onset + last-seen
 // freshness, the two facts the compact "2h" hides.
 function ageTitle(issue: Issue): string {

package/src/components/issues/index.ts

@@ -11,7 +11,7 @@ export {
   subjectRef,
   memberRef,
 } from './types';
-export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef } from './types';
+export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueChangeContext } from './types';
 export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,

package/src/components/issues/types.ts

@@ -57,6 +57,34 @@ export interface IssueAffected {
   nodes?: number;
 }
 
+export type IssueDiagnosticRole = 'candidate' | 'affected' | 'rollup' | 'context';
+
+export interface IssueDiagnosticIssueRef {
+  ref: IssueResourceRef;
+  reason?: string;
+  category?: string;
+  severity?: IssueSeverity;
+}
+
+export interface IssueDiagnosticFact {
+  type: string;
+  message?: string;
+  refs?: IssueResourceRef[];
+  related_issues?: IssueDiagnosticIssueRef[];
+}
+
+export interface IssueDiagnosticContext {
+  role?: IssueDiagnosticRole;
+  facts?: IssueDiagnosticFact[];
+}
+
+export interface IssueChangeContext {
+  changed: boolean;
+  what?: string;
+  when?: string;
+  evidence?: string;
+}
+
 /**
  * A grouped live issue — one row of the triage queue. Subject (kind/group/
  * namespace/name) is the topmost owner when the rows folded under a workload,
@@ -98,8 +126,11 @@ export interface Issue {
   count?: number;
 
   affected?: IssueAffected;
+  owner?: IssueResourceRef;
   members?: IssueResourceRef[];
   members_truncated?: boolean;
+  diagnostic_context?: IssueDiagnosticContext;
+  change_context?: IssueChangeContext;
 
   // Pod crash context carried from the representative member.
   restart_count?: number;

package/src/components/shared/CreateResourceDialog.tsx

@@ -18,7 +18,7 @@ export interface CreateResourceDialogProps {
   initialYaml?: string
   title?: string
   // Injected by platform (decouples from data-fetching hooks)
-  onApply: (params: { yaml: string; mode: 'apply' | 'create'; dryRun: boolean }) => Promise<ApplyResult[]>
+  onApply: (params: { yaml: string; mode: 'apply' | 'create'; dryRun: boolean; force: boolean }) => Promise<ApplyResult[]>
   isApplying: boolean
   /** Called after a successful non-dry-run apply with the first created resource */
   onCreated?: (result: ApplyResult) => void
@@ -28,6 +28,7 @@ export function CreateResourceDialog({ open, onClose, initialYaml = '', title, o
   const [yaml, setYaml] = useState(initialYaml)
   const [mode, setMode] = useState<'apply' | 'create'>('apply')
   const [dryRun, setDryRun] = useState(false)
+  const [force, setForce] = useState(false)
   const [yamlValid, setYamlValid] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [success, setSuccess] = useState<string | null>(null)
@@ -38,6 +39,7 @@ export function CreateResourceDialog({ open, onClose, initialYaml = '', title, o
       setYaml(initialYaml)
       setMode('apply')
       setDryRun(false)
+      setForce(false)
       setError(null)
       setSuccess(null)
     }
@@ -64,7 +66,7 @@ export function CreateResourceDialog({ open, onClose, initialYaml = '', title, o
     setSuccess(null)
 
     try {
-      const results = await onApply({ yaml, mode, dryRun })
+      const results = await onApply({ yaml, mode, dryRun, force: mode === 'apply' && force })
       const action = mode === 'create' ? 'Created' : 'Applied'
       const dryRunLabel = dryRun ? ' (dry run)' : ''
 
@@ -87,7 +89,7 @@ export function CreateResourceDialog({ open, onClose, initialYaml = '', title, o
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Unknown error')
     }
-  }, [yaml, mode, dryRun, onApply, onCreated, handleClose])
+  }, [yaml, mode, dryRun, force, onApply, onCreated, handleClose])
 
   const dialogTitle = title || 'Create Resource'
   const submitLabel = mode === 'create' ? 'Create' : 'Apply'
@@ -171,6 +173,33 @@ export function CreateResourceDialog({ open, onClose, initialYaml = '', title, o
             Dry run
           </label>
           </Tooltip>
+
+          {/* Force checkbox — only meaningful for server-side apply */}
+          <Tooltip
+            content={
+              <div className="space-y-1.5 max-w-[19rem]">
+                <p>Override field ownership (server-side apply).</p>
+                <p>
+                  <span className="font-medium text-theme-text-primary">Off (default):</span> if a field is owned by Helm/Flux/Argo/kubectl, the whole apply is rejected with a conflict instead of overwriting.
+                </p>
+                <p>
+                  <span className="font-medium text-theme-text-primary">On:</span> your manifest overwrites those fields — but an active controller may reconcile them back on its next sync.
+                </p>
+              </div>
+            }
+            position="bottom"
+          >
+            <label className={`flex items-center gap-1.5 text-xs cursor-pointer ${mode === 'apply' ? 'text-theme-text-secondary' : 'text-theme-text-tertiary cursor-not-allowed'}`}>
+            <input
+              type="checkbox"
+              checked={mode === 'apply' && force}
+              disabled={mode !== 'apply'}
+              onChange={(e) => setForce(e.target.checked)}
+              className="w-3.5 h-3.5 rounded border-theme-border bg-theme-base"
+            />
+            Force
+          </label>
+          </Tooltip>
         </div>
 
         <div className="flex items-center gap-2">

package/src/components/shared/EditableYamlView.tsx

@@ -114,7 +114,7 @@ interface EditableYamlViewProps {
   /** Called after a successful save so the parent can refetch */
   onSaved?: () => void
   /** Save handler — injected by the platform wrapper */
-  onSave?: (params: { kind: string; namespace: string; name: string; yaml: string }) => Promise<void>
+  onSave?: (params: { kind: string; namespace: string; name: string; yaml: string; force: boolean }) => Promise<void>
   /** Whether a save is in progress */
   isSaving?: boolean
   /** Error message from the last save attempt */
@@ -139,6 +139,9 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
   const [editedYaml, setEditedYaml] = useState(savedDraft.current ?? '')
   const [yamlErrors, setYamlErrors] = useState<string[]>([])
   const [showErrorDetails, setShowErrorDetails] = useState(false)
+  // Default on: the editor resubmits the full live manifest, so an unforced
+  // save would conflict on every field owned by Helm/Flux/Argo/a controller.
+  const [force, setForce] = useState(true)
 
   // Clean up restored draft flag
   useEffect(() => {
@@ -187,6 +190,7 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
         namespace: resource.namespace,
         name: resource.name,
         yaml: editedYaml,
+        force,
       })
       setIsEditing(false)
       setEditedYaml('')
@@ -194,7 +198,7 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
     } catch {
       // Error handled by caller via saveError prop
     }
-  }, [onSave, resource, editedYaml, yamlErrors, onSaved])
+  }, [onSave, resource, editedYaml, yamlErrors, onSaved, force])
 
   const handleYamlValidate = useCallback((_isValid: boolean, errors: string[]) => {
     setYamlErrors(errors)
@@ -222,6 +226,31 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
               <XCircle className="w-3.5 h-3.5" />
               Cancel
             </button>
+            <Tooltip
+              content={
+                <div className="space-y-1.5 max-w-[19rem]">
+                  <p>Override field ownership (server-side apply).</p>
+                  <p>
+                    <span className="font-medium text-theme-text-primary">On (default):</span> your edits overwrite fields owned by Helm/Flux/Argo/kubectl — but an active controller may reconcile them back on its next sync.
+                  </p>
+                  <p>
+                    <span className="font-medium text-theme-text-primary">Off:</span> if another manager owns a field you changed, the whole save is rejected with a conflict (nothing is applied).
+                  </p>
+                </div>
+              }
+              position="bottom"
+            >
+              <label className="flex items-center gap-1.5 text-xs text-theme-text-secondary cursor-pointer select-none">
+                <input
+                  type="checkbox"
+                  checked={force}
+                  disabled={isPending}
+                  onChange={(e) => setForce(e.target.checked)}
+                  className="w-3.5 h-3.5 rounded border-theme-border bg-theme-base"
+                />
+                Force
+              </label>
+            </Tooltip>
             <button
               onClick={handleSaveEdit}
               disabled={isPending || yamlErrors.length > 0}