Update to be compatible with modern kubernetes versions

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10-alpine
+FROM node:12-alpine
 
 ENV PORT 3000
 
@@ -16,4 +16,4 @@ COPY . /usr/src/app
 RUN ["yarn", "build"]
 EXPOSE 3000
 
-CMD [ "yarn", "start" ]
+CMD [ "yarn", "start" ]

README.md

@@ -1,5 +1,7 @@
 # Bifocals
 
+Bifocals runs in your k8s cluster and provides a UI to show the state of all your Custom Resources, grouped by Kind.
+
 ![Bifocals Readme](./docs/assets/bifocals-readme.png)
 
 ## Deploy

components/Kind.tsx

@@ -4,7 +4,7 @@ import * as jp from 'jsonpath';
 import { Accordion, Icon, List, Label, Segment, AccordionTitleProps } from 'semantic-ui-react';
 
 interface KindProps {
-  crd: k8s.V1beta1CustomResourceDefinition;
+  crd: k8s.V1CustomResourceDefinition;
   active: boolean;
   index: number;
   handleClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, titleProps: AccordionTitleProps) => void;
@@ -16,9 +16,10 @@ export const Kind: React.FC<KindProps> = ({ crd, active, index, ...props }) => {
   const [loading, setLoading] = useState(true);
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, titleProps: AccordionTitleProps) => {
-    fetch(`api/crds/v1beta1/${crd.spec.names.plural}?group=${crd.spec.group}&version=${crd.spec.version}`)
+    fetch(`api/crds/v1/${crd.spec.names.plural}?group=${crd.spec.group}&version=${crd.spec.versions[0].name}`)
       .then(res => {
         if (!res.ok) {
+          console.log(res.body);
           setError(res.status);
         } else {
           return res.json();
@@ -55,11 +56,11 @@ export const Kind: React.FC<KindProps> = ({ crd, active, index, ...props }) => {
                   <List.Header style={{ paddingBottom: '10px', textDecoration: 'bold' }}>{i.metadata.name}</List.Header>
                   <List.Description>
                     <Segment inverted>
-                      {crd.spec.additionalPrinterColumns?.length &&
-                        crd.spec.additionalPrinterColumns.map((c, ind) => (
+                      {crd.spec.versions[0].additionalPrinterColumns?.length &&
+                        crd.spec.versions[0].additionalPrinterColumns.map((c, ind) => (
                           <div style={{ paddingBottom: '5px' }} key={ind}>
                             <Label style={{ marginRight: '5px' }}>{c.name}</Label>
-                            {jp.query(i, `$${c.JSONPath}`)}
+                            {jp.query(i, `$${c.jsonPath}`)}
                           </div>
                         ))}
                     </Segment>

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "dependencies": {
-    "@kubernetes/client-node": "^0.11.0",
+    "@kubernetes/client-node": "^0.20.0",
     "jsonpath": "^1.0.2",
     "next": "^10.0.5",
     "react": "^17.0.1",

pages/api/crds/v1beta1/index.ts → pages/api/crds/v1/index.ts

@@ -4,7 +4,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 const kc = new k8s.KubeConfig();
 kc.loadFromDefault();
 
-const k8sApi = kc.makeApiClient(k8s.ApiextensionsV1beta1Api);
+const k8sApi = kc.makeApiClient(k8s.ApiextensionsV1Api);
 
 export default async (_req: NextApiRequest, res: NextApiResponse): Promise<void> =>
   new Promise(resolve => {

pages/index.tsx

@@ -16,9 +16,9 @@ import Kind from '../components/Kind';
 
 export const HomePage: React.FC = () => {
   const [activeIndex, setActiveIndex] = useState<string | number | null>(null);
-  const [data, setData] = useState<k8s.V1beta1CustomResourceDefinitionList | null>(null);
+  const [data, setData] = useState<k8s.V1CustomResourceDefinitionList | null>(null);
   const [error, setError] = useState<number | null>(null);
-  const [filtered, setFiltered] = useState<k8s.V1beta1CustomResourceDefinitionList['items']>([]);
+  const [filtered, setFiltered] = useState<k8s.V1CustomResourceDefinitionList['items']>([]);
 
   const handleClick = (_event: React.MouseEvent<HTMLDivElement, MouseEvent>, titleProps: AccordionTitleProps) => {
     const { index } = titleProps;
@@ -35,15 +35,15 @@ export const HomePage: React.FC = () => {
   };
 
   useEffect(() => {
-    fetch('api/crds/v1beta1')
+    fetch('api/crds/v1')
       .then(res => {
         if (!res.ok) {
           setError(res.status);
         } else {
           return res.json();
         }
       })
-      .then((data?: { body: k8s.V1beta1CustomResourceDefinitionList }) => {
+      .then((data?: { body: k8s.V1CustomResourceDefinitionList }) => {
         data?.body && setData(data.body);
         data?.body?.items && setFiltered(data.body.items);
       });