Buildless extension

kyma-project · Dec 5, 2024 · e085cd1 · e085cd1
1 parent ecd6982
commit e085cd1
Show file tree

Hide file tree

Showing 15 changed files with 836 additions and 0 deletions.
diff --git a/examples/buildless/README.md b/examples/buildless/README.md
@@ -0,0 +1,6 @@
+# How to set up your custom busola extension\
+
+1. Modify general.yaml section (change scope to 'namespace' or 'cluster', etc. )
+2. Adjust ui.html and script.js files. Remember to keep general.customElement property in sync with the name of the custom element defined in script.js. The script is loaded only only once and general.customElement property is used to determine if the customElement with that name is already defined.
+3. Run `npm run start` to start the development server.
+4. Run `npm run deploy` to deploy the extension to the cluster.
diff --git a/examples/buildless/deployment-template.yaml b/examples/buildless/deployment-template.yaml
@@ -0,0 +1,60 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: app-name
+  labels:
+    app: app-name
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: app-name
+  strategy:
+    type: RollingUpdate
+    rollingUpdate:
+      maxUnavailable: 0 # Allows at most one pod to be unavailable during updates
+      maxSurge: 1 # Allows one additional pod to be created during updates
+  template:
+    metadata:
+      labels:
+        app: app-name
+    spec:
+      containers:
+        - name: nodejs
+          image: node:22-alpine
+          command: ['sh', '-c']
+          args:
+            - |
+              cp /usr/src/app-src/* /usr/src/app/ && \
+              cd /usr/src/app && \
+              npm install && \
+              npm start
+          ports:
+            - containerPort: 3000
+          readinessProbe:
+            httpGet:
+              path: /health
+              port: 3000
+            initialDelaySeconds: 2 # Adjust based on your app's startup time
+            periodSeconds: 1
+            timeoutSeconds: 2
+            failureThreshold: 3
+          livenessProbe:
+            httpGet:
+              path: /health
+              port: 3000
+            initialDelaySeconds: 10 # Typically longer than readiness probe
+            periodSeconds: 20
+            timeoutSeconds: 2
+            failureThreshold: 3
+          volumeMounts:
+            - name: nodejs-config-volume
+              mountPath: /usr/src/app-src
+            - name: node-app-volume
+              mountPath: /usr/src/app
+      volumes:
+        - name: nodejs-config-volume
+          configMap:
+            name: app-name
+        - name: node-app-volume
+          emptyDir: {}
diff --git a/examples/buildless/express-templ.js b/examples/buildless/express-templ.js
@@ -0,0 +1,12 @@
+const express = require('express');
+const app = express();
+app.get('/', (req, res) => {
+  res.send('Hello World Template!');
+});
+app.get('/health', (req, res) => {
+  res.send('OK');
+});
+const port = 3000;
+app.listen(port, () => {
+  console.log(`Server running on port ${port}`);
+});
diff --git a/examples/buildless/general.yaml b/examples/buildless/general.yaml
@@ -0,0 +1,10 @@
+resource:
+  kind: ConfigMap
+  version: v1
+urlPath: buildless
+category: Workloads
+name: Buildless
+scope: namespace
+customElement: kyma-buildless
+description: >-
+  Kyma Buildless
diff --git a/examples/buildless/index.html b/examples/buildless/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Busola extension tester</title>
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+    <script type="module">
+      import '@ui5/webcomponents-icons/dist/AllIcons.js';
+      import '@ui5/webcomponents/dist/Title.js';
+      import '@ui5/webcomponents/dist/Input.js';
+      import '@ui5/webcomponents/dist/Select.js';
+      import '@ui5/webcomponents/dist/Option.js';
+      import '@ui5/webcomponents/dist/Panel.js';
+      import '@ui5/webcomponents/dist/Button.js';
+      import '@hey-web-components/monaco-editor';
+      import '@ui5/webcomponents/dist/TabContainer.js';
+      import '@ui5/webcomponents/dist/Tab.js';
+      import '@ui5/webcomponents/dist/TabSeparator.js';
+    </script>
+    <script src="script.js" type="module"></script>
+  </head>
+  <body>
+    <h2>Custom extension</h2>
+    <div id="container"></div>
+
+    <script type="module">
+      fetch('ui.html')
+        .then(response => response.text())
+        .then(text => {
+          document.getElementById('container').innerHTML = text;
+        });
+    </script>
+  </body>
+</html>
diff --git a/examples/buildless/k8s-client.js b/examples/buildless/k8s-client.js
@@ -0,0 +1,119 @@
+class K8sClient {
+  constructor(apiPrefix, options, fetchFunction) {
+    console.log('K8sClient', apiPrefix, fetchFunction);
+    this.options = { ...options };
+    this.apiPrefix = apiPrefix;
+    this.groupVersions = {};
+    if (fetchFunction) {
+      this.fetch = fetchFunction;
+    } else {
+      const fn = (...args) => fetch(...args);
+      this.fetch = fn;
+    }
+    this.fetchFn = console.log('K8sClient', this.apiPrefix, this.fetch);
+  }
+  setFetchFunction(fetchFunction) {
+    this.fetch = fetchFunction;
+  }
+  async apply(res) {
+    let path = await this.path(res);
+    path += '?fieldManager=kubectl&fieldValidation=Strict&force=false';
+    let o = {
+      ...this.options,
+      method: 'PATCH',
+      body: JSON.stringify(res),
+    };
+    o.headers = {
+      ...o.headers,
+      'content-type': 'application/apply-patch+yaml',
+    };
+    let response = await this.fetch(this.apiPrefix + path, o);
+    let txt = await response.text();
+    // console.log(txt)
+    if (response.status >= 300) {
+      console.log(res.kind, res.metadata.name, `error:${response.status}`, txt);
+    }
+    return response;
+  }
+
+  async path(r) {
+    let url = r.apiVersion === 'v1' ? '/api/v1' : `/apis/${r.apiVersion}`;
+    let api = this.groupVersions[r.apiVersion];
+    let resource = null;
+    if (api) {
+      resource = api.resources.find(res => res.kind == r.kind);
+    }
+    if (resource == null) {
+      api = await this.cacheAPI(r.apiVersion);
+      resource = api.resources.find(res => res.kind == r.kind);
+    }
+    if (resource) {
+      let ns = r.metadata.namespace || 'default';
+      let nsPath = resource.namespaced ? `/namespaces/${ns}` : '';
+      return url + nsPath + `/${resource.name}/${r.metadata.name}`;
+    }
+    return null;
+  }
+
+  async get(pathOrResource) {
+    console.log('GET', pathOrResource);
+    let path = pathOrResource;
+    if (typeof path !== 'string') {
+      path = await this.path(pathOrResource);
+    }
+    if (path == null) {
+      console.error('path not found for resource:', pathOrResource);
+      return Promise.resolve(undefined);
+    }
+    console.log('GET', this.apiPrefix + path);
+    console.log('fetch', this.fetch);
+    return this.fetch(this.apiPrefix + path, {
+      method: 'GET',
+      ...this.options,
+    })
+      .then(res => {
+        console.log('GET', path, res.status);
+        if (res.status == 200) {
+          return res.json();
+        }
+        return undefined;
+      })
+      .catch(e => {
+        console.error('GET', path, e);
+        return undefined;
+      });
+  }
+  async delete(pathOrResource) {
+    let path = pathOrResource;
+    if (typeof pathOrResource !== 'string') {
+      path = await this.path(pathOrResource);
+    }
+    return this.fetch(this.apiPrefix + path, {
+      method: 'DELETE',
+      ...this.options,
+    });
+  }
+  patch(path, body) {
+    this.fetch(this.apiPrefix + path, {
+      method: 'PATCH',
+      headers: { 'content-type': 'application/json-patch+json' },
+      body,
+      ...this.options,
+    });
+  }
+
+  async cacheAPI(apiVersion) {
+    let url = apiVersion === 'v1' ? '/api/v1' : `/apis/${apiVersion}`;
+    let res = await this.fetch(this.apiPrefix + url, {
+      method: 'GET',
+      ...this.options,
+    });
+    if (res.status == 200) {
+      let body = await res.json();
+      this.groupVersions[apiVersion] = body;
+      return body;
+    }
+    return { resources: [] };
+  }
+}
+export { K8sClient };
diff --git a/examples/buildless/kustomization.yaml b/examples/buildless/kustomization.yaml
@@ -0,0 +1,11 @@
+configMapGenerator:
+  - name: buildless
+    files:
+      - customHtml=ui.html
+      - customScript=dist/buildless.mjs
+      - general=general.yaml
+    options:
+      disableNameSuffixHash: true
+      labels:
+        busola.io/extension: 'resource'
+        busola.io/extension-version: '0.5'