dashboard-shell-shell 3.0.5-test.2 → 3.0.5-test.21

package/components/form/InputWithSelect.vue

@@ -30,7 +30,7 @@ export default {
 
     selectLabel: {
       type:    String,
-      default: '',
+      default: ' ',
     },
 
     selectValue: {
@@ -164,11 +164,12 @@ export default {
       :v-bind="$attrs"
       @update:value="change"
     />
+    <div style="width: 100%;height: 24px;"></div>
     <LabeledInput
       v-if="textLabel || textRules.length > 0"
       ref="text"
       v-model:value="string"
-      class="input-string col span-8"
+      class="input-string span-8"
       :label="textLabel"
       :placeholder="placeholder"
       :disabled="disabled || textDisabled"
@@ -204,7 +205,7 @@ export default {
 
   &.select-after {
     height: 100%;
-    flex-direction: row-reverse;
+    // flex-direction: row-reverse;
 
     & .input-string {
       border-radius: var(--border-radius) 0 0 var(--border-radius);
@@ -270,19 +271,19 @@ export default {
     margin-right: 0;
 
     &:hover:not(.focused):not(.disabled):not(.view) {
-      border: 0px solid var(--input-hover-border) !important;
+      border: 1px solid var(--input-hover-border) !important;
     }
 
     &.focused {
-      border: 0px solid var(--outline) !important;
+      border: 1px solid var(--outline) !important;
     }
 
     &:hover:not(.focused):not(.disabled) {
-      border: 0px solid var(--input-hover-border) !important;
+      border: 1px solid var(--input-hover-border) !important;
     }
 
     &.focused {
-      border: 0px solid var(--outline) !important;
+      border: 1px solid var(--outline) !important;
     }
 
     &.labeled-select.focused :deep(),

package/components/form/KeyValue.vue

@@ -390,6 +390,17 @@ export default {
         });
       }
 
+      rows = rows.map((item) => {
+        if (item.key.includes('harvester')) {
+          item.key = item.key?.replace('harvester', 'cloud');
+        }
+        if (item.value.includes('harvester')) {
+          item.value = item.value?.replace('harvester', 'cloud');
+        }
+
+        return item;
+      });
+
       return rows;
     },
 
@@ -400,6 +411,8 @@ export default {
         [this.valueName]: value,
       };
 
+      obj.key = obj.key?.replace('harvester', 'cloud');
+      obj.value = obj.value?.replace('harvester', 'cloud');
       obj.binary = false;
       obj.canEncode = this.handleBase64;
       obj.supported = true;
@@ -481,8 +494,8 @@ export default {
           // let value = (row[valueName] || '');
           // const key = (row[keyName] || '').trim();
 
-          const key = (row[keyName] || '').trim();
-          let value = (row[valueName] || '').trim();
+          const key = (row[keyName]?.replace('cloud', 'harvester') || '').trim();
+          let value = (row[valueName]?.replace('cloud', 'harvester') || '').trim();
 
           if (value && typeOf(value) === 'object') {
             out[key] = JSON.parse(JSON.stringify(value));
@@ -1001,6 +1014,7 @@ export default {
   .remove {
     text-align: center;
     BUTTON {
+      min-width: auto;
       padding: 0px;
     }
   }
@@ -1040,4 +1054,8 @@ export default {
   border-collapse: separate;
   z-index: 0; // Prevent label from cover other elements outside of the input
 }
+
+h3{
+  font-size: 14px;
+}
 </style>

package/components/form/LabeledSelect.vue

@@ -326,6 +326,7 @@ export default {
 <template>
   <div style="display: flex;">
     <div
+      v-if="hasLabel"
       :class="{ 'labeled-container': true, raised, empty, [mode]: true, 'is-lable': isLabel }"
       :style="{ border: 'none', width: selectWidth===''?'160px':selectWidth,lineHeight: '32px' }"
     >
@@ -348,7 +349,7 @@ export default {
       ref="select"
       class="labeled-select"
       :class="[
-        $attrs.class,
+        $attrs.class && $attrs.class.replace('mb-20', ''),
         {
           disabled: isView || disabled,
           focused,
@@ -529,9 +530,11 @@ export default {
   // Prevent namespace field from wiggling or changing
   // height when it is toggled from a LabeledInput to a
   // LabeledSelect.
-  padding-bottom: 1px;
+  // padding-bottom: 1px;
   &:deep() .vs__actions:after {
-    padding-top: 10px;
+    // padding-top: 10px;
+    display: flex;
+    align-items: center;
   }
 
   &.no-label.compact-input {

package/components/form/Labels.vue

@@ -161,8 +161,8 @@ export default {
   <div :class="containerClass">
     <div :class="defaultSectionClass">
       <div class="labels">
-        <div class="labels__header">
-          <div v-if="showLabelTitle">
+        <div class="labels__header mb-20">
+          <div v-if="showLabelTitle" style="font-size: 14px;">
             <t k="labels.labels.title" />
           </div>
           <ToggleSwitch

package/components/form/MatchExpressions.vue

@@ -330,7 +330,7 @@ export default {
         :data-testid="`input-match-type-field-${index}`"
       >
         <div v-if="isView">
-          {{ row.matching }}
+          {{ row.matching.replace('harvester', 'cloud') }}
         </div>
         <LabeledSelect
           v-else
@@ -345,7 +345,7 @@ export default {
         :data-testid="`input-match-expression-key-${index}`"
       >
         <div v-if="isView" class="view-item-value">
-          {{ row.key }}
+          {{ row.key.replace('harvester', 'cloud') }}
         </div>
         <input
           v-else-if="!hasKeySelectOptions"
@@ -413,7 +413,7 @@ export default {
           v-if="!isView"
           type="button"
           class="btn role-link"
-          :style="{padding:'0px'}"
+          :style="{padding:'0px', minWidth: 'auto'}"
 
           :disabled="mode==='view'"
           :data-testid="`input-match-expression-remove-control-${index}`"
@@ -425,7 +425,6 @@ export default {
     </div>
     <div
       v-if="!isView && showAddButton"
-      class="mmt-4"
     >
       <button
         type="button"

package/components/form/Members/ClusterMembershipEditor.vue

@@ -56,6 +56,6 @@ export default {
     :type="NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING"
     :mode="mode"
     parent-key="clusterId"
-    :parent-id="parentId"
+    :parent-id="parentId"
   />
 </template>

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -161,11 +161,11 @@ export default {
           value:       'member'
         },
         ...customRoles,
-        {
-          label:       this.t('members.clusterPermissions.custom.label'),
-          description: this.t('members.clusterPermissions.custom.description'),
-          value:       'custom'
-        }
+        // {
+        //   label:       this.t('members.clusterPermissions.custom.label'),
+        //   description: this.t('members.clusterPermissions.custom.description'),
+        //   value:       'custom'
+        // }
       ];
     },
     principal() {

package/components/form/Members/MembershipEditor.vue

@@ -170,7 +170,7 @@ export default {
   >
     <template #column-headers>
       <div class="box mb-0">
-        <div class="column-headers row" style="width: 95%;">
+        <div class="column-headers row" style="width: calc(100% - 100px);">
           <div class="col span-6">
             <label class="text-label">{{ t('membershipEditor.user') }}</label>
           </div>
@@ -181,7 +181,7 @@ export default {
       </div>
     </template>
     <template #columns="{row, i}">
-      <div class="columns row">
+      <div style="width: 100%;" class="columns row">
         <div class="col span-6">
           <Principal
             :value="row.value.principalId"

package/components/form/NameNsDescription.vue

@@ -256,7 +256,7 @@ export default {
       const options = namespaces
         .map((namespace) => ({ nameDisplay: namespace, id: namespace }))
         .map(props.namespaceMapper || ((obj) => ({
-          label: obj.nameDisplay,
+          label: obj.nameDisplay.replace('harvester', 'cloud'),
           value: obj.id,
         })));
 

package/components/form/Networking.vue

@@ -160,7 +160,7 @@ export default {
   <div>
     <div>
       <h3>{{ t('workload.container.titles.networkSettings') }}</h3>
-      <div class="row mb-20">
+      <div class="row">
         <div class="col span-6">
           <LabeledSelect
             v-model:value="networkMode"
@@ -205,12 +205,11 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
 
-    <div>
+    <div class="mt-20">
       <h3>{{ t('workload.networking.dns') }}</h3>
       <div class="row">
-        <div class="col span-6">
+        <div class="span-6">
           <ArrayList
             key="dnsNameservers"
             v-model:value="nameservers"
@@ -222,7 +221,7 @@ export default {
             @update:value="update"
           />
         </div>
-        <div class="col span-6">
+        <div class="span-6">
           <ArrayList
             key="dnsSearches"
             v-model:value="searches"
@@ -236,9 +235,8 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
 
-    <div class="mt-20">
+    <div>
       <div class="row">
         <KeyValue
           v-model:value="options"
@@ -254,9 +252,8 @@ export default {
         />
       </div>
     </div>
-    <div class="spacer" />
 
-    <div class="row mt-20">
+    <div class="row mt-40">
       <div class="col span-12">
         <KeyValue
           key="hostAliases"

package/components/form/NodeAffinity.vue

@@ -210,33 +210,31 @@ export default {
         @remove="remove"
       >
         <template #default="props">
-          <div class="row">
-            <div class="col span-9">
-              <LabeledSelect
-                :options="affinityOptions"
-                :value="priorityDisplay(props.row.value)"
-                :label="t('workload.scheduling.affinity.priority')"
-                :mode="mode"
-                :data-testid="`node-affinity-priority-index${props.i}`"
-                @update:value="(changePriority(props.row.value))"
-              />
-            </div>
-            <div
-              v-if="'weight' in props.row.value"
-              class="col span-3"
-            >
-              <LabeledInput
-                v-model:value.number="props.row.value.weight"
-                :mode="mode"
-                type="number"
-                min="1"
-                max="100"
-                :label="t('workload.scheduling.affinity.weight.label')"
-                :placeholder="t('workload.scheduling.affinity.weight.placeholder')"
-                :data-testid="`node-affinity-weight-index${props.i}`"
-                @update:value="update"
-              />
-            </div>
+          <div class="col">
+            <LabeledSelect
+              :options="affinityOptions"
+              :value="priorityDisplay(props.row.value)"
+              :label="t('workload.scheduling.affinity.priority')"
+              :mode="mode"
+              :data-testid="`node-affinity-priority-index${props.i}`"
+              @update:value="(changePriority(props.row.value))"
+            />
+          </div>
+          <div
+            v-if="'weight' in props.row.value"
+            class="col"
+          >
+            <LabeledInput
+              v-model:value.number="props.row.value.weight"
+              :mode="mode"
+              type="number"
+              min="1"
+              max="100"
+              :label="t('workload.scheduling.affinity.weight.label')"
+              :placeholder="t('workload.scheduling.affinity.weight.placeholder')"
+              :data-testid="`node-affinity-weight-index${props.i}`"
+              @update:value="update"
+            />
           </div>
           <MatchExpressions
             :value="matchingSelectorDisplay ? props.row.value : props.row.value.matchExpressions"
@@ -254,5 +252,8 @@ export default {
   </div>
 </template>
 
-<style>
+<style lang="scss" scoped>
+.weight_input{
+  margin-left: 10px;
+}
 </style>

package/components/form/PodAffinity.vue

@@ -370,27 +370,25 @@ export default {
         @remove="remove"
       >
         <template #default="props">
-          <div class="row mt-20">
-            <div class="col span-6">
-              <LabeledSelect
-                :mode="mode"
-                :options="[t('workload.scheduling.affinity.affinityOption'),t('workload.scheduling.affinity.antiAffinityOption')]"
-                :value="props.row.value._anti ?t('workload.scheduling.affinity.antiAffinityOption') :t('workload.scheduling.affinity.affinityOption') "
-                :label="t('workload.scheduling.affinity.type')"
-                :data-testid="`pod-affinity-type-index${props.i}`"
-                @update:value="props.row.value._anti = !props.row.value._anti"
-              />
-            </div>
-            <div class="col span-6">
-              <LabeledSelect
-                :mode="mode"
-                :options="[t('workload.scheduling.affinity.preferred'),t('workload.scheduling.affinity.required')]"
-                :value="priorityDisplay(props.row.value)"
-                :label="t('workload.scheduling.affinity.priority')"
-                :data-testid="`pod-affinity-priority-index${props.i}`"
-                @update:value="changePriority(props.row.value, props.i)"
-              />
-            </div>
+          <div class="col">
+            <LabeledSelect
+              :mode="mode"
+              :options="[t('workload.scheduling.affinity.affinityOption'),t('workload.scheduling.affinity.antiAffinityOption')]"
+              :value="props.row.value._anti ?t('workload.scheduling.affinity.antiAffinityOption') :t('workload.scheduling.affinity.affinityOption') "
+              :label="t('workload.scheduling.affinity.type')"
+              :data-testid="`pod-affinity-type-index${props.i}`"
+              @update:value="props.row.value._anti = !props.row.value._anti"
+            />
+          </div>
+          <div class="col">
+            <LabeledSelect
+              :mode="mode"
+              :options="[t('workload.scheduling.affinity.preferred'),t('workload.scheduling.affinity.required')]"
+              :value="priorityDisplay(props.row.value)"
+              :label="t('workload.scheduling.affinity.priority')"
+              :data-testid="`pod-affinity-priority-index${props.i}`"
+              @update:value="changePriority(props.row.value, props.i)"
+            />
           </div>
           <div class="row mb-20">
             <RadioGroup
@@ -438,7 +436,7 @@ export default {
             @update:value="e=>updateLabelSelector(e, props)"
           />
           <div class="row mt-20">
-            <div class="col span-6">
+            <div class="col">
               <LabeledSelect
                 v-if="hasNodes"
                 v-model:value="props.row.value.topologyKey"
@@ -466,9 +464,11 @@ export default {
                 @update:value="update"
               />
             </div>
+          </div>
+          <div class="row">
             <div
               v-if="'weight' in props.row.value"
-              class="col span-6"
+              class="col"
             >
               <LabeledInput
                 v-model:value.number="props.row.value.weight"

package/components/form/Probe.vue

@@ -160,7 +160,7 @@ export default {
     <div class="row">
       <div
         data-testid="input-probe-kind"
-        class="col span-11-of-23"
+        class="span-9-of-23"
       >
         <LabeledSelect
           v-model:value="kind"
@@ -240,7 +240,7 @@ export default {
         </div>
       </div>
 
-      <div class="col span-1-of-13">
+      <div class="span-1-of-13">
         <hr
           v-if="kind && kind!=='none'"
           :style="{'position':'relative', 'margin':'0px'}"
@@ -252,12 +252,12 @@ export default {
       <!-- none -->
       <div
         v-if="!isNone"
-        class="col span-11-of-23"
+        class="span-11-of-23 ml-30"
       >
         <div class="row">
           <div
             data-testid="input-probe-periodSeconds"
-            class="col span-4"
+            class="col"
           >
             <UnitInput
               v-model:value="probe.periodSeconds"
@@ -269,9 +269,12 @@ export default {
               @update:value="update"
             />
           </div>
+        </div>
+        
+        <div class="row">
           <div
             data-testid="input-probe-initialDelaySeconds"
-            class="col span-4"
+            class="col"
           >
             <UnitInput
               v-model:value="probe.initialDelaySeconds"
@@ -283,9 +286,11 @@ export default {
               @update:value="update"
             />
           </div>
+        </div>
+        <div class="row">
           <div
             data-testid="input-probe-timeoutSeconds"
-            class="col span-4"
+            class="col"
           >
             <UnitInput
               v-model:value="probe.timeoutSeconds"
@@ -299,12 +304,10 @@ export default {
           </div>
         </div>
 
-        <div class="spacer-small" />
-
         <div class="row">
           <div
             data-testid="input-probe-successThreshold"
-            class="col span-6"
+            class="col"
           >
             <LabeledInput
               v-model:value.number="probe.successThreshold"
@@ -316,9 +319,11 @@ export default {
               @update:value="update"
             />
           </div>
+        </div>
+        <div class="row">
           <div
             data-testid="input-probe-failureThreshold"
-            class="col span-6"
+            class="col"
           >
             <LabeledInput
               v-model:value.number="probe.failureThreshold"
@@ -333,7 +338,6 @@ export default {
         </div>
 
         <template v-if="kind === 'HTTP' || kind === 'HTTPS'">
-          <div class="spacer-small" />
 
           <div class="row">
             <div class="col span-12">

package/components/form/ResourceQuota/Namespace.vue

@@ -72,13 +72,13 @@ export default {
 <template>
   <div>
     <div class="headers mb-10">
-      <div style="width: 400px;">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.resourceType') }}</label>
       </div>
-      <div style="width: 400px;">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.projectResourceAvailability') }}</label>
       </div>
-      <div style="width: 500px;">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.limit') }}</label>
       </div>
     </div>
@@ -101,7 +101,7 @@ export default {
 .headers {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: left;
     align-items: center;
     border-bottom: 1px solid var(--border);
     height: 30px;

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -175,13 +175,15 @@ export default {
     v-if="typeOption"
     class="rowNew"
   >
-    <Select
-      :mode="mode"
-      :value="type"
-      :disabled="true"
-      :options="types"
-    />
-    <div class="resource-availability">
+    <div style="width: 450px;">
+      <Select
+        :mode="mode"
+        :value="type"
+        :disabled="true"
+        :options="types"
+      />
+    </div>
+    <div style="width: 450px;" class="resource-availability">
       <PercentageBar
         v-clean-tooltip="tooltip"
         class="percentage-bar"
@@ -190,7 +192,7 @@ export default {
         :color-stops="{'100': '--primary'}"
       />
     </div>
-    <div style="width: 500px;">
+    <div style="width: 450px;">
       <UnitInput
         :value="value.limit[type]"
         :mode="mode"
@@ -212,7 +214,7 @@ export default {
   .rowNew {
     margin-bottom: 10px;
     display: flex;
-    justify-content: space-between;
+    justify-content: left;
 
     & > * {
       width: 400px;

package/components/form/ResourceQuota/Project.vue

@@ -57,14 +57,14 @@ export default {
 </script>
 <template>
   <div>
-    <div style="justify-content: right;" class="headers mb-10">
-      <div style="width: 400px;">
+    <div style="justify-content: left;" class="headers mb-10">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.resourceType') }}</label>
       </div>
-      <div style="width: 400px;">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.projectLimit') }}</label>
       </div>
-      <div style="width: 400px;">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.namespaceDefaultLimit') }}</label>
       </div>
     </div>