@skyhook-io/k8s-ui 1.0.0

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

@@ -0,0 +1,50 @@
+import { ArrowUpDown } from 'lucide-react'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+
+interface PriorityClassRendererProps {
+  data: any
+}
+
+export function PriorityClassRenderer({ data }: PriorityClassRendererProps) {
+  const preemptionPolicy = data.preemptionPolicy || 'PreemptLowerPriority'
+
+  return (
+    <>
+      <Section title="Priority Class" icon={ArrowUpDown}>
+        <PropertyList>
+          <Property label="Value" value={data.value != null ? String(data.value) : undefined} />
+          <Property
+            label="Global Default"
+            value={
+              data.globalDefault != null ? (
+                <span className={data.globalDefault ? 'text-green-400' : 'text-theme-text-tertiary'}>
+                  {data.globalDefault ? 'Yes' : 'No'}
+                </span>
+              ) : (
+                <span className="text-theme-text-tertiary">No</span>
+              )
+            }
+          />
+          <Property
+            label="Preemption Policy"
+            value={
+              <span
+                className={preemptionPolicy === 'Never' ? 'text-green-400' : 'text-amber-400'}
+                title={
+                  preemptionPolicy === 'Never'
+                    ? 'Will wait in queue instead of preempting'
+                    : 'Will preempt running pods with lower priority'
+                }
+              >
+                {preemptionPolicy}
+              </span>
+            }
+          />
+        </PropertyList>
+        {data.description && (
+          <p className="mt-3 text-sm text-theme-text-tertiary leading-relaxed">{data.description}</p>
+        )}
+      </Section>
+    </>
+  )
+}

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

@@ -0,0 +1,62 @@
+import { Bell } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import {
+  getPrometheusRuleGroups,
+  getPrometheusRuleTotalRules,
+  getPrometheusRuleGroupCount,
+} from '../resource-utils-prometheus'
+
+interface PrometheusRuleRendererProps {
+  data: any
+}
+
+export function PrometheusRuleRenderer({ data }: PrometheusRuleRendererProps) {
+  const groups = getPrometheusRuleGroups(data)
+  const totalRules = getPrometheusRuleTotalRules(data)
+  const totalAlerts = groups.reduce((sum, g) => sum + g.alertCount, 0)
+  const totalRecords = groups.reduce((sum, g) => sum + g.recordCount, 0)
+  const conditions = data.status?.conditions
+
+  return (
+    <>
+      <Section title="PrometheusRule" icon={Bell}>
+        <PropertyList>
+          <Property label="Groups" value={String(getPrometheusRuleGroupCount(data))} />
+          <Property label="Total Rules" value={String(totalRules)} />
+          <Property label="Alert Rules" value={String(totalAlerts)} />
+          <Property label="Recording Rules" value={String(totalRecords)} />
+        </PropertyList>
+      </Section>
+
+      {groups.length > 0 && (
+        <Section title={`Rule Groups (${groups.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {groups.map((group, i) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+                <div className="flex items-center justify-between">
+                  <span className="text-theme-text-primary font-medium">{group.name}</span>
+                  <div className="flex items-center gap-2">
+                    {group.interval && (
+                      <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                        {group.interval}
+                      </span>
+                    )}
+                    <span className="text-xs text-theme-text-tertiary">
+                      {group.ruleCount} rule{group.ruleCount !== 1 ? 's' : ''}
+                    </span>
+                  </div>
+                </div>
+                <div className="text-xs text-theme-text-secondary mt-1 flex gap-3">
+                  {group.alertCount > 0 && <span>{group.alertCount} alert{group.alertCount !== 1 ? 's' : ''}</span>}
+                  {group.recordCount > 0 && <span>{group.recordCount} recording</span>}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,71 @@
+import { Server } from 'lucide-react'
+import { Section, PropertyList, Property, KeyValueBadgeList, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+
+interface ReplicaSetRendererProps {
+  data: any
+}
+
+// Extract problems from ReplicaSet status
+function getReplicaSetProblems(data: any): string[] {
+  const problems: string[] = []
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = status.conditions || []
+
+  const ready = status.readyReplicas || 0
+  const desired = spec.replicas || 0
+  const available = status.availableReplicas || 0
+
+  // Check replica counts
+  if (desired > 0 && ready < desired) {
+    problems.push(`${desired - ready} of ${desired} pods are not ready`)
+  }
+
+  if (desired > 0 && available < desired) {
+    problems.push(`${desired - available} pods are not available`)
+  }
+
+  // Check conditions
+  for (const cond of conditions) {
+    if (cond.status === 'False' && cond.message) {
+      problems.push(`${cond.type}: ${cond.message}`)
+    }
+    if (cond.status === 'True' && cond.type === 'ReplicaFailure' && cond.message) {
+      problems.push(cond.message)
+    }
+  }
+
+  return problems
+}
+
+export function ReplicaSetRenderer({ data }: ReplicaSetRendererProps) {
+  const ownerRef = data.metadata?.ownerReferences?.[0]
+  const problems = getReplicaSetProblems(data)
+  const hasProblems = problems.length > 0
+
+  return (
+    <>
+      {/* Problems alert */}
+      {hasProblems && (
+        <AlertBanner variant="error" title="Issues Detected" items={problems} />
+      )}
+
+      <Section title="Status" icon={Server}>
+        <PropertyList>
+          <Property label="Replicas" value={`${data.status?.readyReplicas || 0}/${data.spec?.replicas || 0}`} />
+          <Property label="Available" value={data.status?.availableReplicas} />
+          {ownerRef && (
+            <Property label="Owner" value={`${ownerRef.kind}/${ownerRef.name}`} />
+          )}
+          <Property label="Revision" value={data.metadata?.annotations?.['deployment.kubernetes.io/revision']} />
+        </PropertyList>
+      </Section>
+
+      <Section title="Selector">
+        <KeyValueBadgeList items={data.spec?.selector?.matchLabels} />
+      </Section>
+
+      <ConditionsSection conditions={data.status?.conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,97 @@
+import { Shield, Users } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ResourceLink, AlertBanner } from '../../ui/drawer-components'
+
+interface RoleBindingRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function getSubjectKindBadgeClass(kind: string): string {
+  switch (kind) {
+    case 'ServiceAccount':
+      return 'bg-green-500/20 text-green-400'
+    case 'User':
+      return 'bg-blue-500/20 text-blue-400'
+    case 'Group':
+      return 'bg-purple-500/20 text-purple-400'
+    default:
+      return 'bg-gray-500/20 text-gray-400'
+  }
+}
+
+function getRoleRefKindBadgeClass(kind: string): string {
+  switch (kind) {
+    case 'Role':
+      return 'bg-blue-500/20 text-blue-400'
+    case 'ClusterRole':
+      return 'bg-purple-500/20 text-purple-400'
+    default:
+      return 'bg-gray-500/20 text-gray-400'
+  }
+}
+
+export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererProps) {
+  const roleRef = data.roleRef || {}
+  const subjects: any[] = data.subjects || []
+  const isClusterRoleBinding = data.kind === 'ClusterRoleBinding'
+
+  return (
+    <>
+      {subjects.length === 0 && (
+        <AlertBanner
+          variant="warning"
+          title="No Subjects"
+          message="This binding has no subjects — it has no effect until subjects are added."
+        />
+      )}
+
+      {isClusterRoleBinding && (
+        <div className="p-2 bg-blue-500/10 border border-blue-500/30 rounded text-xs text-blue-300/80 flex items-start gap-2">
+          <span>ClusterRoleBinding grants permissions across all namespaces.</span>
+        </div>
+      )}
+
+      <Section title="Role Reference" icon={Shield}>
+        <PropertyList>
+          <Property
+            label="Kind"
+            value={
+              roleRef.kind ? (
+                <span className={clsx('px-2 py-0.5 rounded text-xs', getRoleRefKindBadgeClass(roleRef.kind))}>
+                  {roleRef.kind}
+                </span>
+              ) : undefined
+            }
+          />
+          <Property label="Name" value={
+            roleRef.name ? <ResourceLink name={roleRef.name} kind={roleRef.kind === 'ClusterRole' ? 'clusterroles' : 'roles'} namespace={roleRef.kind === 'ClusterRole' ? '' : (data.metadata?.namespace || '')} onNavigate={onNavigate} /> : undefined
+          } />
+          <Property label="API Group" value={roleRef.apiGroup} />
+        </PropertyList>
+      </Section>
+
+      <Section title={`Subjects (${subjects.length})`} icon={Users} defaultExpanded>
+        <div className="space-y-2">
+          {subjects.map((subject: any, i: number) => (
+            <div key={`${subject.kind}-${subject.name}-${i}`} className="bg-theme-elevated/30 rounded p-2 text-sm">
+              <div className="flex items-center gap-2">
+                <span className={clsx('px-2 py-0.5 rounded text-xs', getSubjectKindBadgeClass(subject.kind))}>
+                  {subject.kind}
+                </span>
+                {subject.kind === 'ServiceAccount' ? (
+                  <ResourceLink name={subject.name} kind="serviceaccounts" namespace={subject.namespace || 'default'} onNavigate={onNavigate} />
+                ) : (
+                  <span className="text-theme-text-primary font-medium">{subject.name}</span>
+                )}
+              </div>
+              <div className="text-xs text-theme-text-tertiary mt-1">
+                Namespace: {subject.kind === 'ServiceAccount' ? (subject.namespace || 'default') : '-'}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+    </>
+  )
+}

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

@@ -0,0 +1,192 @@
+import { Shield, Info } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+
+interface RoleRendererProps {
+  data: any
+}
+
+const READ_VERBS = new Set(['get', 'list', 'watch'])
+const WRITE_VERBS = new Set(['create', 'update', 'patch'])
+const DELETE_VERBS = new Set(['delete', 'deletecollection'])
+
+function getVerbColor(verb: string): string {
+  if (verb === '*') return 'bg-red-500/20 text-red-400'
+  if (READ_VERBS.has(verb)) return 'bg-green-500/20 text-green-400'
+  if (WRITE_VERBS.has(verb)) return 'bg-yellow-500/20 text-yellow-400'
+  if (DELETE_VERBS.has(verb)) return 'bg-red-500/20 text-red-400'
+  return 'bg-blue-500/20 text-blue-400'
+}
+
+export function RoleRenderer({ data }: RoleRendererProps) {
+  const rules = data.rules || []
+  const aggregationRule = data.aggregationRule
+
+  const hasWildcard = rules.some((r: any) =>
+    (r.verbs || []).includes('*') || (r.apiGroups || []).includes('*') || (r.resources || []).includes('*')
+  )
+
+  return (
+    <>
+      {hasWildcard && (
+        <AlertBanner
+          variant="warning"
+          title="Wildcard Permissions"
+          message="This role grants wildcard (*) permissions. Review the rules to ensure this level of access is intended."
+        />
+      )}
+
+      {/* Overview */}
+      <Section title="Overview" icon={Shield}>
+        <PropertyList>
+          <Property label="Rules" value={rules.length} />
+          {aggregationRule && (
+            <Property
+              label="Type"
+              value={
+                <span className="text-blue-400">Aggregated ClusterRole</span>
+              }
+            />
+          )}
+        </PropertyList>
+        {aggregationRule && (
+          <div className="mt-2 p-2 bg-blue-500/10 border border-blue-500/30 rounded text-xs text-blue-300/80 flex items-start gap-2">
+            <Info className="w-3.5 h-3.5 mt-0.5 shrink-0 text-blue-400" />
+            <span>
+              This ClusterRole is automatically aggregated from other ClusterRoles
+              matching the specified label selectors.
+            </span>
+          </div>
+        )}
+      </Section>
+
+      {/* Rules */}
+      <Section title={`Rules (${rules.length})`} icon={Shield} defaultExpanded>
+        <div className="space-y-3">
+          {rules.map((rule: any, i: number) => (
+            <div key={i} className="bg-theme-elevated/30 rounded p-3">
+              {/* API Groups */}
+              {rule.apiGroups && rule.apiGroups.length > 0 && (
+                <div className="mb-2">
+                  <div className="text-xs text-theme-text-tertiary mb-1">API Groups</div>
+                  <div className="flex flex-wrap gap-1">
+                    {rule.apiGroups.map((group: string, gi: number) => (
+                      <span
+                        key={gi}
+                        className="px-2 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary"
+                      >
+                        {group === '' ? 'core' : group}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Resources */}
+              {rule.resources && rule.resources.length > 0 && (
+                <div className="mb-2">
+                  <div className="text-xs text-theme-text-tertiary mb-1">Resources</div>
+                  <div className="flex flex-wrap gap-1">
+                    {rule.resources.map((resource: string) => (
+                      <span
+                        key={resource}
+                        className="px-2 py-0.5 rounded text-xs bg-purple-500/20 text-purple-400"
+                      >
+                        {resource}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Verbs */}
+              {rule.verbs && rule.verbs.length > 0 && (
+                <div className="mb-2">
+                  <div className="text-xs text-theme-text-tertiary mb-1">Verbs</div>
+                  <div className="flex flex-wrap gap-1">
+                    {rule.verbs.map((verb: string) => (
+                      <span
+                        key={verb}
+                        className={clsx(
+                          'px-2 py-0.5 rounded text-xs',
+                          getVerbColor(verb)
+                        )}
+                      >
+                        {verb}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Resource Names */}
+              {rule.resourceNames && rule.resourceNames.length > 0 && (
+                <div className="mb-2">
+                  <div className="text-xs text-theme-text-tertiary mb-1">Resource Names</div>
+                  <div className="flex flex-wrap gap-1">
+                    {rule.resourceNames.map((name: string) => (
+                      <span
+                        key={name}
+                        className="px-2 py-0.5 rounded text-xs bg-cyan-500/20 text-cyan-400"
+                      >
+                        {name}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Non-Resource URLs */}
+              {rule.nonResourceURLs && rule.nonResourceURLs.length > 0 && (
+                <div>
+                  <div className="text-xs text-theme-text-tertiary mb-1">Non-Resource URLs</div>
+                  <div className="flex flex-wrap gap-1">
+                    {rule.nonResourceURLs.map((url: string) => (
+                      <span
+                        key={url}
+                        className="px-2 py-0.5 rounded text-xs bg-orange-500/20 text-orange-400"
+                      >
+                        {url}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+
+          {rules.length === 0 && (
+            <div className="text-sm text-theme-text-tertiary">No rules defined</div>
+          )}
+        </div>
+      </Section>
+
+      {/* Aggregation Rule */}
+      {aggregationRule && aggregationRule.clusterRoleSelectors && (
+        <Section title="Aggregation Rule" defaultExpanded>
+          <div className="space-y-3">
+            {aggregationRule.clusterRoleSelectors.map((selector: any, i: number) => (
+              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                <div className="text-xs text-theme-text-tertiary mb-1">Match Labels</div>
+                {selector.matchLabels && Object.keys(selector.matchLabels).length > 0 ? (
+                  <div className="flex flex-wrap gap-1">
+                    {Object.entries(selector.matchLabels).map(([k, v]) => (
+                      <span
+                        key={k}
+                        className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+                      >
+                        {k}={String(v)}
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-xs text-theme-text-tertiary">No labels specified</div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}