@dao-style/biz 0.5.0 → 0.6.0

package/dist/styles/dialogs/switch-workspace-dialog/switch-workspace-dialog.css

@@ -46,6 +46,9 @@
 .dao-switch-workspace-dialog__ws-item-alias {
   max-width: calc(100% - 28px);
 }
+.dao-switch-workspace-dialog__ws-item:hover:not(.dao-switch-workspace-dialog__ws-item--selected) {
+  border: 1px solid var(--dao-gray-blue-030);
+}
 .dao-switch-workspace-dialog__cancel-btn {
   margin-right: 10px;
 }

package/dist/styles/workloads/container-image/select-image-dialog.css

@@ -1,3 +1,16 @@
 .private-not-allow-tip {
   margin-bottom: 20px;
+}
+
+.dao-select-image-dialog__table .dao-table__empty-block {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+.dao-select-image-dialog__table .dao-table-loading--range {
+  min-height: 230px;
+}
+.dao-select-image-dialog__table .search-image-empty .dao-state-icon__label {
+  margin-left: 4px;
 }

package/dist/utils/loadRemoteComponent.d.ts

@@ -4,4 +4,5 @@ export interface RemoteComponentConfig {
     scope: string;
     module: string;
 }
+export declare const remoteStylePrefixClass = "dao-remote-component__container";
 export default function loadRemoteComponent(config: RemoteComponentConfig): Promise<any>;

package/dist/utils/loadRemoteComponent.js

@@ -1,7 +1,54 @@
 "use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const extend = require("@dao-style/extend");
+const prefixSymbol = "Symbol(add-remote-style-prefix)";
+const remoteStylePrefixClass = "dao-remote-component__container";
+const observeStyleNodes = (entryContent) => {
+  const mutationObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((addedNode) => {
+        var _a;
+        const node = addedNode;
+        if ((node == null ? void 0 : node.tagName) !== "STYLE") {
+          return;
+        }
+        const dataQiankunHref = node.getAttribute("data-qiankun-href");
+        const hashCode = (_a = dataQiankunHref == null ? void 0 : dataQiankunHref.match(/\.([^.?#]+)\.css(?:[?#].*)?$/)) == null ? void 0 : _a[1];
+        if (hashCode && entryContent.includes(hashCode)) {
+          node.onload = () => {
+            var _a2;
+            if (node[prefixSymbol] || !node.textContent) {
+              return;
+            }
+            const cssFilePath = (_a2 = dataQiankunHref == null ? void 0 : dataQiankunHref.match(/css\/.*?\.css$/)) == null ? void 0 : _a2[0];
+            if (cssFilePath) {
+              node.setAttribute("data-href", cssFilePath);
+            }
+            node.textContent = node.textContent.replace(
+              /(\[data-qiankun=".*?"\])/g,
+              `$1 .${remoteStylePrefixClass}`
+            );
+            node[prefixSymbol] = true;
+            console.log("Add Remote Style Prefix Success");
+          };
+        }
+      });
+    });
+  });
+  const qiankunHead = document.querySelector("qiankun-head");
+  if (qiankunHead) {
+    mutationObserver.observe(qiankunHead, { childList: true });
+  }
+  return mutationObserver;
+};
 function loadScript(config) {
+  let mutationObserver;
+  vue.onBeforeUnmount(() => {
+    if (mutationObserver) {
+      mutationObserver.disconnect();
+    }
+  });
   return new Promise((resolve, reject) => {
     var _a;
     let { url } = config;
@@ -20,22 +67,39 @@ function loadScript(config) {
       }
       url = `${(_a = appInfo.value) == null ? void 0 : _a.uiAssetsUrl}remoteEntry.js`;
     }
-    const element = document.createElement("script");
-    element.src = url ?? "";
-    element.type = "text/javascript";
-    element.async = true;
+    if (!url) {
+      reject(new Error("Resolve Remote Entry Url Error"));
+      return;
+    }
     console.log(`Start Loading ${url}!`);
-    element.onload = () => {
-      console.log(`${url} Loaded Success!`);
-      document.head.removeChild(element);
-      resolve(true);
-    };
-    element.onerror = (error) => {
+    const element = document.createElement("script");
+    const fetch = window.originFetch || window.fetch;
+    fetch(url).then((res) => {
+      if (!res.ok) {
+        throw new Error(`HTTP error! status: ${res.status}`);
+      }
+      return res.text();
+    }).then((textContent) => {
+      try {
+        new Function(textContent);
+        element.type = "text/javascript";
+        element.textContent = textContent;
+        document.head.appendChild(element);
+        console.log(`${url} Loaded Success!`);
+        mutationObserver = observeStyleNodes(textContent);
+      } catch (e) {
+        if (e instanceof SyntaxError) {
+          throw new Error(`Script syntax error in ${url}: ${e.message}`);
+        }
+        throw new Error(e);
+      } finally {
+        document.head.removeChild(element);
+        resolve(true);
+      }
+    }).catch((e) => {
       console.error(`${url} Load Remote Entry Error!`);
-      document.head.removeChild(element);
-      reject(error);
-    };
-    document.head.appendChild(element);
+      reject(e);
+    });
   });
 }
 async function loadComponentByWebpack({ scope, module: module2 }) {
@@ -52,4 +116,5 @@ function loadRemoteComponent(config) {
     () => vue.defineAsyncComponent(async () => loadComponentByWebpack(config))
   );
 }
-module.exports = loadRemoteComponent;
+exports.default = loadRemoteComponent;
+exports.remoteStylePrefixClass = remoteStylePrefixClass;

package/dist/utils/loadRemoteComponent.mjs

@@ -1,6 +1,52 @@
-import { defineAsyncComponent, computed } from "vue";
+import { defineAsyncComponent, onBeforeUnmount, computed } from "vue";
 import { useGlobalStore } from "@dao-style/extend";
+const prefixSymbol = "Symbol(add-remote-style-prefix)";
+const remoteStylePrefixClass = "dao-remote-component__container";
+const observeStyleNodes = (entryContent) => {
+  const mutationObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((addedNode) => {
+        var _a;
+        const node = addedNode;
+        if ((node == null ? void 0 : node.tagName) !== "STYLE") {
+          return;
+        }
+        const dataQiankunHref = node.getAttribute("data-qiankun-href");
+        const hashCode = (_a = dataQiankunHref == null ? void 0 : dataQiankunHref.match(/\.([^.?#]+)\.css(?:[?#].*)?$/)) == null ? void 0 : _a[1];
+        if (hashCode && entryContent.includes(hashCode)) {
+          node.onload = () => {
+            var _a2;
+            if (node[prefixSymbol] || !node.textContent) {
+              return;
+            }
+            const cssFilePath = (_a2 = dataQiankunHref == null ? void 0 : dataQiankunHref.match(/css\/.*?\.css$/)) == null ? void 0 : _a2[0];
+            if (cssFilePath) {
+              node.setAttribute("data-href", cssFilePath);
+            }
+            node.textContent = node.textContent.replace(
+              /(\[data-qiankun=".*?"\])/g,
+              `$1 .${remoteStylePrefixClass}`
+            );
+            node[prefixSymbol] = true;
+            console.log("Add Remote Style Prefix Success");
+          };
+        }
+      });
+    });
+  });
+  const qiankunHead = document.querySelector("qiankun-head");
+  if (qiankunHead) {
+    mutationObserver.observe(qiankunHead, { childList: true });
+  }
+  return mutationObserver;
+};
 function loadScript(config) {
+  let mutationObserver;
+  onBeforeUnmount(() => {
+    if (mutationObserver) {
+      mutationObserver.disconnect();
+    }
+  });
   return new Promise((resolve, reject) => {
     var _a;
     let { url } = config;
@@ -19,22 +65,39 @@ function loadScript(config) {
       }
       url = `${(_a = appInfo.value) == null ? void 0 : _a.uiAssetsUrl}remoteEntry.js`;
     }
-    const element = document.createElement("script");
-    element.src = url ?? "";
-    element.type = "text/javascript";
-    element.async = true;
+    if (!url) {
+      reject(new Error("Resolve Remote Entry Url Error"));
+      return;
+    }
     console.log(`Start Loading ${url}!`);
-    element.onload = () => {
-      console.log(`${url} Loaded Success!`);
-      document.head.removeChild(element);
-      resolve(true);
-    };
-    element.onerror = (error) => {
+    const element = document.createElement("script");
+    const fetch = window.originFetch || window.fetch;
+    fetch(url).then((res) => {
+      if (!res.ok) {
+        throw new Error(`HTTP error! status: ${res.status}`);
+      }
+      return res.text();
+    }).then((textContent) => {
+      try {
+        new Function(textContent);
+        element.type = "text/javascript";
+        element.textContent = textContent;
+        document.head.appendChild(element);
+        console.log(`${url} Loaded Success!`);
+        mutationObserver = observeStyleNodes(textContent);
+      } catch (e) {
+        if (e instanceof SyntaxError) {
+          throw new Error(`Script syntax error in ${url}: ${e.message}`);
+        }
+        throw new Error(e);
+      } finally {
+        document.head.removeChild(element);
+        resolve(true);
+      }
+    }).catch((e) => {
       console.error(`${url} Load Remote Entry Error!`);
-      document.head.removeChild(element);
-      reject(error);
-    };
-    document.head.appendChild(element);
+      reject(e);
+    });
   });
 }
 async function loadComponentByWebpack({ scope, module }) {
@@ -52,5 +115,6 @@ function loadRemoteComponent(config) {
   );
 }
 export {
-  loadRemoteComponent as default
+  loadRemoteComponent as default,
+  remoteStylePrefixClass
 };

package/dist/utils/useSubForm.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const veeValidate = require("vee-validate");
 const vue = require("vue");
 const lodashEs = require("lodash-es");
-const index = require("../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.js");
+const index = require("../node_modules/@vueuse/shared/index.js");
 const EXTRA_KEY_IN_FORM = "EXTRA_KEY_IN_FORM";
 function useSubForm(name) {
   let isInit = true;

package/dist/utils/useSubForm.mjs

@@ -1,7 +1,7 @@
 import { FormContextKey, useField, useForm } from "vee-validate";
 import { inject, nextTick } from "vue";
 import { debounce, cloneDeep } from "lodash-es";
-import { pausableWatch as watchPausable } from "../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.mjs";
+import { pausableWatch as watchPausable } from "../node_modules/@vueuse/shared/index.mjs";
 const EXTRA_KEY_IN_FORM = "EXTRA_KEY_IN_FORM";
 function useSubForm(name) {
   let isInit = true;

package/dist/workloads/container-custom-resource/src/ContainerCustomResource.vue2.js

@@ -7,7 +7,7 @@ require("@dao-style/extend/dist/es/components/multi-row-editor/style/multi-row-e
 const lodashEs = require("lodash-es");
 const useSubForm = require("../../../utils/useSubForm.js");
 const props = require("../props.js");
-const index = require("../../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.js");
+const index = require("../../../node_modules/@vueuse/shared/index.js");
 const _sfc_main = vue.defineComponent({
   name: "DaoContainerCustomResource",
   components: {

package/dist/workloads/container-custom-resource/src/ContainerCustomResource.vue2.mjs

@@ -6,7 +6,7 @@ import "@dao-style/extend/dist/es/components/multi-row-editor/style/multi-row-ed
 import { isEqual } from "lodash-es";
 import { EXTRA_KEY_IN_FORM } from "../../../utils/useSubForm.mjs";
 import { containerCustomResourceProps, containerCustomResourceEmits } from "../props.mjs";
-import { pausableWatch as watchPausable } from "../../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.mjs";
+import { pausableWatch as watchPausable } from "../../../node_modules/@vueuse/shared/index.mjs";
 const _sfc_main = defineComponent({
   name: "DaoContainerCustomResource",
   components: {

package/dist/workloads/container-image/props.d.ts

@@ -111,6 +111,10 @@ export declare const selectImageDialogProps: {
     };
 };
 export type SelectImageDialogProps = ExtractPropTypes<typeof selectImageDialogProps>;
+export type FetchParsedImageInfo = (image: string) => Promise<{
+    info?: ImageInfo;
+    origin?: string;
+}>;
 export declare const containerImageProps: {
     fields: {
         type: PropType<Partial<Record<ImageFieldKey, string>>>;
@@ -167,6 +171,10 @@ export declare const containerImageProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    parsedImage: {
+        type: PropType<FetchParsedImageInfo>;
+        default: undefined;
+    };
     selectImage: {
         type: PropType<SelectImage>;
         required: boolean;

package/dist/workloads/container-image/props.js

@@ -96,6 +96,10 @@ const containerImageProps = {
   readonly: {
     type: Boolean,
     default: false
+  },
+  parsedImage: {
+    type: Function,
+    default: void 0
   }
 };
 exports.containerImageProps = containerImageProps;

package/dist/workloads/container-image/props.mjs

@@ -94,6 +94,10 @@ const containerImageProps = {
   readonly: {
     type: Boolean,
     default: false
+  },
+  parsedImage: {
+    type: Function,
+    default: void 0
   }
 };
 export {

package/dist/workloads/container-image/src/ContainerImage.vue.d.ts

@@ -56,6 +56,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    parsedImage: {
+        type: import("vue").PropType<import("../props").FetchParsedImageInfo>;
+        default: undefined;
+    };
     selectImage: {
         type: import("vue").PropType<import("../props").SelectImage>;
         required: boolean;
@@ -245,6 +249,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    parsedImage: {
+        type: import("vue").PropType<import("../props").FetchParsedImageInfo>;
+        default: undefined;
+    };
     selectImage: {
         type: import("vue").PropType<import("../props").SelectImage>;
         required: boolean;
@@ -319,5 +327,6 @@ declare const _default: import("vue").DefineComponent<{
     enableSecretSelectSingle: boolean;
     hideImagePullPolicy: boolean;
     hideSecretSelect: boolean;
+    parsedImage: import("../props").FetchParsedImageInfo;
 }>;
 export default _default;

package/dist/workloads/container-image/src/ContainerImage.vue2.js

@@ -11,7 +11,9 @@ const props = require("../props.js");
 require("../../../styles/common.scss.js");
 require("../style/container-image.scss.js");
 require("../style/select-image-dialog.scss.js");
+const index$1 = require("../../../node_modules/@vueuse/shared/index.js");
 const index = require("../../../uses/useLazyLoadList/index.js");
+const abortableFetchWrapper = require("../../../utils/abortableFetchWrapper.js");
 const _sfc_main = vue.defineComponent({
   name: "ContainerImage",
   components: {
@@ -45,6 +47,14 @@ const _sfc_main = vue.defineComponent({
     }, props$1.version || {}));
     const selectImageText = vue.computed(() => t("biz.workloads.ContainerImage.selectImage"));
     const currentImageInfo = vue.ref();
+    const currentFullImage = vue.computed(() => {
+      const { image, tag } = currentImageInfo.value ?? {};
+      if (!tag) {
+        return image;
+      }
+      const sep = tag.startsWith("sha256:") ? "@" : ":";
+      return `${image}${sep}${tag}`;
+    });
     const setTag = (tag) => {
       if (!currentImageInfo.value) {
         return;
@@ -54,6 +64,11 @@ const _sfc_main = vue.defineComponent({
         tag
       };
     };
+    const imageInfoCompareKeys = ["image", "registry", "project", "repository", "isPublic"];
+    const isSameImageInfo = (imageInfo, target) => lodashEs.isEqual(
+      imageInfo ? lodashEs.pick(imageInfo, imageInfoCompareKeys) : void 0,
+      target
+    );
     const lazyLoadTag = index.useLazyLoadList(props$1.version.fetchList, {
       image: currentImage.value,
       registry: (_a = currentImageInfo.value) == null ? void 0 : _a.registry,
@@ -66,6 +81,7 @@ const _sfc_main = vue.defineComponent({
       searchKey: "fuzzyName"
     });
     const fetchVersionList = async () => {
+      var _a2;
       if (!currentImageInfo.value) {
         return;
       }
@@ -76,6 +92,13 @@ const _sfc_main = vue.defineComponent({
         repository,
         isPublic
       } = currentImageInfo.value;
+      const requestImageInfo = {
+        image,
+        registry,
+        project,
+        repository,
+        isPublic
+      };
       try {
         lazyLoadTag.filterData.image = image;
         lazyLoadTag.filterData.registry = registry;
@@ -83,10 +106,16 @@ const _sfc_main = vue.defineComponent({
         lazyLoadTag.filterData.public = isPublic;
         lazyLoadTag.filterData.repository = encodeURIComponent(encodeURIComponent(repository));
         await lazyLoadTag.resetFetchList();
-        if (!currentImageInfo.value.tag && lazyLoadTag.list.value.length) {
+        if (!isSameImageInfo(currentImageInfo.value, requestImageInfo)) {
+          return;
+        }
+        if (!((_a2 = currentImageInfo.value) == null ? void 0 : _a2.tag) && lazyLoadTag.list.value.length) {
           setTag(lazyLoadTag.list.value[0]);
         }
       } catch (e) {
+        if (abortableFetchWrapper.isManualAbort(e) || !isSameImageInfo(currentImageInfo.value, requestImageInfo)) {
+          return;
+        }
         console.error("tag fetched error: ", e);
         if (currentImageInfo.value) {
           setTag();
@@ -95,34 +124,32 @@ const _sfc_main = vue.defineComponent({
     };
     const selectImageDialog = extend.createDialog(SelectImageDialog);
     const onSelectImage = async () => {
-      const imageInfo = await selectImageDialog.show({
+      const selectedImageInfo = await selectImageDialog.show({
         selectImage: props$1.selectImage,
         project: props$1.project,
         registry: props$1.registry,
         imageInfo: currentImageInfo.value
       });
-      if (lodashEs.isEqual(imageInfo, lodashEs.omit(currentImageInfo.value, "tag"))) {
+      if (lodashEs.isEqual(selectedImageInfo, lodashEs.omit(currentImageInfo.value, "tag"))) {
         return;
       }
-      currentImageInfo.value = imageInfo;
-      currentImage.value = imageInfo.image;
-    };
-    const handleImageInput = (val) => {
-      if (props$1.enableImageSelect) {
-        currentImageInfo.value = void 0;
-      }
-      formContext == null ? void 0 : formContext.setFieldValue(actualFields.value.image ?? "", val);
+      currentImageInfo.value = selectedImageInfo;
+      currentImage.value = selectedImageInfo.image;
+      await fetchVersionList();
     };
     const initData = () => {
-      if (!props$1.enableImageSelect) {
-        return;
-      }
-      if (!props$1.imageInfo) {
+      if (!props$1.enableImageSelect || !props$1.imageInfo) {
         return;
       }
+      const alreadyCurrent = lodashEs.isEqual(
+        lodashEs.omit(currentImageInfo.value, "tag"),
+        lodashEs.omit(props$1.imageInfo, "tag")
+      );
       currentImageInfo.value = props$1.imageInfo;
       currentImage.value = props$1.imageInfo.image;
-      fetchVersionList();
+      if (!alreadyCurrent) {
+        fetchVersionList();
+      }
     };
     const handleVersionChange = (value) => {
       if (!currentImageInfo.value) {
@@ -137,12 +164,10 @@ const _sfc_main = vue.defineComponent({
       if (!currentImageInfo.value) {
         return;
       }
-      const fullImage = currentImageInfo.value.tag ? `${currentImageInfo.value.image}:${currentImageInfo.value.tag}` : currentImageInfo.value.image;
-      formContext == null ? void 0 : formContext.setFieldValue(actualFields.value.image ?? "", fullImage);
+      formContext == null ? void 0 : formContext.setFieldValue(actualFields.value.image ?? "", currentFullImage.value);
     }, {
       deep: true
     });
-    const formImageValue = vue.computed(() => lodashEs.get(formContext == null ? void 0 : formContext.values, actualFields.value.image ?? ""));
     vue.watch(
       [() => props$1.enableImageSelect, () => props$1.imageInfo],
       ([newEnable, newImage], [, oldImage]) => {
@@ -154,18 +179,79 @@ const _sfc_main = vue.defineComponent({
         immediate: true
       }
     );
-    vue.watch(formImageValue, (val) => {
-      if (val === currentImage.value) {
+    const abortableParsedImage = props$1.parsedImage ? abortableFetchWrapper.abortableWrapper(props$1.parsedImage, {
+      autoAbortWhenNewRequest: true
+    }) : void 0;
+    const formImageValue = vue.computed(() => lodashEs.get(formContext == null ? void 0 : formContext.values, actualFields.value.image ?? ""));
+    const setParsedImage = async (newImage) => {
+      var _a2;
+      if (!abortableParsedImage) {
         return;
       }
-      if (currentImageInfo.value) {
-        const fullImage = currentImageInfo.value.tag ? `${currentImageInfo.value.image}:${currentImageInfo.value.tag}` : currentImageInfo.value.image;
-        if (val === fullImage) {
+      const snapshot = newImage;
+      try {
+        const rst = await abortableParsedImage(snapshot);
+        if (formImageValue.value !== snapshot) {
           return;
         }
+        if ((_a2 = rst.info) == null ? void 0 : _a2.registry) {
+          currentImageInfo.value = rst.info;
+          currentImage.value = rst.info.image;
+          await fetchVersionList();
+        } else {
+          currentImageInfo.value = void 0;
+          currentImage.value = snapshot;
+        }
+      } catch (e) {
+        if (formImageValue.value !== snapshot) {
+          return;
+        }
+        if (abortableFetchWrapper.isManualAbort(e)) {
+          return;
+        }
+        currentImage.value = snapshot;
+        currentImageInfo.value = void 0;
       }
-      currentImage.value = val;
-      currentImageInfo.value = void 0;
+    };
+    const tagPattern = /[:@][^/]*$/;
+    const handleImageInput = (val) => {
+      var _a2;
+      if (currentImage.value === val) {
+        return;
+      }
+      formContext == null ? void 0 : formContext.setFieldValue(actualFields.value.image ?? "", val);
+      if (!val || tagPattern.test(val)) {
+        (_a2 = abortableParsedImage == null ? void 0 : abortableParsedImage.abort) == null ? void 0 : _a2.call(abortableParsedImage);
+        currentImage.value = val;
+        currentImageInfo.value = void 0;
+      }
+    };
+    const shaTagPattern = /@sha256:/;
+    vue.onMounted(() => {
+      if (formImageValue.value && !shaTagPattern.test(formImageValue.value)) {
+        setParsedImage(formImageValue.value);
+      }
+    });
+    const debouncedHandleImageValue = index$1.useDebounceFn((val) => {
+      var _a2;
+      if (!val) {
+        (_a2 = abortableParsedImage == null ? void 0 : abortableParsedImage.abort) == null ? void 0 : _a2.call(abortableParsedImage);
+        currentImage.value = val;
+        currentImageInfo.value = void 0;
+        return;
+      }
+      if (val === currentImage.value || currentImageInfo.value && val === currentFullImage.value) {
+        return;
+      }
+      if (abortableParsedImage) {
+        setParsedImage(val);
+      } else {
+        currentImage.value = val;
+        currentImageInfo.value = void 0;
+      }
+    }, 300);
+    vue.watch(formImageValue, (val) => {
+      debouncedHandleImageValue(val);
     });
     return {
       actualSecret,