>;
+ export default content;
+}
+
+declare module '*.avif' {
+ const src: string;
+ export default src;
+}
+
+declare module '*.bmp' {
+ const src: string;
+ export default src;
+}
+
+declare module '*.gif' {
+ const src: string;
+ export default src;
+}
+
+declare module '*.jpg' {
+ const src: string;
+ export default src;
+}
+
+declare module '*.jpeg' {
+ const src: string;
+ export default src;
+}
+
+declare module '*.png' {
+ const src: string;
+ export default src;
+}
+
+declare module '*.webp' {
+ const src: string;
+ export default src;
+}
diff --git a/plugins/examples/customizing-map/src/index.tsx b/plugins/examples/customizing-map/src/index.tsx
new file mode 100644
index 00000000000..bc67f255fc5
--- /dev/null
+++ b/plugins/examples/customizing-map/src/index.tsx
@@ -0,0 +1,69 @@
+import {
+ registerKindDetailsPage,
+ registerKindIcon,
+ registerMapSource,
+} from '@kinvolk/headlamp-plugin/lib';
+import { KubeObject } from '@kinvolk/headlamp-plugin/lib/K8s/cluster';
+import { useMemo } from 'react';
+
+const mySource = {
+ id: 'my-source', // ID of the source should be unique
+ label: 'My Source', // label will be displayed in source picker
+ // you can provide an icon
+ icon: (
+
+ ),
+ /**
+ * useData is a hook that will be called to load nodes and edges for your source
+ * You can use hooks here that Headlamp provides to load Kubernetes resources
+ * this hook should return an object with nodes and edges or `null` if it's loading
+ * it's important that return object is not recreated every time, so useMemo is required
+ */
+ useData() {
+ return useMemo(() => {
+ // This would come from kubernetes API but it's hardcoded here as an example
+ const myResource = {
+ kind: 'MyResourceKind',
+ metadata: {
+ uid: '1234',
+ name: 'my-test-resource',
+ namespace: 'test-namespace',
+ creationTimestamp: '1234',
+ },
+ };
+
+ const edges = []; // no edges in this source
+ const nodes = [
+ {
+ id: '1234', // ID should be unique
+ type: 'kubeObject', // 'kubeObject' type represnets a kubernetes resource
+ data: {
+ // resource field is required and should contain KubeObject
+ resource: new KubeObject(myResource),
+ },
+ },
+ ];
+
+ return { edges, nodes };
+ }, []);
+ },
+};
+
+registerMapSource(mySource);
+
+registerKindIcon('MyResourceKind', {
+ // icon is a JSX element
+ icon:
,
+});
+
+registerKindDetailsPage('MyResourceKind', {
+ component: props => (
+
+ Details {props.name} {props.namespace}
+
+ ),
+});
diff --git a/plugins/examples/customizing-map/tsconfig.json b/plugins/examples/customizing-map/tsconfig.json
new file mode 100644
index 00000000000..23ef2e6181a
--- /dev/null
+++ b/plugins/examples/customizing-map/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "extends": "./node_modules/@kinvolk/headlamp-plugin/config/plugins-tsconfig.json",
+ "include": ["./src/**/*"]
+}