Merge pull request #2880 from PrefectHQ/dylan/tweak/deployment-sla-ca…

…rd-styling
PrefectHQ · Jan 8, 2025 · 5581aba · 5581aba
2 parents 945c6f0 + 20dcc0b
commit 5581aba
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/DeploymentDetails.vue b/src/components/DeploymentDetails.vue
@@ -52,7 +52,7 @@
         </template>
       </p-key-value>
 
-      <p-key-value v-if="slas" label="Service Level Agreements" :value="slas">
+      <p-key-value v-if="slas" class="deployment-details__slas" label="Service Level Agreements">
         <template #value>
           <DeploymentServiceLevelAgreementCard v-for="sla in slas" :key="sla.id" class="deployment-details__sla-cards" :service-level-agreement="sla" />
         </template>
@@ -226,4 +226,10 @@
 .deployment-details__sla-cards { @apply
   my-1
 }
+
+.deployment-details__slas {
+  .p-key-value__value { @apply
+    w-full
+  }
+}
 </style>
diff --git a/src/components/DeploymentServiceLevelAgreementCard.vue b/src/components/DeploymentServiceLevelAgreementCard.vue
@@ -4,14 +4,15 @@
     <p-key-value class="deployment-service-level-agreement-card__item" label="Type" :value="serviceLevelAgreement.getSlaType()" />
     <p-key-value class="deployment-service-level-agreement-card__item" label="Severity" :value="uppercase(serviceLevelAgreement.severity)" />
     <p-key-value v-if="serviceLevelAgreement.description" class="deployment-service-level-agreement-card__item" label="Description" :value="serviceLevelAgreement.description" />
-    <p-key-value class="deployment-service-level-agreement-card__item" label="Duration" :value="`${serviceLevelAgreement.durationInSeconds()} seconds`" />
+    <p-key-value class="deployment-service-level-agreement-card__item" label="Duration" :value="secondsToString(serviceLevelAgreement.durationInSeconds())" />
   </p-card>
 </template>
 
 
 <script lang="ts" setup>
   import { ServiceLevelAgreement } from '@/models/ServiceLevelAgreement'
   import { uppercase } from '@/utilities'
+  import { secondsToString } from '@/utilities/seconds'
 
   defineProps<{
     serviceLevelAgreement: ServiceLevelAgreement,