feat: add Show Owner Reference button for kube resources

Fixes #4106

Author: starpit

packages/test/src/api/selectors.ts

@@ -90,6 +90,7 @@ export const LIST_RESULT_BY_N_FOR_NAME = (N: number, name: string) => `${LIST_RE
 export const TABLE_HEADER_CELL = (cellKey: string) => `thead tr th[data-key="${cellKey}"]`
 export const TABLE_CELL = (rowKey: string, cellKey: string) => `tbody [data-name="${rowKey}"] [data-key="${cellKey}"]`
 export const BY_NAME = (name: string) => `tbody [data-name="${name}"]`
+export const LIST_RESULT_FIRST = 'tbody tr:first-child .clickable'
 export const LIST_RESULT_BY_N_AND_NAME = (N: number, name: string) =>
   `${LIST_RESULT_BY_N_FOR_NAME(N, name)} .entity-name`
 export const OK_N = (N: number) => `${PROMPT_BLOCK_N(N)} .repl-output .ok`

plugins/plugin-client-common/web/css/static/Tooltip.scss

@@ -1,14 +1,11 @@
 [kui-theme-style] {
-  .bx--tooltip,
   .bx--tooltip__trigger {
-    &,
-    &.bx--tooltip--bottom .bx--assistive-text,
-    .bx--tooltip__caret {
-      background-color: var(--color-sidecar-toolbar-background);
-      color: var(--color-sidecar-toolbar-foreground);
-    }
-
     &.bx--tooltip--bottom.bx--tooltip--align-end {
+      .bx--assistive-text {
+        background-color: var(--color-sidecar-toolbar-background);
+        color: var(--color-sidecar-toolbar-foreground);
+      }
+
       &:before {
         border-bottom-color: var(--color-sidecar-toolbar-background);
       }

plugins/plugin-client-common/web/css/static/ui.css

@@ -203,6 +203,9 @@ body.still-loading .repl {
 }
 
 /* generic */
+.kui--rotate-180 {
+  transform: rotate(180deg);
+}
 .full-height {
   flex: 1;
   display: flex;

plugins/plugin-kubectl/i18n/resources_en_US.json

@@ -20,6 +20,7 @@
   "keditUsageRequiredDocs": "A kubernetes resource file or kind",
   "keditUsageDocs": "Edit a resource definition file",
   "keditUsageOptionalDocs": "a resource within the file to view",
+  "Show Owner Reference": "Show Owner Reference",
   "Show Involved Object": "Show Involved Object",
   "Show Resources": "Show Resources",
   "conditions": "Conditions",

plugins/plugin-kubectl/src/lib/model/resource.ts

@@ -63,21 +63,42 @@ export class DefaultKubeStatus implements KubeStatus {
   public message = undefined
 }
 
-interface OwnerReferences {
-  kind: string
-  name: string
+interface WithOwnerReferences {
+  ownerReferences: {
+    apiVersion: string
+    kind: string
+    name: string
+  }[]
 }
 
-export interface KubeMetadata {
+export type KubeMetadata = Partial<WithOwnerReferences> & {
   name: string
   namespace?: string
   labels?: { [key: string]: string }
   annotations?: object
   creationTimestamp?: string
   generation?: string
   generateName?: string
-  ownerReferences?: OwnerReferences[]
 }
+
+export type KubeResourceWithOwnerReferences = KubeResource<{}, KubeMetadata & Required<WithOwnerReferences>>
+
+export function hasSingleOwnerReference(resource: KubeResource): resource is KubeResourceWithOwnerReferences {
+  if (!resource.metadata) {
+    return false
+  }
+
+  const { ownerReferences } = resource.metadata as WithOwnerReferences
+  return (
+    ownerReferences &&
+    Array.isArray(ownerReferences) &&
+    ownerReferences.length === 1 &&
+    typeof ownerReferences[0].apiVersion === 'string' &&
+    typeof ownerReferences[0].kind === 'string' &&
+    typeof ownerReferences[0].name === 'string'
+  )
+}
+
 export class DefaultKubeMetadata implements KubeMetadata {
   public kind = undefined
 
@@ -109,11 +130,11 @@ export function hasRawData(resource: ResourceWithMetadata) {
  * The basic Kubernetes resource
  *
  */
-export type KubeResource<Status = KubeStatus> = ResourceWithMetadata &
+export type KubeResource<Status = KubeStatus, Metadata = KubeMetadata> = ResourceWithMetadata &
   WithRawData & {
     apiVersion: string
     kind: string
-    metadata?: KubeMetadata
+    metadata?: Metadata
     status?: Status
     spec?: any // eslint-disable-line @typescript-eslint/no-explicit-any
 

plugins/plugin-kubectl/src/lib/view/modes/ShowOwnerButton.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react'
+import { JumpLink16 as ShowOwnerIcon } from '@carbon/icons-react'
+import { i18n, encodeComponent, Tab, ModeRegistration } from '@kui-shell/core'
+
+import { fqn } from '../../../controller/kubectl/fqn'
+import { hasSingleOwnerReference, KubeResourceWithOwnerReferences } from '../../model/resource'
+import { getCommandFromArgs } from '../../../lib/util/util'
+
+const strings = i18n('plugin-kubectl')
+
+/**
+ * Extract the events
+ *
+ */
+function command(
+  tab: Tab,
+  {
+    metadata: {
+      namespace,
+      ownerReferences: [{ apiVersion, kind, name }]
+    }
+  }: KubeResourceWithOwnerReferences,
+  args: { argvNoOptions: string[] }
+) {
+  return `${getCommandFromArgs(args)} get ${fqn(
+    apiVersion,
+    encodeComponent(kind),
+    encodeComponent(name),
+    encodeComponent(namespace || 'default')
+  )} -o yaml`
+}
+
+/**
+ * Add an Involved Object mode button
+ *
+ */
+const mode: ModeRegistration<KubeResourceWithOwnerReferences> = {
+  when: hasSingleOwnerReference,
+  mode: {
+    mode: 'ownerReference',
+    kind: 'drilldown',
+    label: strings('Show Owner Reference'),
+    icon: <ShowOwnerIcon className="kui--rotate-180" />,
+    command
+  }
+}
+
+export default mode

plugins/plugin-kubectl/src/non-headless-preload.ts

@@ -26,7 +26,8 @@ import namespaceSummaryMode from './lib/view/modes/namespace-summary'
 import conditionsMode from './lib/view/modes/conditions'
 import containersMode from './lib/view/modes/containers'
 import lastAppliedMode from './lib/view/modes/last-applied'
-import deleteResourceMode from './lib/view/modes/DeleteButton'
+import showOwnerButton from './lib/view/modes/ShowOwnerButton'
+import deleteResourceButton from './lib/view/modes/DeleteButton'
 import involvedObjectMode from './lib/view/modes/involved-object'
 import showCRDResources from './lib/view/modes/show-crd-managed-resources'
 import { eventsMode, eventsBadge } from './lib/view/modes/events'
@@ -47,7 +48,8 @@ export default async (registrar: PreloadRegistrar) => {
     containersMode,
     lastAppliedMode,
     showCRDResources,
-    deleteResourceMode,
+    showOwnerButton,
+    deleteResourceButton,
     involvedObjectMode
   )
 

plugins/plugin-kubectl/src/test/k8s1/deployment.ts

@@ -105,6 +105,32 @@ describe(`kubectl deployment ${process.env.MOCHA_RUN_TARGET || ''}`, function(th
     })
   }
 
+  const getPods = () => {
+    it('should list pods in deployment, then navigate using Show Owner Reference button', async () => {
+      try {
+        const selector = await CLI.command(`kubectl get pod -lapp=drone-app ${inNamespace}`, this.app).then(
+          ReplExpect.okWithCustom({ selector: Selectors.LIST_RESULT_FIRST })
+        )
+
+        await this.app.client.click(selector)
+
+        await SidecarExpect.open(this.app)
+          .then(SidecarExpect.showing('myapp', undefined, undefined, ns))
+          .then(SidecarExpect.button({ mode: 'ownerReference', label: 'Show Owner Reference' }))
+
+        await this.app.client.click(Selectors.SIDECAR_MODE_BUTTON('ownerReference'))
+        await SidecarExpect.open(this.app)
+          .then(SidecarExpect.kind('ReplicaSet'))
+          .then(SidecarExpect.button({ mode: 'ownerReference', label: 'Show Owner Reference' }))
+
+        await this.app.client.click(Selectors.SIDECAR_MODE_BUTTON('ownerReference'))
+        await SidecarExpect.open(this.app).then(SidecarExpect.kind('Deployment'))
+      } catch (err) {
+        return Common.oops(this, true)(err)
+      }
+    })
+  }
+
   const deleteItByName = () => {
     it('should delete the deployment by name', () => {
       return CLI.command(`kubectl delete deployment myapp ${inNamespace}`, this.app)
@@ -134,6 +160,7 @@ describe(`kubectl deployment ${process.env.MOCHA_RUN_TARGET || ''}`, function(th
 
   createIt()
   listIt()
+  getPods()
   deleteItByName()
 
   createIt()