@skyhook-io/k8s-ui 1.8.9 → 1.8.11

package/src/components/shared/ResourceActionsBar.tsx

@@ -150,6 +150,12 @@ export function ResourceActionsBar({
   onDrainNode, isDrainingNode,
 }: ResourceActionsBarProps) {
   const kind = resource.kind.toLowerCase()
+  const canOpenWorkloadLogs = Boolean(
+    canViewLogs &&
+    !hideLogs &&
+    openWorkloadLogs &&
+    ['deployments', 'statefulsets', 'daemonsets', 'jobs', 'workflows', 'cronjobs', 'cronworkflows', 'workflowtemplates', 'clusterworkflowtemplates', 'scaledjobs'].includes(kind)
+  )
 
   // Delete confirmation state
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
@@ -362,33 +368,21 @@ export function ResourceActionsBar({
             </button>
           )}
           {isRollbackKind && onRollback && (
-            <button
-              onClick={() => setShowRevisions(true)}
-              disabled={!hasMultipleRevisions}
-              title={hasMultipleRevisions ? 'View revision history and rollback' : 'Only one revision exists'}
-              className={clsx(
-                "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors",
-                hasMultipleRevisions
-                  ? "text-white bg-amber-600 hover:bg-amber-700"
-                  : "text-theme-text-disabled bg-theme-elevated"
-              )}
-            >
-              <History className="w-3.5 h-3.5" />
-              Rollback
-            </button>
-          )}
-          {canViewLogs && !hideLogs && ['deployments', 'statefulsets', 'daemonsets'].includes(kind) && openWorkloadLogs && (
-            <button
-              onClick={() => openWorkloadLogs({
-                namespace: resource.namespace,
-                workloadKind: kind,
-                workloadName: resource.name,
-              })}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
-            >
-              <FileText className="w-3.5 h-3.5" />
-              Logs
-            </button>
+            <Tooltip content={hasMultipleRevisions ? 'View revision history and rollback' : 'Only one revision exists'} delay={150}>
+              <button
+                onClick={() => setShowRevisions(true)}
+                disabled={!hasMultipleRevisions}
+                className={clsx(
+                  "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors",
+                  hasMultipleRevisions
+                    ? "text-white bg-amber-600 hover:bg-amber-700"
+                    : "text-theme-text-disabled bg-theme-elevated"
+                )}
+              >
+                <History className="w-3.5 h-3.5" />
+                Rollback
+              </button>
+            </Tooltip>
           )}
         </>
       )}
@@ -473,8 +467,22 @@ export function ResourceActionsBar({
         />
       )}
 
+      {canOpenWorkloadLogs && (
+        <button
+          onClick={() => openWorkloadLogs?.({
+            namespace: resource.namespace,
+            workloadKind: kind,
+            workloadName: resource.name,
+          })}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
+        >
+          <FileText className="w-3.5 h-3.5" />
+          Logs
+        </button>
+      )}
+
       {/* Job logs */}
-      {kind === 'jobs' && onCopyCommand && (
+      {kind === 'jobs' && onCopyCommand && (!canViewLogs || !openWorkloadLogs) && (
         <button
           onClick={(e) => onCopyCommand(
             `kubectl logs job/${resource.name} -n ${resource.namespace} -f`,
@@ -488,26 +496,43 @@ export function ResourceActionsBar({
         </button>
       )}
 
-      {/* Spacer pushes universal actions to the right */}
-      <div className="flex-1" />
-
-      {/* Universal actions (right-aligned) */}
-      {onToggleYaml && (
+      {kind === 'workflows' && onCopyCommand && (!canViewLogs || !openWorkloadLogs) && (
         <button
-          onClick={onToggleYaml}
-          className={clsx(
-            'flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors',
-            showYaml
-              ? 'btn-brand'
-              : 'text-theme-text-secondary hover:text-theme-text-primary border border-theme-border-light hover:bg-theme-elevated'
+          onClick={(e) => onCopyCommand(
+            `argo logs ${resource.name} -n ${resource.namespace}`,
+            'Logs command copied',
+            e
           )}
-          title="Toggle YAML view"
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
         >
-          <FileCode2 className="w-3.5 h-3.5" />
-          YAML
+          <FileText className="w-3.5 h-3.5" />
+          Logs
         </button>
       )}
 
+      {/* Spacer pushes universal actions to the right */}
+      <div className="flex-1" />
+
+      {/* Universal actions (right-aligned). The AI/Diagnose action is NOT here — it
+          lives in the detail header chrome (see WorkloadView), set apart from these
+          imperative ops. */}
+      {onToggleYaml && (
+        <Tooltip content="Toggle YAML view" delay={150}>
+          <button
+            onClick={onToggleYaml}
+            className={clsx(
+              'flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors',
+              showYaml
+                ? 'btn-brand'
+                : 'text-theme-text-secondary hover:text-theme-text-primary border border-theme-border-light hover:bg-theme-elevated'
+            )}
+          >
+            <FileCode2 className="w-3.5 h-3.5" />
+            YAML
+          </button>
+        </Tooltip>
+      )}
+
       {(onCompareTo || onCompareAcrossClusters) && (
         <div
           className="relative"
@@ -669,35 +694,37 @@ function FluxActions({ resource, data, onReconcile, isReconciling, onSyncWithSou
   return (
     <>
       {onReconcile && (
-        <button
-          onClick={() => onReconcile({
-            kind: resource.kind,
-            namespace: resource.namespace,
-            name: resource.name,
-          })}
-          disabled={isReconciling || isSuspended}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
-          title={isSuspended ? 'Cannot reconcile while suspended' : 'Trigger reconciliation'}
-        >
-          <RefreshCw className={`w-3.5 h-3.5 ${isReconciling ? 'animate-spin' : ''}`} />
-          {isReconciling ? 'Reconciling...' : 'Reconcile'}
-        </button>
+        <Tooltip content={isSuspended ? 'Cannot reconcile while suspended' : 'Trigger reconciliation'} delay={150}>
+          <button
+            onClick={() => onReconcile({
+              kind: resource.kind,
+              namespace: resource.namespace,
+              name: resource.name,
+            })}
+            disabled={isReconciling || isSuspended}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
+          >
+            <RefreshCw className={`w-3.5 h-3.5 ${isReconciling ? 'animate-spin' : ''}`} />
+            {isReconciling ? 'Reconciling...' : 'Reconcile'}
+          </button>
+        </Tooltip>
       )}
 
       {hasSource && onSyncWithSource && (
-        <button
-          onClick={() => onSyncWithSource({
-            kind: resource.kind,
-            namespace: resource.namespace,
-            name: resource.name,
-          })}
-          disabled={isSyncing || isSuspended}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-purple-600 hover:bg-purple-700 rounded-lg transition-colors disabled:opacity-50"
-          title={isSuspended ? 'Cannot sync while suspended' : 'Fetch latest from source, then reconcile'}
-        >
-          <RefreshCw className={`w-3.5 h-3.5 ${isSyncing ? 'animate-spin' : ''}`} />
-          {isSyncing ? 'Syncing...' : 'Sync with Source'}
-        </button>
+        <Tooltip content={isSuspended ? 'Cannot sync while suspended' : 'Fetch latest from source, then reconcile'} delay={150}>
+          <button
+            onClick={() => onSyncWithSource({
+              kind: resource.kind,
+              namespace: resource.namespace,
+              name: resource.name,
+            })}
+            disabled={isSyncing || isSuspended}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-purple-600 hover:bg-purple-700 rounded-lg transition-colors disabled:opacity-50"
+          >
+            <RefreshCw className={`w-3.5 h-3.5 ${isSyncing ? 'animate-spin' : ''}`} />
+            {isSyncing ? 'Syncing...' : 'Sync with Source'}
+          </button>
+        </Tooltip>
       )}
 
       {isSuspended ? (
@@ -751,34 +778,36 @@ function ArgoActions({ resource, data, onSync, isSyncing, onRefresh, isRefreshin
   return (
     <>
       {onSync && (
-        <button
-          onClick={() => onSync({
-            namespace: resource.namespace,
-            name: resource.name,
-          })}
-          disabled={isSyncing}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
-          title="Sync application"
-        >
-          <RefreshCw className={`w-3.5 h-3.5 ${isSyncing ? 'animate-spin' : ''}`} />
-          {isSyncing ? 'Syncing...' : 'Sync'}
-        </button>
+        <Tooltip content="Sync application" delay={150}>
+          <button
+            onClick={() => onSync({
+              namespace: resource.namespace,
+              name: resource.name,
+            })}
+            disabled={isSyncing}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
+          >
+            <RefreshCw className={`w-3.5 h-3.5 ${isSyncing ? 'animate-spin' : ''}`} />
+            {isSyncing ? 'Syncing...' : 'Sync'}
+          </button>
+        </Tooltip>
       )}
 
       {onRefresh && (
-        <button
-          onClick={() => onRefresh({
-            namespace: resource.namespace,
-            name: resource.name,
-            hard: false,
-          })}
-          disabled={isRefreshing}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
-          title="Refresh (re-read from git)"
-        >
-          <RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin' : ''}`} />
-          {isRefreshing ? 'Refreshing...' : 'Refresh'}
-        </button>
+        <Tooltip content="Refresh (re-read from git)" delay={150}>
+          <button
+            onClick={() => onRefresh({
+              namespace: resource.namespace,
+              name: resource.name,
+              hard: false,
+            })}
+            disabled={isRefreshing}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
+          >
+            <RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin' : ''}`} />
+            {isRefreshing ? 'Refreshing...' : 'Refresh'}
+          </button>
+        </Tooltip>
       )}
 
       {hasAutomatedSync ? (
@@ -945,8 +974,10 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
                     <td className="py-2 pr-3 text-theme-text-primary font-mono">
                       #{rev.number}
                     </td>
-                    <td className="py-2 pr-3 text-theme-text-secondary font-mono truncate max-w-[180px]" title={rev.image}>
-                      {getImageTag(rev.image)}
+                    <td className="py-2 pr-3 text-theme-text-secondary font-mono max-w-[180px]">
+                      <Tooltip content={rev.image} delay={300} wrapperClassName="min-w-0">
+                        <span className="truncate">{getImageTag(rev.image)}</span>
+                      </Tooltip>
                     </td>
                     <td className="py-2 pr-3 text-theme-text-secondary whitespace-nowrap">
                       {formatTimeAgo(rev.createdAt)}
@@ -954,19 +985,20 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
                     <td className="py-2 text-right">
                       <div className="flex items-center gap-1 justify-end">
                         {!rev.isCurrent && rev.template && currentRevision?.template && (
-                          <button
-                            onClick={() => setDiffRevision(diffRevision === rev.number ? null : rev.number)}
-                            className={clsx(
-                              "px-2 py-0.5 text-xs font-medium rounded transition-colors flex items-center gap-1",
-                              diffRevision === rev.number
-                                ? "bg-blue-500/20 text-blue-400 border border-blue-400/50"
-                                : "text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 border border-transparent"
-                            )}
-                            title={`Compare with current revision`}
-                          >
-                            <GitCompare className="w-3 h-3" />
-                            Diff
-                          </button>
+                          <Tooltip content="Compare with current revision" delay={150}>
+                            <button
+                              onClick={() => setDiffRevision(diffRevision === rev.number ? null : rev.number)}
+                              className={clsx(
+                                "px-2 py-0.5 text-xs font-medium rounded transition-colors flex items-center gap-1",
+                                diffRevision === rev.number
+                                  ? "bg-blue-500/20 text-blue-400 border border-blue-400/50"
+                                  : "text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 border border-transparent"
+                              )}
+                            >
+                              <GitCompare className="w-3 h-3" />
+                              Diff
+                            </button>
+                          </Tooltip>
                         )}
                         {rev.isCurrent ? (
                           <span className="badge status-healthy">

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -11,6 +11,7 @@ import {
   getPVCStatus,
   getRolloutStatus,
   getWorkflowStatus,
+  getCronWorkflowStatus,
   getCertificateStatus,
   getPVStatus,
   getClusterIssuerStatus,
@@ -82,6 +83,7 @@ import {
   SecretRenderer,
   JobRenderer,
   CronJobRenderer,
+  CronWorkflowRenderer,
   HPARenderer,
   NodeRenderer,
   PVCRenderer,
@@ -316,12 +318,12 @@ export interface RendererOverrides {
 // Known resource types with specific renderers (module-level to avoid re-allocation)
 const KNOWN_KINDS = new Set([
   'pods', 'deployments', 'statefulsets', 'daemonsets', 'replicasets',
-  'services', 'endpointslices', 'ingresses', 'configmaps', 'secrets', 'jobs', 'cronjobs',
+  'services', 'endpointslices', 'ingresses', 'configmaps', 'secrets', 'jobs', 'cronjobs', 'cronworkflows',
   'hpas', 'horizontalpodautoscalers', 'nodes', 'persistentvolumeclaims',
   'rollouts', 'certificates', 'workflows', 'persistentvolumes',
   'storageclasses', 'certificaterequests', 'clusterissuers', 'issuers',
   'orders', 'challenges',
-  'gateways', 'gatewayclasses', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes', 'sealedsecrets', 'workflowtemplates',
+  'gateways', 'gatewayclasses', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes', 'sealedsecrets', 'workflowtemplates', 'clusterworkflowtemplates',
   'networkpolicies', 'networkpolicy',
   'ciliumnetworkpolicies', 'ciliumnetworkpolicy', 'ciliumclusterwidenetworkpolicies', 'ciliumclusterwidenetworkpolicy',
   'clusternetworkpolicies', 'clusternetworkpolicy',
@@ -406,6 +408,8 @@ interface ResourceRendererDispatchProps {
   eventsHint?: React.ReactNode
   /** When provided, sidebar sections (related resources, events, labels, annotations, metadata) are passed to this render prop instead of being rendered inline */
   renderSidebar?: (sections: React.ReactNode) => React.ReactNode
+  /** Additional overview content that belongs in the main content column after the resource renderer sections. */
+  mainFooter?: React.ReactNode
   /** K8s events for the focused resource — always shown (no toggle hides them)
    *  so resource history can't go missing. */
   events?: TimelineEvent[]
@@ -440,6 +444,7 @@ export function ResourceRendererDispatch({
   onOpenLogs,
   eventsHint,
   renderSidebar,
+  mainFooter,
   events,
   eventsLoading,
   updates,
@@ -527,12 +532,13 @@ export function ResourceRendererDispatch({
         {kind === 'secrets' && <SecretRenderer data={data} certificateInfo={certificateInfo} resourceData={data} onSaveSecretValue={onSaveSecretValue} isSaving={isSavingSecret} />}
         {kind === 'jobs' && <JobRenderer data={data} />}
         {kind === 'cronjobs' && <CronJobRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'cronworkflows' && <CronWorkflowRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'hpas' || kind === 'horizontalpodautoscalers') && <HPAComp data={data} onNavigate={onNavigate} hpaDiagnosis={hpaDiagnosis} />}
         {kind === 'nodes' && <NodeComp data={data} relationships={relationships} />}
         {kind === 'persistentvolumeclaims' && <PVCComp data={data} onNavigate={onNavigate} />}
         {kind === 'rollouts' && <RolloutRenderer data={data} />}
         {kind === 'certificates' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <CertificateRenderer data={data} />}
-        {kind === 'workflows' && <WorkflowRenderer data={data} />}
+        {kind === 'workflows' && <WorkflowRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'persistentvolumes' && <PersistentVolumeRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'storageclasses' && <StorageClassRenderer data={data} />}
         {kind === 'certificaterequests' && <CertificateRequestRenderer data={data} />}
@@ -547,7 +553,7 @@ export function ResourceRendererDispatch({
         {kind === 'tcproutes' && <SimpleRouteRenderer data={data} kind="TCPRoute" onNavigate={onNavigate} />}
         {kind === 'tlsroutes' && <SimpleRouteRenderer data={data} kind="TLSRoute" onNavigate={onNavigate} />}
         {kind === 'sealedsecrets' && <SealedSecretRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'workflowtemplates' && <WorkflowTemplateRenderer data={data} />}
+        {(kind === 'workflowtemplates' || kind === 'clusterworkflowtemplates') && <WorkflowTemplateRenderer data={data} />}
         {(kind === 'networkpolicies' || kind === 'networkpolicy') && <NetworkPolicyRenderer data={data} />}
         {(kind === 'ciliumnetworkpolicies' || kind === 'ciliumnetworkpolicy' || kind === 'ciliumclusterwidenetworkpolicies' || kind === 'ciliumclusterwidenetworkpolicy') && <CiliumNetworkPolicyRenderer data={data} />}
         {(kind === 'clusternetworkpolicies' || kind === 'clusternetworkpolicy') && <ClusterNetworkPolicyRenderer data={data} />}
@@ -712,6 +718,7 @@ export function ResourceRendererDispatch({
             {!renderSidebar && sidebarContent}
           </>
         )}
+        {mainFooter}
       </div>
       {renderSidebar && sidebarContent && renderSidebar(sidebarContent)}
     </div>
@@ -722,6 +729,27 @@ export function ResourceRendererDispatch({
 // RESOURCE STATUS HELPER
 // ============================================================================
 
+// Coarse health hint for the per-resource Diagnose entry point: should the action
+// read as an urgent "Diagnose" (resource has a live problem) or a quiet "ask AI"?
+// Derived from the same status the detail badge shows, so the button matches what
+// the user sees. We key off the StatusBadge `level` (the workload/pod status fns
+// return it) — NOT the color string, which varies by helper. 'unknown' for kinds
+// without a level (we don't assert "Diagnose" when we can't tell → quiet variant).
+export type DiagnoseHealthHint = 'problem' | 'healthy' | 'unknown'
+export function diagnoseHealthHint(kind: string, data: any): DiagnoseHealthHint {
+  const st = getResourceStatus(kind, data) as { level?: string } | null
+  switch (st?.level) {
+    case 'unhealthy':
+    case 'degraded':
+    case 'alert':
+      return 'problem'
+    case 'healthy':
+      return 'healthy'
+    default:
+      return 'unknown'
+  }
+}
+
 export function getResourceStatus(kind: string, data: any): { text: string; color: string } | null {
   if (!data) return null
   const k = kind.toLowerCase()
@@ -752,6 +780,7 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'persistentvolumeclaims') return getPVCStatus(data)
   if (k === 'rollouts') return getRolloutStatus(data)
   if (k === 'workflows') return getWorkflowStatus(data)
+  if (k === 'cronworkflows') return getCronWorkflowStatus(data)
   if (k === 'certificates') {
     if (data.apiVersion?.includes('networking.internal.knative.dev')) {
       const status = getKnativeConditionStatus(data)