custom-resource.tsx

import { Headlamp, Plugin, Registry, K8s } from '@kinvolk/headlamp-plugin/lib';
import { apply } from '@kinvolk/headlamp-plugin/types/lib/k8s';
import { KubeObjectInterface, makeKubeObject } from '@kinvolk/headlamp-plugin/types/lib/k8s/cluster';
import React from 'react';

let sampleCR1: KubeObjectInterface  = {
    apiVersion: 'stable.example.com/v1',
    kind: 'CronTab',
    metadata: {
        name: 'my-new-cron-object',
        namespace: 'default'
    },
    spec: {
        cronSpec: '* * * * */5',
        image: 'my-awesome-cron-image'
    }
}
function CustomResources() {
    const args: [string, string, string][] = [['stable.example.com', 'v1', 'crontabs']]
    const Customresource = K8s.crd.makeCustomResourceClass(args, true)
    Customresource.useApiGet((item) => {
        console.log(item)
    }, sampleCR1.metadata.name, sampleCR1.metadata.namespace, (error) => {
        console.log(error)
    });
    return <div>Hello</div>;
}

class CustomResourceExample extends Plugin {
  initialize(registry: Registry) {
        registry.registerSidebarItem('cluster', 'customresources', 'Crs', '/customresources')
        registry.registerRoute({path: '/customresources', sidebar: 'crs', component: () => <CustomResources/>})   
    return true;
  }
}

Headlamp.registerPlugin('custom-resource-test', new CustomResourceExample());