K8s add cluster lookup (#2571)

* Kubernetes plugins boilerplate

* pr feedback; check for k8s annotation

* temp

* fix config

* add example local setup

* dice rolelr

* rever yarn lock update

* forgotten prettier

* prettier again

* master lock

* update lock with k8s deps

* prettier

* router tests

* internal error

* fix package.json

* PR feedback

* more pr feedback

* rename component file

* kubernetes fetcher tests

* fix test

* option constructor

plugins/kubernetes/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.1.1-alpha.23",
     "@backstage/core": "^0.1.1-alpha.23",
+    "@backstage/plugin-kubernetes-backend": "^0.1.1-alpha.23",
     "@backstage/theme": "^0.1.1-alpha.23",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",

plugins/kubernetes/src/Router.tsx

@@ -22,7 +22,7 @@ import { rootCatalogKubernetesRouteRef } from './plugin';
 import { KubernetesContent } from './components/KubernetesContent';
 import { WarningPanel } from '@backstage/core';
 
-const KUBERNETES_ANNOTATION = 'backstage.io/kubernetes';
+const KUBERNETES_ANNOTATION = 'backstage.io/kubernetes-id';
 
 export const Router = ({ entity }: { entity: Entity }) => {
   const kubernetesAnnotationValue =

plugins/kubernetes/src/api/KubernetesBackendClient.ts

@@ -16,6 +16,7 @@
 
 import { DiscoveryApi } from '@backstage/core';
 import { KubernetesApi } from './types';
+import { ObjectsByServiceIdResponse } from '@backstage/plugin-kubernetes-backend';
 
 export class KubernetesBackendClient implements KubernetesApi {
   private readonly discoveryApi: DiscoveryApi;
@@ -37,7 +38,9 @@ export class KubernetesBackendClient implements KubernetesApi {
     return await response.json();
   }
 
-  async getObjectsByServiceId(serviceId: String): Promise<{}> {
+  async getObjectsByServiceId(
+    serviceId: String,
+  ): Promise<ObjectsByServiceIdResponse> {
     return await this.getRequired(`/services/${serviceId}`);
   }
 }

plugins/kubernetes/src/api/types.ts

@@ -15,6 +15,7 @@
  */
 
 import { createApiRef } from '@backstage/core';
+import { ObjectsByServiceIdResponse } from '@backstage/plugin-kubernetes-backend';
 
 export const kubernetesApiRef = createApiRef<KubernetesApi>({
   id: 'plugin.kubernetes.service',
@@ -23,5 +24,5 @@ export const kubernetesApiRef = createApiRef<KubernetesApi>({
 });
 
 export interface KubernetesApi {
-  getObjectsByServiceId(serviceId: String): Promise<{}>;
+  getObjectsByServiceId(serviceId: String): Promise<ObjectsByServiceIdResponse>;
 }

plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx

@@ -15,25 +15,19 @@
  */
 
 import React, { FC, useEffect, useState } from 'react';
-import { Typography, Grid } from '@material-ui/core';
-import {
-  InfoCard,
-  Page,
-  pageTheme,
-  Content,
-  ContentHeader,
-  useApi,
-} from '@backstage/core';
+import { Grid } from '@material-ui/core';
+import { InfoCard, Page, pageTheme, Content, useApi } from '@backstage/core';
 import { Entity } from '@backstage/catalog-model';
 import { kubernetesApiRef } from '../../api/types';
+import { ObjectsByServiceIdResponse } from '@backstage/plugin-kubernetes-backend';
 
 // TODO this is a temporary component used to construct the Kubernetes plugin boilerplate
 
 export const KubernetesContent: FC<{ entity: Entity }> = ({ entity }) => {
   const kubernetesApi = useApi(kubernetesApiRef);
-  const [kubernetesObjects, setKubernetesObjects] = useState<{} | undefined>(
-    undefined,
-  );
+  const [kubernetesObjects, setKubernetesObjects] = useState<
+    ObjectsByServiceIdResponse | undefined
+  >(undefined);
   const [error, setError] = useState<string | undefined>(undefined);
 
   useEffect(() => {
@@ -50,21 +44,28 @@ export const KubernetesContent: FC<{ entity: Entity }> = ({ entity }) => {
   return (
     <Page theme={pageTheme.tool}>
       <Content>
-        <ContentHeader title="This is where you would see your kubernetes objects" />
         <Grid container spacing={3} direction="column">
-          <Grid item>
-            <InfoCard title="This is where you would see your kubernetes objects">
-              <Typography variant="body1">
-                {kubernetesObjects === undefined && <div>loading....</div>}
-                {error !== undefined && <div>{error}</div>}
-                {kubernetesObjects !== undefined && (
-                  <div>
-                    backend response: {JSON.stringify(kubernetesObjects)}
-                  </div>
-                )}
-              </Typography>
-            </InfoCard>
-          </Grid>
+          {kubernetesObjects === undefined && <div>loading....</div>}
+          {error !== undefined && <div>{error}</div>}
+          {kubernetesObjects !== undefined && (
+            <div>
+              {kubernetesObjects.items.map((item, i) => (
+                <Grid item key={i}>
+                  <InfoCard key={item.cluster.name} title={item.cluster.name}>
+                    {item.resources.map((fr, j) => (
+                      <div key={j}>
+                        <br />
+                        {fr.type}:{' '}
+                        {(fr.resources as any)
+                          .map((v: any) => v.metadata.name)
+                          .join(' ')}
+                      </div>
+                    ))}
+                  </InfoCard>
+                </Grid>
+              ))}
+            </div>
+          )}
         </Grid>
       </Content>
     </Page>