dashboard-shell-shell 3.0.5-test.3 → 3.0.5-test.30

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>

package/components/form/ResourceQuota/ProjectRow.vue

@@ -72,41 +72,47 @@ export default {
     v-if="typeOption"
     class="rowNew"
   >
-    <Select
-      :value="type"
-      :mode="mode"
-      :options="types"
-      data-testid="projectrow-type-input"
-      @update:value="updateType($event)"
-    />
-    <UnitInput
-      :value="resourceQuotaLimit[type]"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-project-quota-input"
-      @update:value="updateQuotaLimit('resourceQuota', type, $event)"
-    />
-    <UnitInput
-      :value="namespaceDefaultResourceQuotaLimit[type]"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-namespace-quota-input"
-      @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
-    />
+    <div style="width: 450px;">
+      <Select
+        :value="type"
+        :mode="mode"
+        :options="types"
+        data-testid="projectrow-type-input"
+        @update:value="updateType($event)"
+      />
+    </div>
+    <div style="width: 450px;">
+      <UnitInput
+        :value="resourceQuotaLimit[type]"
+        :mode="mode"
+        :placeholder="typeOption.placeholder"
+        :increment="typeOption.increment"
+        :input-exponent="typeOption.inputExponent"
+        :base-unit="typeOption.baseUnit"
+        :output-modifier="true"
+        data-testid="projectrow-project-quota-input"
+        @update:value="updateQuotaLimit('resourceQuota', type, $event)"
+      />
+    </div>
+    <div style="width: 450px;">
+      <UnitInput
+        :value="namespaceDefaultResourceQuotaLimit[type]"
+        :mode="mode"
+        :placeholder="typeOption.placeholder"
+        :increment="typeOption.increment"
+        :input-exponent="typeOption.inputExponent"
+        :base-unit="typeOption.baseUnit"
+        :output-modifier="true"
+        data-testid="projectrow-namespace-quota-input"
+        @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
+      />
+    </div>
   </div>
 </template>
 
 <style lang='scss' scoped>
   .rowNew {
     display: flex;
-    justify-content: space-between;
+    justify-content: left;
   }
 </style>

package/components/form/ResourceSelector.vue

@@ -125,7 +125,7 @@ export default {
       </div>
     </div>
     <div class="row">
-      <div class="col span-12">
+      <div class="span-12">
         <Banner :color="(matchingResources.none ? 'warning' : 'success')">
           <span v-clean-html="t('generic.selectors.matchingResources.matchesSome', matchingResources)" />
         </Banner>

package/components/form/Security.vue

@@ -157,7 +157,6 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
 
     <div>
       <div class="row">
@@ -191,11 +190,10 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
 
     <div
       data-testid="input-security-runAsUser"
-      class="row mb-10"
+      class="row"
     >
       <div class="col span-6">
         <LabeledInput

package/components/form/Select.vue

@@ -392,6 +392,10 @@ export default {
   .unlabeled-select {
     position: relative;
 
+    :deep() .vs__actions:after {
+      // padding-top: 2px;
+    }
+
     :deep() .v-select.select-input-view {
       .vs__actions {
         visibility: hidden;
@@ -409,7 +413,8 @@ export default {
 
     :deep() .vs__selected-options {
       display: flex;
-      margin: 3px;
+      align-items: center;
+      margin: 0px;
 
       .vs__selected {
           width: initial;

package/components/form/ServiceNameSelect.vue

@@ -120,11 +120,8 @@ export default {
 
 <template>
   <div>
-    <div class="spacer" />
-    <div class="row mb-10">
-      <h3 class="col span-6">
-        {{ t('workload.serviceAccountName.label') }}
-      </h3>
+    <div class="row mb-10 mt-40">
+      <h3>{{ t('workload.serviceAccountName.label') }}</h3>
     </div>
     <div class="row span-6">
       <LabeledSelect

package/components/form/ServicePorts.vue

@@ -125,7 +125,7 @@ export default {
 <template>
   <div>
     <div v-if="rows.length">
-      <div
+      <!-- <div
         class="ports-headers"
         :class="{'show-protocol':showProtocol, 'show-node-port':showNodePort}"
       >
@@ -169,77 +169,13 @@ export default {
           v-if="showRemove"
           class="remove"
         />
-      </div>
+      </div> -->
       <div
         v-for="(row, idx) in rows"
         :key="idx"
         class="ports-row"
         :class="{'show-protocol':showProtocol, 'show-node-port':showNodePort}"
       >
-        <div
-          v-if="padLeft"
-          class="left"
-        />
-        <div class="port-name">
-          <span v-if="isView">{{ row.name }}</span>
-          <input
-            v-else
-            ref="port-name"
-            v-model.number="row.name"
-            type="text"
-            :placeholder="t('servicePorts.rules.name.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
-        <div class="port">
-          <span v-if="isView">{{ row.port }}</span>
-          <input
-            v-else
-            ref="port"
-            v-model.number="row.port"
-            type="number"
-            min="1"
-            max="65535"
-            :placeholder="t('servicePorts.rules.listening.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
-        <div
-          v-if="showProtocol"
-          class="port-protocol"
-        >
-          <span v-if="isView">{{ row.protocol }}</span>
-          <Select
-            v-else
-            v-model:value="row.protocol"
-            :options="protocolOptions"
-            @update:value="queueUpdate"
-          />
-        </div>
-        <div class="target-port">
-          <span v-if="isView">{{ row.targetPort }}</span>
-          <input
-            v-else
-            v-model="row.targetPort"
-            :placeholder="t('servicePorts.rules.target.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
-        <div
-          v-if="showNodePort"
-          class="node-port"
-        >
-          <span v-if="isView">{{ row.nodePort }}</span>
-          <input
-            v-else
-            v-model.number="row.nodePort"
-            type="number"
-            min="1"
-            max="65535"
-            :placeholder="t('servicePorts.rules.node.placeholder')"
-            @input="queueUpdate"
-          >
-        </div>
         <div
           v-if="showRemove"
           class="remove"
@@ -252,7 +188,106 @@ export default {
             <t k="generic.remove" />
           </button>
         </div>
+        <div class="flex">
+          <span class="port-name">
+            <t k="servicePorts.rules.name.label" />
+          </span>
+          <div class="port-name">
+            <span v-if="isView">{{ row.name }}</span>
+            <input
+              v-else
+              ref="port-name"
+              v-model.number="row.name"
+              type="text"
+              :placeholder="t('servicePorts.rules.name.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
+        <div class="flex">
+          <span class="port">
+            <t k="servicePorts.rules.listening.label" />
+            <i
+              v-clean-tooltip="t('servicesPage.listeningPorts')"
+              class="icon icon-info flex"
+            />
+            <span class="text-error">*</span>
+          </span>
+          <div class="port">
+            <span v-if="isView">{{ row.port }}</span>
+            <input
+              v-else
+              ref="port"
+              v-model.number="row.port"
+              type="number"
+              min="1"
+              max="65535"
+              :placeholder="t('servicePorts.rules.listening.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
+        <div class="flex" v-if="showProtocol">
+          <span
+            class="port-protocol"
+          >
+            <t k="servicePorts.rules.protocol.label" />
+          </span>
+          <div
+            class="port-protocol"
+          >
+            <span v-if="isView">{{ row.protocol }}</span>
+            <Select
+              v-else
+              v-model:value="row.protocol"
+              :options="protocolOptions"
+              @update:value="queueUpdate"
+            />
+          </div>
+        </div>
+        <div class="flex">
+          <span class="target-port">
+            <t k="servicePorts.rules.target.label" />
+            <i
+              v-clean-tooltip="t('servicesPage.targetPorts')"
+              class="icon icon-info flex"
+            />
+            <span class="text-error">*</span>
+
+          </span>
+          <div class="target-port">
+            <span v-if="isView">{{ row.targetPort }}</span>
+            <input
+              v-else
+              v-model="row.targetPort"
+              :placeholder="t('servicePorts.rules.target.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
+        <div class="flex" v-if="showNodePort">
+          <span
+            class="node-port"
+          >
+            <t k="servicePorts.rules.node.label" />
+          </span>
+          <div
+            class="node-port"
+          >
+            <span v-if="isView">{{ row.nodePort }}</span>
+            <input
+              v-else
+              v-model.number="row.nodePort"
+              type="number"
+              min="1"
+              max="65535"
+              :placeholder="t('servicePorts.rules.node.placeholder')"
+              @input="queueUpdate"
+            >
+          </div>
+        </div>
         <Error
+          style="margin-bottom: 24px;"
           :value="{...row, idx}"
           :rules="rules"
         />
@@ -286,22 +321,60 @@ export default {
   }
 
   .ports-headers, .ports-row{
-    display: grid;
-    grid-column-gap: $column-gutter;
-    margin-bottom: 10px;
+    // display: grid;
+    // grid-column-gap: $column-gutter;
+    // margin-bottom: 10px;
+    // align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    // &.show-protocol{
+    //   grid-template-columns: 23% 23% 10% 15% 15% 10%;
+    //   &:not(.show-node-port){
+    //     grid-template-columns: 31% 31% 10% 15% 10%;
+    //   }
+    // }
+    // &.show-node-port:not(.show-protocol){
+    //   grid-template-columns: 28% 28% 15% 15% 10%;
+    // }
+  }
+  .flex{
+    display: flex;
     align-items: center;
+    margin-bottom: 24px;
+    >span:nth-child(1){
+      min-width: 160px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+    }
 
-    &.show-protocol{
-      grid-template-columns: 23% 23% 10% 15% 15% 10%;
-      &:not(.show-node-port){
-        grid-template-columns: 31% 31% 10% 15% 10%;
+    .port-name:not(span){
+      width: 400px;
+
+    }
+    .port:not(span){
+      width: 400px;
+      INPUT{
+        height: 32px;
+        padding-left: 11px;
       }
     }
-    &.show-node-port:not(.show-protocol){
-      grid-template-columns: 28% 28% 15% 15% 10%;
+    .target-port:not(span){
+      width: 400px;
+    }
+    .node-port:not(span){
+      width: 400px;
+      INPUT{
+        height: 32px;
+        padding-left: 11px;
+      }
     }
   }
 
+  .flex:nth-last-child{
+    margin-bottom: 0px;
+  }
   .ports-headers {
     color: var(--input-label);
   }
@@ -312,6 +385,7 @@ export default {
 
   .remove BUTTON {
     padding: 0px;
+    min-width: auto;
   }
 
   .ports-row {

package/components/form/Taints.vue

@@ -112,6 +112,7 @@ export default {
 
 <style lang="scss" scoped>
   .compact-select {
-    height: 40px;
+    height: 32px;
+    overflow: hidden;
   }
 </style>