From 27140d781fa52a161b04ca0d10bea52e1f68810b Mon Sep 17 00:00:00 2001 From: inksnw Date: Mon, 15 Jul 2024 17:58:17 +0800 Subject: [PATCH] Support opening extensions in link mode --- pkg/extension/templatessimple/README_zh.md | 21 -- .../charts/base/templates/JSBundle.yaml | 2 +- .../templates/{cm.yaml => cm-iframe.yaml} | 8 +- .../charts/base/templates/cm-link.yaml | 301 ++++++++++++++++++ .../templatessimple/charts/base/values.yaml | 2 + pkg/extension/templatessimple/values.yaml | 8 +- 6 files changed, 315 insertions(+), 27 deletions(-) rename pkg/extension/templatessimple/charts/base/templates/{cm.yaml => cm-iframe.yaml} (99%) create mode 100644 pkg/extension/templatessimple/charts/base/templates/cm-link.yaml diff --git a/pkg/extension/templatessimple/README_zh.md b/pkg/extension/templatessimple/README_zh.md index c88c185..242aac5 100644 --- a/pkg/extension/templatessimple/README_zh.md +++ b/pkg/extension/templatessimple/README_zh.md @@ -9,27 +9,6 @@ helm upgrade --install ingress-nginx ingress-nginx \ --set controller.service.type=NodePort \ --set controller.service.nodePorts.http=30888 ``` -## 创建一个扩展 - -使用一个已制作好的chart包,或者生成一个示例的 - -```bash -helm create demo -helm package demo -Successfully packaged chart and saved it to: /Users/inksnw/Desktop/demo-0.1.0.tgz -``` - -创建扩展 - -```bash -# --from 添加上文中的chart包 -ksbuilder createsimple --from=./demo-0.1.0.tgz -``` - -## 验证 - -> demo为chart包的名字,即chart.yaml中的name字段 - ### 域名方式 安装后, 您可以访问以下示例地址验证 diff --git a/pkg/extension/templatessimple/charts/base/templates/JSBundle.yaml b/pkg/extension/templatessimple/charts/base/templates/JSBundle.yaml index ec28ff8..783c46a 100644 --- a/pkg/extension/templatessimple/charts/base/templates/JSBundle.yaml +++ b/pkg/extension/templatessimple/charts/base/templates/JSBundle.yaml @@ -6,7 +6,7 @@ spec: rawFrom: configMapKeyRef: key: index.js - name: [[ .Name ]]-cm + name: [[ .Name ]]-cm-{{ .Values.extEmbed }} namespace: extension-[[ .Name ]] status: link: /dist/[[ .Name ]]/index.js diff --git a/pkg/extension/templatessimple/charts/base/templates/cm.yaml b/pkg/extension/templatessimple/charts/base/templates/cm-iframe.yaml similarity index 99% rename from pkg/extension/templatessimple/charts/base/templates/cm.yaml rename to pkg/extension/templatessimple/charts/base/templates/cm-iframe.yaml index 1bde4f2..23558e6 100644 --- a/pkg/extension/templatessimple/charts/base/templates/cm.yaml +++ b/pkg/extension/templatessimple/charts/base/templates/cm-iframe.yaml @@ -1,7 +1,9 @@ +{{ if eq .Values.extEmbed "iframe" }} + apiVersion: v1 kind: ConfigMap metadata: - name: [[ .Name ]]-cm + name: [[ .Name ]]-cm-iframe namespace: extension-[[ .Name ]] data: index.js: |- @@ -367,4 +369,6 @@ data: }()) } } - })); \ No newline at end of file + })); + +{{ end }} \ No newline at end of file diff --git a/pkg/extension/templatessimple/charts/base/templates/cm-link.yaml b/pkg/extension/templatessimple/charts/base/templates/cm-link.yaml new file mode 100644 index 0000000..1822717 --- /dev/null +++ b/pkg/extension/templatessimple/charts/base/templates/cm-link.yaml @@ -0,0 +1,301 @@ +{{ if eq .Values.extEmbed "link" }} + +apiVersion: v1 +kind: ConfigMap +metadata: + name: [[ .Name ]]-cm-link + namespace: extension-[[ .Name ]] +data: + index.js: |- + System.register(["@kubed/components", "react", "react-router-dom"], (function (e, t) { + var r = {}, + n = {}, + o = {}; + return { + setters: [function (e) { + r.Loading = e.Loading + }, function (e) { + n.default = e.default, n.useEffect = e.useEffect + }, function (e) { + o.useNavigate = e.useNavigate + }], + execute: function () { + e(function () { + var e = { + 781: function (e, t, r) { + var n = { + "./base.json": 717 + }; + + function o(e) { + var t = i(e); + return r(t) + } + + function i(e) { + if (!r.o(n, e)) { + var t = new Error("Cannot find module '" + e + "'"); + throw t.code = "MODULE_NOT_FOUND", t + } + return n[e] + } + o.keys = function () { + return Object.keys(n) + }, o.resolve = i, e.exports = o, o.id = 781 + }, + 998: function (e, t, r) { + var n = { + "./base.json": 734 + }; + + function o(e) { + var t = i(e); + return r(t) + } + + function i(e) { + if (!r.o(n, e)) { + var t = new Error("Cannot find module '" + e + "'"); + throw t.code = "MODULE_NOT_FOUND", t + } + return n[e] + } + o.keys = function () { + return Object.keys(n) + }, o.resolve = i, e.exports = o, o.id = 998 + }, + 725: function (e, t, r) { + var n = r(825).y; + t.w = function (e) { + if (e || (e = 1), !r.y.meta || !r.y.meta.url) throw console + .error("__system_context__", r.y), Error( + "systemjs-webpack-interop was provided an unknown SystemJS context. Expected context.meta.url, but none was provided" + ); + r.p = n(r.y.meta.url, e) + } + }, + 825: function (e, t, r) { + function n(e, t) { + var r = document.createElement("a"); + r.href = e; + for (var n = "/" === r.pathname[0] ? r.pathname : "/" + r.pathname, + o = 0, i = n.length; o !== t && i >= 0;) { + "/" === n[--i] && o++ + } + if (o !== t) throw Error( + "systemjs-webpack-interop: rootDirectoryLevel (" + + t + + ") is greater than the number of directories (" + + o + ") in the URL path " + e); + var c = n.slice(0, i + 1); + return r.protocol + "//" + r.host + c + } + t.y = n; + var o = Number.isInteger || function (e) { + return "number" == typeof e && isFinite(e) && Math.floor( + e) === e + } + }, + 761: function (e) { + "use strict"; + e.exports = r + }, + 726: function (e) { + "use strict"; + e.exports = n + }, + 965: function (e) { + "use strict"; + e.exports = o + }, + 717: function (e) { + "use strict"; + e.exports = { + name: "Name" + } + }, + 734: function (e) { + "use strict"; + e.exports = { + name: "名称" + } + } + }, + i = {}; + + function c(t) { + var r = i[t]; + if (void 0 !== r) return r.exports; + var n = i[t] = { + exports: {} + }; + return e[t](n, n.exports, c), n.exports + } + c.y = t, c.g = function () { + if ("object" == typeof globalThis) return globalThis; + try { + return this || new Function("return this")() + } catch (e) { + if ("object" == typeof window) return window + } + }(), c.o = function (e, t) { + return Object.prototype.hasOwnProperty.call(e, t) + }, + function () { + var e; + c.g.importScripts && (e = c.g.location + ""); + var t = c.g.document; + if (!e && t && (t.currentScript && (e = t.currentScript.src), !e)) { + var r = t.getElementsByTagName("script"); + if (r.length) + for (var n = r.length - 1; n > -1 && (!e || !/^http(s?):/.test( + e));) e = r[n--].src + } + if (!e) throw new Error( + "Automatic publicPath is not supported in this browser"); + e = e.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/"), + c.p = e + }(); + return (0, c(725).w)(1), + function () { + "use strict"; + var e = c(726), + t = c(965), + r = c(761); + + function n() { + var n = (0, t.useNavigate)(); + return (0, e.useEffect)((function () { + window.open("http://[[ .Name ]].{{ .Values.domain }}:{{ .Values.ingressPort }}"), n( + -1, { + replace: !0 + }) + }), []), e.default.createElement(r.Loading, { + className: "page-loading" + }) + } + var o = [{ + path: "/[[ .Name ]]", + element: e.default.createElement(n, null) + }]; + + function i(e) { + return i = "function" == typeof Symbol && "symbol" == typeof Symbol + .iterator ? function (e) { + return typeof e + } : function (e) { + return e && "function" == typeof Symbol && e.constructor === + Symbol && e !== Symbol.prototype ? "symbol" : typeof e + }, i(e) + } + + function u(e) { + var t = function (e, t) { + if ("object" != i(e) || !e) return e; + var r = e[Symbol.toPrimitive]; + if (void 0 !== r) { + var n = r.call(e, t || "default"); + if ("object" != i(n)) return n; + throw new TypeError( + "@@toPrimitive must return a primitive value.") + } + return ("string" === t ? String : Number)(e) + }(e, "string"); + return "symbol" == i(t) ? t : t + "" + } + + function s(e, t, r) { + return (t = u(t)) in e ? Object.defineProperty(e, t, { + value: r, + enumerable: !0, + configurable: !0, + writable: !0 + }) : e[t] = r, e + } + + function a(e, t) { + var r = Object.keys(e); + if (Object.getOwnPropertySymbols) { + var n = Object.getOwnPropertySymbols(e); + t && (n = n.filter((function (t) { + return Object.getOwnPropertyDescriptor(e, t) + .enumerable + }))), r.push.apply(r, n) + } + return r + } + + function f(e) { + for (var t = 1; t < arguments.length; t++) { + var r = null != arguments[t] ? arguments[t] : {}; + t % 2 ? a(Object(r), !0).forEach((function (t) { + s(e, t, r[t]) + })) : Object.getOwnPropertyDescriptors ? Object.defineProperties( + e, Object.getOwnPropertyDescriptors(r)) : a(Object(r)).forEach( + (function (t) { + Object.defineProperty(e, t, Object.getOwnPropertyDescriptor( + r, t)) + })) + } + return e + } + for (var p = c(998), l = p.keys().filter((function (e) { + return "./index.ts" !== e + })), b = {}, y = 0; y < l.length; y += 1) l[y].startsWith(".") && ( + b = f(f({}, b), p(l[y]))); + var m = b; + + function v(e, t) { + var r = Object.keys(e); + if (Object.getOwnPropertySymbols) { + var n = Object.getOwnPropertySymbols(e); + t && (n = n.filter((function (t) { + return Object.getOwnPropertyDescriptor(e, t) + .enumerable + }))), r.push.apply(r, n) + } + return r + } + + function d(e) { + for (var t = 1; t < arguments.length; t++) { + var r = null != arguments[t] ? arguments[t] : {}; + t % 2 ? v(Object(r), !0).forEach((function (t) { + s(e, t, r[t]) + })) : Object.getOwnPropertyDescriptors ? Object.defineProperties( + e, Object.getOwnPropertyDescriptors(r)) : v(Object(r)).forEach( + (function (t) { + Object.defineProperty(e, t, Object.getOwnPropertyDescriptor( + r, t)) + })) + } + return e + } + for (var g = c(781), h = g.keys().filter((function (e) { + return "./index.ts" !== e + })), O = {}, w = 0; w < h.length; w += 1) h[w].startsWith(".") && ( + O = d(d({}, O), g(h[w]))); + var j = { + routes: o, + menus: [{ + parent: "{{ .Values.extParent }}", + name: "[[ .Name ]]", + title: "{{ .Values.extTitle }}", + icon: "cluster", + order: 0, + desc: "{{ .Values.extDesc }}", + skipAuth: !0 + }], + locales: { + zh: m, + en: O + } + }; + globals.context.registerExtension(j) + }(), {} + }()) + } + } + })); + +{{ end }} \ No newline at end of file diff --git a/pkg/extension/templatessimple/charts/base/values.yaml b/pkg/extension/templatessimple/charts/base/values.yaml index db03833..160dbdf 100644 --- a/pkg/extension/templatessimple/charts/base/values.yaml +++ b/pkg/extension/templatessimple/charts/base/values.yaml @@ -9,5 +9,7 @@ extParent: topbar extTitle: demo # 扩展包描述 extDesc: "this is a simple extension" +# 挂载方式 iframe,link +extEmbed: iframe # ingress controller 对外服务的Node端口 ingressPort: 30888 \ No newline at end of file diff --git a/pkg/extension/templatessimple/values.yaml b/pkg/extension/templatessimple/values.yaml index c063949..4ed23a4 100644 --- a/pkg/extension/templatessimple/values.yaml +++ b/pkg/extension/templatessimple/values.yaml @@ -1,14 +1,16 @@ + +# 这里的配置是默认模板, 有些不需要用户填写的可以删除掉, 这里值会覆盖charts目录中value.yaml的值 base: # 配置为ui的svc的名称与端口 extSvcName: demo extSvcPort: 80 - # 访问ks的域名, e.g. www.ks.com,192.168.50.208.nip.io + # 访问ks的域名, e.g. www.ks.com,192.168.50.208.nip.io, 如果使用域名需要保证能解析 domain: www.ks.com # 挂载位置 e.g. topbar,global,toolbox,access,cluster,workspace,project,platformSettings extParent: topbar # ui的超链接名称 extTitle: demo - # 扩展包描述 - extDesc: "this is a simple extension" + # 打开方式 iframe 为嵌入,link 为新标签页打开 + extEmbed: iframe # ingress controller 对外服务的Node端口 ingressPort: 30888