dashboard-shell-shell 1.0.122 → 1.0.1000000082

package/plugins/internal-api/shell/shell.api.ts

@@ -0,0 +1,108 @@
+import { GrowlConfig } from '@shell/types/internal-api/shell/growl';
+import { ModalConfig } from '@shell/types/internal-api/shell/modal';
+import { SlideInConfig } from '@shell/types/internal-api/shell/slideIn';
+
+import { BaseApi } from '@shell/plugins/internal-api/shared/base-api';
+
+export default class ShellApi extends BaseApi {
+  static apiName() {
+    return 'shell';
+  }
+
+  /**
+   * Dispatches a growl notification.
+   *
+   * @param config - Configuration for the growl notification.
+   * - If `message` is a string, it is treated as the main content of the notification.
+   * - If `message` is a `DetailedMessage` object, `title` and `description` are extracted.
+   *
+   * Example:
+   * ```ts
+   * this.$shell.growl({ message: 'Operation successful!', type: 'success' });
+   * this.$shell.growl({ message: { title: 'Warning', description: 'Check your input.' }, type: 'warning' });
+   * ```
+   */
+  protected growl(config: GrowlConfig): void {
+    const { type = 'error', timeout = 5000 } = config;
+
+    let title = '';
+    let description = '';
+
+    if (typeof config.message === 'string') {
+      description = config.message;
+    } else {
+      title = config.message.title || '';
+      description = config.message.description;
+    }
+
+    this.$store.dispatch(
+      `growl/${ type }`,
+      {
+        title,
+        message: description,
+        timeout,
+      },
+      { root: true }
+    );
+  }
+
+  /**
+   * Opens a modal by committing to the Vuex store.
+   *
+   * This method updates the store's `modal` module to show a modal with the
+   * specified configuration. The modal is rendered using the `ModalManager` component,
+   * and its content is dynamically loaded based on the `component` field in the configuration.
+   *
+   * @param config A `ModalConfig` object defining the modal’s content and behavior.
+   *
+   * Example:
+   * ```ts
+   * this.$shell.modal({
+   *   component: MyCustomModal,
+   *   componentProps: { title: 'Hello Modal' },
+   *   resources: [someResource],
+   *   modalWidth: '800px',
+   *   closeOnClickOutside: false
+   * });
+   * ```
+   */
+  protected modal(config: ModalConfig): void {
+    this.$store.commit('modal/openModal', {
+      component:           config.component,
+      componentProps:      config.componentProps || {},
+      resources:           config.resources || [],
+      modalWidth:          config.modalWidth || '600px',
+      closeOnClickOutside: config.closeOnClickOutside ?? true,
+      // modalSticky:         config.modalSticky ?? false // Not implemented yet
+    });
+  }
+
+  /**
+   * Opens the slide-in panel with the specified component and props.
+   *
+   * This method commits the `open` mutation to the `slideInPanel` Vuex module,
+   * which sets the current component to be rendered and its associated props.
+   * The slide-in panel becomes visible after the mutation.
+   *
+   * @param config - The configuration object for the slide-in panel.
+   *
+   * Example Usage:
+   * ```ts
+   * import MyComponent from '@/components/MyComponent.vue';
+   *
+   * this.$shell.slideInPanel({
+   *   component: MyComponent,
+   *   componentProps: { foo: 'bar' }
+   * });
+   * ```
+   *
+   * @param config.component - A Vue component (imported SFC, functional component, etc.) to be rendered in the panel.
+   * @param config.componentProps - (Optional) Props to pass to the component. These should align with the component's defined props.
+   */
+  protected slideInPanel(config: SlideInConfig): void {
+    this.$store.commit('slideInPanel/open', {
+      component:      config.component,
+      componentProps: config.componentProps || {}
+    });
+  }
+}

package/promptRemove/management.cattle.io.fleetworkspace.vue

@@ -71,7 +71,7 @@ export default {
   <div class="mt-10">
     <div class="mb-10">
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-clean-html="resourceNames(names, t)"
+        v-clean-html="resourceNames(names, null, t)"
         class="description"
       />
     </div>

package/promptRemove/management.cattle.io.globalrole.vue

@@ -21,7 +21,7 @@ export default {
 
 <template>
   <div>
-    {{ t('promptRemove.attemptingToRemove', { type }) }} <span v-clean-html="resourceNames(names, t)" />
+    {{ t('promptRemove.attemptingToRemove', { type }) }} <span v-clean-html="resourceNames(names, null, t)" />
     <div
       v-if="info"
       class="text info mb-10 mt-20"

package/promptRemove/management.cattle.io.project.vue

@@ -94,7 +94,7 @@ export default {
         <template v-if="!canSeeProjectlessNamespaces">
           <span class="delete-warning"> {{ t('promptRemove.willDeleteAssociatedNamespaces') }}</span> <br>
           <div
-            v-clean-html="resourceNames(names, t)"
+            v-clean-html="resourceNames(names, null, t)"
             class="mt-10"
           />
         </template>
@@ -108,7 +108,7 @@ export default {
           :label="t('promptRemove.deleteAssociatedNamespaces')"
         />
         <div class="mt-10 ml-20">
-          <span v-clean-html="resourceNames(names, t)" />
+          <span v-clean-html="resourceNames(names, null, t)" />
         </div>
       </div>
     </div>

package/promptRemove/management.cattle.io.roletemplate.vue

@@ -22,7 +22,7 @@ export default {
 <template>
   <div>
     {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-      v-clean-html="resourceNames(names, t)"
+      v-clean-html="resourceNames(names, null, t)"
     />
     <div
       v-if="info"

package/promptRemove/pod.vue

@@ -98,7 +98,7 @@ export default {
   <div class="mt-10">
     <div class="mb-30">
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-clean-html="resourceNames(names, t)"
+        v-clean-html="resourceNames(names, null, t)"
         class="body"
       />
     </div>

package/public/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="shortcut icon" type="image/x-icon" href="/favicon.png">
-    <title>Rancher</title>
+    <title>HCI</title>
 </head>
 
 <body>
@@ -16,6 +16,7 @@
         </div>
     </div>
     <div id="modals"><!--Portal content here--></div>
+    <div id="slides"></div>
 
     <script>
         (() => {

package/rancher-components/BadgeState/BadgeState.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
 
 interface Badge {
   stateBackground: string;
@@ -47,12 +48,15 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapGetters({ t: 'i18n/t' }),
     bg(): string | null {
       return this.value?.stateBackground || this.color;
     },
 
     msg(): string | null {
-      return this.value?.stateDisplay || this.label;
+      let text = this.value?.stateDisplay || this.label;
+      let zhText = this.t(`stateLabel.${ text }`)
+      return zhText ? zhText : text
     }
   }
 });

package/rancher-components/Banner/Banner.vue

@@ -123,6 +123,10 @@ export default defineComponent({
 $left-border-size: 4px;
 $icon-size: 24px;
 
+.banner__content {
+  line-height: 18px !important;
+}
+
 .banner {
   display: flex;
   /* margin: 15px 0; */
@@ -173,6 +177,8 @@ $icon-size: 24px;
     border-left: solid $left-border-size transparent;
     display: flex;
     gap: 3px;
+    word-wrap:break-word; 
+    word-break:break-all; 
 
     .primary & {
       background: var(--primary);
@@ -190,8 +196,8 @@ $icon-size: 24px;
     }
 
     .info & {
-      /* background: var(--info-banner-bg); */
-      background: #f2f2f2;
+      background: var(--info-banner-bg);
+      // background: #f2f2f2;
       border-color: var(--info);
     }
 

package/rancher-components/Card/Card.vue

@@ -76,7 +76,7 @@ export default defineComponent({
 <template>
   <div
     id="focus-trap-card-container-element"
-    class="card-container"
+    class="card-containers"
     :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
     data-testid="card"
   >
@@ -117,17 +117,15 @@ export default defineComponent({
 </template>
 
 <style lang='scss'>
- .card-container {
+ .card-containers {
   &.highlight-border {
     border-left: 5px solid var(--primary);
   }
-  border-radius: var(--border-radius);
   display: flex;
   flex-basis: 40%;
-  /* margin: 10px; */
   min-height: 100px;
   padding: 24px;
-  box-shadow: 0 0 20px var(--shadow);
+  border: 1px solid var(--border);
   &:not(.top) {
     align-items: top;
     flex-direction: row;
@@ -143,7 +141,6 @@ export default defineComponent({
     justify-content: center;
    }
    & .card-actions {
-     /* align-self: end; */
      display: flex;
      justify-content: flex-end;
      padding-top: 20px;

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -301,6 +301,7 @@ export default defineComponent({
           <span
             v-else-if="label"
             :id="idForLabel"
+            :style="label == '记住用户名' ? { color: '#fff' } : ''"
           >{{ label }}</span>
           <i
             v-if="tooltipKey"
@@ -479,6 +480,9 @@ $fontColor: var(--input-label);
 
   // Disabled styles
   &.disabled {
+    span {
+      color: var(--muted);
+    }
     .checkbox-custom {
       background-color: var(--checkbox-disabled-bg);
       border-color: var(--checkbox-disabled-bg);

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -464,6 +464,7 @@ export default defineComponent({
       />
     </div>
   </div>
+  <slot name="suffixNew" />
 </div>
 </template>
 <style scoped lang="scss">
@@ -490,14 +491,16 @@ export default defineComponent({
 .label-input-all{
   display: flex;
   label{
-    width: 160px;
+    width: 160px !important;
     line-height: 32px;
     .required{
       color: red;
     }
   }
 }
-
+.span-4 {
+  width: none;
+}
 .v-popper--has-tooltip INPUT, .v-popper--has-tooltip INPUT:hover, .v-popper--has-tooltip INPUT:focus{
   padding: 0px 0px 0px 11px;
 }

package/rancher-components/Form/Radio/RadioButton.vue

@@ -248,7 +248,8 @@ $fontColor: var(--input-label);
   &.disabled,
   &.disabled .radio-label,
   &.disabled .radio-button-outer-container-description {
-    cursor: not-allowed
+    cursor: not-allowed;
+    color: var(--muted);
   }
 
   .radio-custom {
@@ -260,7 +261,7 @@ $fontColor: var(--input-label);
     border-radius: 50%;
     transition: all 0.3s ease-out;
     border: 1.5px solid var(--border);
-    margin-top: 4px;
+    margin-top: 3px !important;
 
     &:focus {
       outline: none;
@@ -305,7 +306,6 @@ $fontColor: var(--input-label);
       }
     }
   }
-
   input:disabled ~ .radio-custom:not([aria-checked="true"]) {
     background-color: var(--disabled-bg);
     opacity: .25;

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -108,7 +108,7 @@ export default defineComponent({
      * (unless the input is long)
      */
     style(): string {
-      return `height: ${ this.curHeight }px; overflow: ${ this.overflow };`;
+      return `height: ${ this.curHeight }px; overflow: ${ this.overflow };min-height:${ this.curHeight }px;`;
     },
 
     className(): string | unknown[] | Record<string, boolean> {
@@ -165,14 +165,10 @@ export default defineComponent({
         return;
       }
 
-      el.style.height = '1px';
-
       const border = parseInt(getComputedStyle(el).getPropertyValue('borderTopWidth'), 10) || 0 + parseInt(getComputedStyle(el).getPropertyValue('borderBottomWidth'), 10) || 0;
       const neu = Math.max(this.minHeight, Math.min(el.scrollHeight + border, this.maxHeight));
 
       el.style.overflowY = el.scrollHeight > neu ? 'auto' : 'hidden';
-      el.style.height = `${ neu }px`;
-
       this.curHeight = neu;
     }
   }

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -111,9 +111,6 @@ export default defineComponent({
         right: 5px;
         top: 10px;
         z-index: 3;
-        /* right: 30px;
-        top: $input-padding-lg;
-        z-index: z-index(hoverOverContent); */
      }
 
     @mixin tooltipColors($color) {
@@ -122,11 +119,19 @@ export default defineComponent({
         }
     }
 
+    &.null {
+
+        .status-icon {
+          top: 5px;
+          right: -20px;
+        }
+    }
+
     &.error {
         @include tooltipColors(var(--error));
 
         .status-icon {
-          top: 7px;
+          top: 9px !important;
           right: 5px;
         }
     }

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -101,8 +101,7 @@ const handleActivate = (e: KeyboardEvent) => {
     align-items: center;
     padding: 8px 10px;
     min-width: 145px;
-    /* margin: 0 9px; */
-    /* border-radius: 4px; */
+    border-radius: 4px;
 
     &:hover {
       cursor: pointer;

package/rancher-components/RcDropdown/RcDropdownMenu.vue

@@ -12,6 +12,7 @@ withDefaults(defineProps<RcDropdownMenuComponentProps>(), {
   buttonRole: 'primary',
   buttonSize: undefined,
   isDetail: false,
+  showIcon: false
 });
 
 const emit = defineEmits(['update:open', 'select']);
@@ -32,8 +33,10 @@ const hasOptions = (options: DropdownOption[]) => {
       :data-testid="dataTestid"
       :aria-label="buttonAriaLabel"
     >
-      <i style="font-style: normal;" v-if="buttonRole === 'link'">操作</i>
-      <i class="icon icon-actions" v-else/>
+    <div v-if="showIcon">
+      <i data-v-5db2c2c7="" class="icon icon-actions" alt="More actions icon"></i>
+    </div>
+    <a v-else href="javascript:;">操作</a>
     </rc-dropdown-trigger>
     <template #dropdownCollection>
       <template
@@ -63,7 +66,8 @@ const hasOptions = (options: DropdownOption[]) => {
         v-if="!hasOptions(options)"
         disabled
       >
-        No actions available
+        <!-- No actions available -->
+         暂无可执行的操作。
       </rc-dropdown-item>
     </template>
   </rc-dropdown>

package/rancher-components/RcDropdown/types.ts

@@ -46,4 +46,5 @@ export type RcDropdownMenuComponentProps = {
   buttonAriaLabel?: string;
   dropdownAriaLabel?: string;
   dataTestid?: string;
+  showIcon?: Boolean;
 }

package/scripts/extension/bundle

@@ -29,12 +29,32 @@ cp -R ${CHART_TEMPLATE}/* ${TMP}/container/
 # Copy the plugin assets
 mkdir -p ${TMP}/container/plugin
 
+# Copy Helm charts and plugin assets
 cp -R ${BASE_DIR}/assets/* ${TMP}/container/plugin
 cp ${BASE_DIR}/package.json ${TMP}/container/plugin
 cp ${BASE_DIR}/index.yaml ${TMP}/container/
 cp ${BASE_DIR}/index.yaml ${TMP}/container/plugin
 rm -f ${TMP}/container/plugin/report.html
 
+# Add extension .tgz files with proper naming
+echo -e "${CYAN}Copying extension archives...${RESET}"
+for pkg_dir in ${BASE_DIR}/extensions/*/; do
+  pkg=$(basename "${pkg_dir}")
+  echo -e "Processing package: ${pkg}"
+  
+  # Find all .tgz files in the package directory
+  for tgz_path in "${pkg_dir}"*.tgz; do
+    if [ -f "${tgz_path}" ]; then
+      # Extract version from filename
+      version=$(basename "${tgz_path}" .tgz)
+      compressed_package_name="${pkg}-${version}.tgz"
+      
+      echo "Copying ${tgz_path} to ${TMP}/container/plugin/${compressed_package_name}"
+      cp "${tgz_path}" "${TMP}/container/plugin/${compressed_package_name}"
+    fi
+  done
+done
+
 # Generate files.txt for each pkg and move pkg files into relative plugin directories
 for d in ${BASE_DIR}/dist-pkg/*; do
   pkg=$(basename $d)

package/scripts/extension/helm/charts/ui-plugin-server/templates/_helpers.tpl

@@ -38,7 +38,7 @@ Common labels
 helm.sh/chart: {{ include "extension-server.chart" . }}
 {{ include "extension-server.selectorLabels" . }}
 {{- if .Chart.AppVersion }}
-app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | replace "+" "_" | quote }}
 {{- end }}
 app.kubernetes.io/managed-by: {{ .Release.Service }}
 {{- end }}
@@ -60,4 +60,4 @@ Pkg annotations
 {{ $key }}: {{ $value | quote }}
 {{- end }}
 {{- end }}
-{{- end }}
+{{- end }}

package/scripts/extension/helm/charts/ui-plugin-server/templates/cr.yaml

@@ -8,7 +8,8 @@ spec:
   plugin:
     name: {{ include "extension-server.fullname" . }}
     version: {{ (semver (default .Chart.AppVersion .Values.plugin.versionOverride)).Original }}
-    endpoint: http://{{ include "extension-server.fullname" . }}.{{ .Release.Namespace }}.svc
+    endpoint: {{ .Values.plugin.endpoint | quote }}
+    compressedEndpoint: {{ .Values.plugin.compressedEndpoint | quote }}
     noCache: {{ .Values.plugin.noCache }}
     noAuth: {{ .Values.plugin.noAuth }}
     metadata: {{ include "extension-server.pluginMetadata" . | indent 6 }}

package/scripts/extension/helm/charts/ui-plugin-server/values.yaml

@@ -3,6 +3,8 @@ fullnameOverride: ""
 plugin:
   enabled: true
   versionOverride: ""
+  endpoint: ""
+  compressedEndpoint: ""
   noCache: false
   noAuth: false
   metadata: {}

package/scripts/extension/helmpatch

@@ -1,15 +1,9 @@
 #!/usr/bin/env node
 
-// Update Chart.yaml and values.yaml files
-
 const fs = require('fs');
 const path = require('path');
 const yaml = require('js-yaml');
 
-// TODO: Should already be in the template
-// const UI_PLUGIN_ANNOTATION_NAME = 'catalog.cattle.io/ui-component';
-// const UI_PLUGIN_ANNOTATION_VALUE = 'plugins';
-
 console.log('Helm file update');
 
 if (process.argv.length !== 4) {
@@ -17,12 +11,10 @@ if (process.argv.length !== 4) {
   process.exit(1);
 }
 
-const destFolder = process.argv[2];
+const chartFolder = process.argv[2];
 const pkgFilePath = process.argv[3];
 
 const pkgFile = JSON.parse(fs.readFileSync(pkgFilePath, 'utf8'));
-
-const chartFolder = destFolder;
 const chartFile = path.join(chartFolder, 'Chart.yaml');
 const valuesFile = path.join(chartFolder, 'values.yaml');
 
@@ -32,36 +24,57 @@ if (!fs.existsSync(chartFolder)) {
 }
 
 // --------------------------------------------------------------------------------
-// Chart.yaml
+// Chart.yaml updates (annotations)
 // --------------------------------------------------------------------------------
 const chart = yaml.load(fs.readFileSync(chartFile, 'utf8'));
-let updated = false;
-
-// Add in annotations to match any rules in the package file
-if (pkgFile.rancher && typeof pkgFile.rancher === 'object') {
-  // See if there are any annotations and merge them in, if there are
-  if (pkgFile.rancher.annotations) {
-    chart.annotations = chart.annotations || {};
-    Object.keys(pkgFile.rancher.annotations).forEach((key) => {
-      chart.annotations[key] = pkgFile.rancher.annotations[key];
-      updated = true;
-    });
-  }
+let chartUpdated = false;
+
+if (pkgFile.rancher?.annotations) {
+  chart.annotations = chart.annotations || {};
+  Object.entries(pkgFile.rancher.annotations).forEach(([key, value]) => {
+    if (chart.annotations[key] !== value) {
+      chart.annotations[key] = value;
+      chartUpdated = true;
+    }
+  });
 }
 
-if (updated) {
-  // Write out updated file
-  const str = yaml.dump(chart);
-
-  fs.writeFileSync(chartFile, str, 'utf8');
+if (chartUpdated) {
+  fs.writeFileSync(chartFile, yaml.dump(chart), 'utf8');
+  console.log('Updated Chart.yaml annotations');
 }
 
 // --------------------------------------------------------------------------------
-// values.yaml
+// values.yaml updates (endpoints)
 // --------------------------------------------------------------------------------
-
 const values = yaml.load(fs.readFileSync(valuesFile, 'utf8'));
 
-const valuesYaml = yaml.dump(values, { quotingType: '"' });
+// Get package metadata from package.json
+const pkgName = pkgFile.name;
+const pkgVersion = pkgFile.version;
+const pkgFullName = `${ pkgName }-${ pkgVersion }`;
+
+// Determine build type from environment
+const isGitHubBuild = process.env.GITHUB_BUILD === 'true';
+
+// Set endpoints based on build type
+if (isGitHubBuild) {
+  const githubSource = process.env.GITHUB_SOURCE;
+  const githubBranch = process.env.GITHUB_BRANCH;
+
+  values.plugin.endpoint = `https://raw.githubusercontent.com/${ githubSource }/${ githubBranch }/extensions/${ pkgName }/${ pkgVersion }`;
+} else {
+  const imagePrefix = process.env.IMAGE_PREFIX || '';
+  const baseExt = process.env.BASE_EXT;
+
+  values.plugin.endpoint = `http://${ imagePrefix }${ baseExt }-svc.cattle-ui-plugin-system:8080/plugin/${ pkgFullName }`;
+}
+
+// Always set compressedEndpoint as endpoint + .tgz
+values.plugin.compressedEndpoint = `${ values.plugin.endpoint }.tgz`;
 
-fs.writeFileSync(valuesFile, valuesYaml, 'utf8');
+// Write updated values.yaml
+fs.writeFileSync(valuesFile, yaml.dump(values, { quotingType: '"' }), 'utf8');
+console.log('Updated values.yaml endpoints:');
+console.log(`- endpoint: ${ values.plugin.endpoint }`);
+console.log(`- compressedEndpoint: ${ values.plugin.compressedEndpoint }`);