dashboard-shell-shell 3.0.5-test.5 → 3.0.5-test.6

package/components/ActionDropdown.vue

@@ -212,7 +212,6 @@ export default {
       border: 1px solid var(--dropdown-border);
       padding: 0px;
       text-align: left;
-      border-radius: 2px;
 
       LI {
         padding: 10px;
@@ -223,7 +222,7 @@ export default {
 
           > .divider-inner {
             padding: 0;
-            border-bottom: 0px solid var(--dropdown-divider);
+            border-bottom: 1px solid var(--dropdown-divider);
             width: 125%;
             margin: 0 auto;
           }

package/components/ActionMenu.vue

@@ -305,7 +305,7 @@ export default {
     color: var(--dropdown-text);
     background-color: var(--dropdown-bg);
     border: 1px solid var(--dropdown-border);
-    border-radius: 3px;
+    border-radius: 5px;
     box-shadow: 0 5px 20px var(--shadow);
 
     LI {
@@ -326,7 +326,7 @@ export default {
 
       &.divider {
         padding: 0;
-        border-bottom: 0px solid var(--dropdown-divider);
+        border-bottom: 1px solid var(--dropdown-divider);
       }
 
       &:not(.divider):hover {

package/components/ActionMenuShell.vue

@@ -18,7 +18,6 @@ type RcDropdownMenuComponentProps = {
   dataTestid?: string;
   resource: Object;
   customActions?: DropdownOption[];
-  showIcon: Boolean;
 }
 
 const props = defineProps <RcDropdownMenuComponentProps>();
@@ -102,6 +101,5 @@ const menuOptions = () => {
     :data-testid="dataTestid"
     @update:open="openChanged"
     @select="(e: MouseEvent, option: object) => execute(option, e)"
-    :showIcon="showIcon"
   />
 </template>

package/components/AppModal.vue

@@ -30,7 +30,7 @@ export default defineComponent({
      */
     width: {
       type:    [Number, String],
-      default: 610,
+      default: 600,
       validator(value) {
         if (typeof value === 'number') {
           return value > 0;
@@ -101,7 +101,7 @@ export default defineComponent({
         return `${ this.width }${ uom }`;
       }
 
-      return '610px';
+      return '600px';
     },
     stylesPropToObj(): object {
       return this.styles.split(';')
@@ -164,14 +164,6 @@ export default defineComponent({
         this.$emit('close');
       }
     },
-    close(event: MouseEvent) {
-      if (
-        this.$refs.modalRef
-      ) {
-        this.$emit('close');
-      }
-      // this.$emit('close');
-    },
     handleEscapeKey(event: KeyboardEvent) {
       if (this.clickToClose && event.key === 'Escape') {
         this.$emit('close');
@@ -214,20 +206,8 @@ export default defineComponent({
           aria-modal="true"
           @click.stop
         >
-        <div
-            class="close-dailog-icon"
-          >
-            <button
-              class="btn btn-sm role-link hide-bar"
-              @click="close"
-            >
-              <i class="icon icon-x" />
-            </button>
-          </div>
-        <div>
           <slot><!--Empty content--></slot>
         </div>
-        </div>
       </div>
     </transition>
   </teleport>
@@ -240,21 +220,18 @@ export default defineComponent({
     left: 0;
     width: 100vw;
     height: 100vh;
-    /* background-color: var(--overlay-bg); */
-    background-color: var(--overlay-model-bg);
+    background-color: var(--overlay-bg);
     display: flex;
     justify-content: center;
     align-items: center;
-    /* z-index: z-index('modalOverlay'); */
-    z-index: 50;
+    z-index: z-index('modalOverlay');
 
     .modal-container {
       background-color: var(--modal-bg);
       border-radius: var(--border-radius);
       max-height: 95vh;
       overflow: auto;
-      border: 0px;
-      position: relative;
+      border: 2px solid var(--modal-border);
     }
   }
 
@@ -267,22 +244,4 @@ export default defineComponent({
   .modal-fade-leave-to {
     opacity: 0;
   }
-  .hide-bar{
-    width: 32px;
-    min-width: 32px !important;
-  }
-  .close-dailog-icon{
-    position: absolute;
-    right: 13px;
-    top: 18px;
-    & > button{
-      color:var(--body-text) !important;
-      min-width: 32px !important;
-      width: 32px !important;
-      & > button:hover{
-        color:var(--body-text) !important;
-      }
-    }
-
-  }
 </style>

package/components/BrandImage.vue

@@ -131,6 +131,5 @@ export default {
   <img
     v-bind="$attrs"
     :src="pathToBrandedImage"
-    style="height: 50px;"
   >
 </template>

package/components/ButtonDropdown.vue

@@ -196,8 +196,7 @@ export default {
     @update:modelValue="$emit('click-action', $event)"
   >
     <template #no-options>
-      暂无数据
-      <!-- <slot name="no-options" /> -->
+      <slot name="no-options" />
     </template>
 
     <template #selected-option="option">
@@ -248,35 +247,16 @@ export default {
   }
 }
 .button-dropdown {
-  /* background: var(--accent-btn); */
-  background: var(--accent-btn-hover);
+  background: var(--accent-btn);
   border: solid 1px var(--link);
   color: var(--link);
   padding: 0;
 
-  &{
-    :deep() .vs__dropdown-toggle .vs__actions,
-    :deep() .vs__selected-options {
-      background: var(--accent-btn-hover);
-    }
-    :deep() .vs__selected-options .vs__selected button {
-      background-color: transparent;
-      color: var(--accent-btn-hover-text);
-    }
-    :deep() .vs__dropdown-toggle .vs__actions {
-      &:after {
-        color: var(--accent-btn-hover-text);
-        padding-top: 10px;
-      }
-    }
-  }
-
   &.vs--open :deep() {
     outline: none;
     box-shadow: none;
   }
 
-
   &:hover {
     :deep() .vs__dropdown-toggle .vs__actions,
     :deep() .vs__selected-options {
@@ -295,7 +275,6 @@ export default {
 
   :deep() > .vs__dropdown-toggle {
     width: 100%;
-    width: 100px;
     display: grid;
     grid-template-columns: 75% 25%;
     border: none;
@@ -304,7 +283,7 @@ export default {
     .vs__actions {
 
       &:after {
-        color: var(--accent-btn-hover-text);
+        color: var(--link);
         line-height: 1;
       }
     }
@@ -318,8 +297,7 @@ export default {
       button {
         border: none;
         background: transparent;
-        color: var(--accent-btn-hover-text);
-        min-width: 83px;
+        color: var(--link);
       }
     }
     .vs__search {

package/components/ButtonMultiAction.vue

@@ -30,7 +30,6 @@ const buttonClass = computed(() => {
       class="icon icon-actions"
       :alt="t('sortableTable.tableActionsImgAlt')"
     />
-    <!-- <i style="font-style: normal;">操作</i> -->
   </button>
 </template>
 

package/components/ClusterIconMenu.vue

@@ -159,7 +159,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--primary);
+    color: var(--default-active-text);
     font-weight: bold;
     background: var(--nav-icon-badge-bg);
     border: 1px solid var(--border);

package/components/CodeMirror.vue

@@ -5,7 +5,7 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 export default {
   name: 'CodeMirror',
 
-  emits: ['onReady', 'onInput', 'onChanges', 'onFocus'],
+  emits: ['onReady', 'onInput', 'onChanges', 'onFocus', 'validationChanged'],
 
   props: {
     /**
@@ -140,9 +140,9 @@ export default {
   },
 
   watch: {
-    // hasLintErrors(neu) {
-    //   this.$emit('validationChanged', !neu);
-    // },
+    hasLintErrors(neu) {
+      this.$emit('validationChanged', !neu);
+    },
 
     isCodeMirrorContainerFocused: {
       handler(neu) {
@@ -209,7 +209,7 @@ export default {
     },
 
     onReady(codeMirrorRef) {
-      // this.$emit('validationChanged', true);
+      this.$emit('validationChanged', true);
 
       this.$nextTick(() => {
         codeMirrorRef.refresh();
@@ -279,19 +279,6 @@ export default {
         id="code-mirror-el"
         ref="codeMirrorRef"
         :value="value"
-
-        :disabled="isDisabled"
-        :original-style="true"
-        @ready="onReady"
-        @input="onInput"
-        @changes="onChanges"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-      <!-- <Codemirror
-        id="code-mirror-el"
-        ref="codeMirrorRef"
-        :value="value"
         :options="combinedOptions"
         :disabled="isDisabled"
         :original-style="true"
@@ -300,7 +287,7 @@ export default {
         @changes="onChanges"
         @focus="onFocus"
         @blur="onBlur"
-      /> -->
+      />
       <span
         v-show="isCodeMirrorFocused"
         class="escape-text"
@@ -369,7 +356,6 @@ export default {
       }
 
       .CodeMirror-lines {
-        background-color: var(--input-bg);
         color: var(--input-text);
         padding: 0;
 

package/components/ConsumptionGauge.vue

@@ -59,11 +59,7 @@ export default {
     usedAsResourceName: {
       type:   Boolean,
       defaut: false
-    },
-    reserveText: {
-      type:   String,
-      defaut: '预留'
-    },
+    }
   },
   computed: {
     displayUnits() {
@@ -95,13 +91,13 @@ export default {
 </script>
 
 <template>
-  <!-- <div class="consumption-gauge">
+  <div class="consumption-gauge">
     <h3 v-if="resourceName && !usedAsResourceName">
       {{ resourceName }}
     </h3>
-    <div class="numbers"> -->
+    <div class="numbers">
       <!-- @slot Optional slot to use as the title rather than showing the resource name -->
-      <!-- <slot
+      <slot
         name="title"
         :amountTemplateValues="amountTemplateValues"
         :formattedPercentage="formattedPercentage"
@@ -122,22 +118,7 @@ export default {
         :color-stops="colorStops"
       />
     </div>
-  </div> -->
-  <div class="consumption-gauge">
-    <div
-      v-if="resourceName && !usedAsResourceName"
-      class="mb-20"
-    >
-      {{ resourceName }}
-    </div>
-    <slot
-      name="content"
-      :amountTemplateValues="amountTemplateValues"
-      :formattedPercentage="formattedPercentage"
-    >
-      <p>{{ formattedPercentage + '(共' + amountTemplateValues.total + ' ' + amountTemplateValues.unit + '，' + reserveText + ' ' + amountTemplateValues.used + ' ' + amountTemplateValues.unit + '）' }}</p>
-    </slot>
-    </div>
+  </div>
 </template>
 
 <style lang="scss">

package/components/CopyToClipboard.vue

@@ -42,18 +42,3 @@ export default {
     @click="clicked"
   />
 </template>
-
-<style lang="scss"scoped>
-button {
-  min-width: auto;
-}
-
-.bg-success{
-  background-color: var(--success-hover-text) !important;
-  color: #333 !important;
-}
-.bg-success:hover{
-  background-color: var(--success-hover-text) !important;
-  color: var(--primary) !important;
-}
-</style>

package/components/CruResource.vue

@@ -711,14 +711,14 @@ export default {
                   </template>
                 </template>
                 <div class="controls-steps">
-                  <!-- <button
+                  <button
                     v-if="showYaml"
                     type="button"
                     class="btn role-secondary"
                     @click="showPreviewYaml"
                   >
                     <t k="cruResource.previewYaml" />
-                  </button> -->
+                  </button>
                   <template
                     v-if="showPrevious"
                     name="back"
@@ -798,7 +798,7 @@ export default {
               #default
             >
               <div>
-                <!-- <button
+                <button
                   v-if="showYaml"
                   :data-testid="componentTestid + '-yaml'"
                   type="button"
@@ -806,7 +806,7 @@ export default {
                   @click="showPreviewYaml"
                 >
                   <t k="cruResource.previewYaml" />
-                </button> -->
+                </button>
                 <AsyncButton
                   v-if="!showSubtypeSelection"
                   ref="save"
@@ -822,7 +822,7 @@ export default {
       </template>
       <!------ YAML ------>
       <!-- Hide this section until it's needed. This means we don't need to upfront create initialYaml -->
-      <!-- <section
+      <section
         v-else-if="showYaml && !showAsForm"
         class="cru-resource-yaml-container resource-container cru__content"
       >
@@ -835,7 +835,7 @@ export default {
           :offer-preview="isEdit"
           :done-route="doneRoute"
           :done-override="resource.doneOverride"
-          :errors="errors"
+          :show-errors="false"
           :apply-hooks="applyHooks"
           class="resource-container cru__content"
           @error="e=>$emit('error', e)"
@@ -896,7 +896,7 @@ export default {
             </slot>
           </template>
         </ResourceYaml>
-      </section> -->
+      </section>
     </component>
   </section>
 </template>
@@ -910,6 +910,7 @@ export default {
   }
 }
 .create-resource-container {
+
   .resource-container {
     display: flex; // Ensures content grows in child CruResources
     flex-direction: column;
@@ -973,7 +974,6 @@ form.create-resource-container .cru {
   }
 }
 .cru {
-  height: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -982,7 +982,6 @@ form.create-resource-container .cru {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    height: 100%;
   }
 
   &__content {

package/components/CruResourceFooter.vue

@@ -115,12 +115,12 @@ export default {
 <style lang="scss">
 .cru-resource-footer {
   display: flex;
-  justify-content: flex-start;
+  justify-content: flex-end;
   margin-top: 20px;
   z-index: z-index('cruFooter');
 
   .btn {
-    margin-left: 10px;
+    margin-left: 20px;
   }
 }
 

package/components/DashboardOptions.vue

@@ -102,35 +102,26 @@ export default {
 
 <template>
   <div class="graph-options">
-    <div v-if="hasSummaryAndDetail" class="mr-10">
-      <ButtonGroup
-        v-model:value="value.type"
-        :options="detailSummaryOptions"
+    <div v-if="hasSummaryAndDetail">
+      <ButtonGroup
+        v-model:value="value.type"
+        :options="detailSummaryOptions"
       />
     </div>
     <div v-else>
       <div />
     </div>
     <div class="range-refresh">
-      <div class="mr-10">
-        <LabeledSelect
-          v-model:value="value.range"
-          :options="rangeOptions"
-          class="gafanana-select"
-          :selectWidth="'60px'"
-          :label="t('graphOptions.range')"
-        />
-      </div>
-      <div class="mr-10">
-        <LabeledSelect
-        v-model:value="value.refreshRate"
-        :options="refreshOptions"
-        class="gafanana-select"
-         :selectWidth="'60px'"
-        :label="t('graphOptions.refresh')"
+      <LabeledSelect
+        v-model:value="value.range"
+        :options="rangeOptions"
+        :label="t('graphOptions.range')"
+      />
+      <LabeledSelect
+        v-model:value="value.refreshRate"
+        :options="refreshOptions"
+        :label="t('graphOptions.refresh')"
       />
-      </div>
-      
     </div>
   </div>
 </template>
@@ -140,20 +131,17 @@ export default {
     &, .range-refresh {
       display: flex;
       flex-direction: row;
-      /* justify-content: flex-end; */
+      justify-content: flex-end;
     }
 
     & {
-      /* justify-content: space-between; */
+      justify-content: space-between;
       align-items: center;
     }
 
-    /* .labeled-select {
+    .labeled-select {
         width: 100px;
         margin-left: 10px;
-    } */
-}
-.gafanana-select{
-  width: 300px;
+    }
 }
 </style>

package/components/Drawer/Chrome.vue

@@ -35,7 +35,7 @@ const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close
         </div>
       </slot>
     </div>
-    <div class="body">
+    <div class="body pp-4">
       <slot name="body" />
     </div>
     <div class="footer pp-4">
@@ -93,7 +93,7 @@ const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close
     }
 
     .body {
-      background-color: var(--body-bg);
+      background-color: var(--drawer-body-bg);
       flex: 1;
       overflow-y: scroll;
     }

package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -16,37 +16,37 @@ const store = useStore();
 const i18n = useI18n(store);
 </script>
 <template>
-  <!-- <Tab
+  <Tab
     class="config-tab"
     name="config-tab"
     :label="i18n.t('component.drawer.resourceDetailDrawer.configTab.title')"
   >
-</Tab> -->
-<div class="container">
-  <component
-    :is="props.component"
-    :value="props.resource"
-    :liveValue="props.resource"
-    :resourceType="props.resourceType"
-    :mode="_VIEW"
-    :real-mode="_VIEW"
-    :initial-value="props.resource"
-    :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
-    as="config"
-  />
-</div>
+    <div class="container">
+      <component
+        :is="props.component"
+        :value="props.resource"
+        :liveValue="props.resource"
+        :resourceType="props.resourceType"
+        :mode="_VIEW"
+        :real-mode="_VIEW"
+        :initial-value="props.resource"
+        :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
+        as="config"
+      />
+    </div>
+  </Tab>
 </template>
 
 <style lang="scss" scoped>
-.container {
-  background-color: var(--body-bg);
-  border-radius: var(--border-radius-md);
-  padding: 16px;
-  max-width: 100%;
-  width: 100%;
-  position: relative;
-}
 .config-tab {
+  .container {
+    background-color: var(--body-bg);
+    border-radius: var(--border-radius-md);
+    padding: 16px;
+    max-width: 100%;
+    width: 100%;
+    position: relative;
+  }
 
   // Handle the loading indicator
   :deep() .overlay-content-mode {

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -85,10 +85,10 @@ const canEdit = computed(() => {
           v-if="configTabProps"
           v-bind="configTabProps"
         />
-        <!-- <YamlTab
+        <YamlTab
           v-if="yamlTabProps"
           v-bind="yamlTabProps"
-        /> -->
+        />
       </Tabbed>
     </template>
     <template #additional-actions>