show slas on deployment details component

src/components/DeploymentDetails.vue

@@ -51,6 +51,12 @@
           </p-button>
         </template>
       </p-key-value>
+
+      <p-key-value v-if="serviceLevelAgreements" class="w-full" label="Service Level Agreements" :value="serviceLevelAgreements">
+        <template #value>
+          <DeploymentServiceLevelAgreementCard v-for="sla in slas" :key="sla.id" class="deployment-details__sla-cards" :service-level-agreement="sla" />
+        </template>
+      </p-key-value>
     </slot>
 
     <p-divider />
@@ -119,16 +125,19 @@
   import { AutomationAction, CreateAutomationQuery } from '..'
   import AutomationIconText from '@/automations/components/AutomationIconText.vue'
   import { BlockIconText, DeploymentStatusBadge, DeploymentSchedulesFieldset } from '@/components'
+  import DeploymentServiceLevelAgreementCard from '@/components/DeploymentServiceLevelAgreementCard.vue'
   import DeploymentToggle from '@/components/DeploymentToggle.vue'
   import FormattedDate from '@/components/FormattedDate.vue'
   import { useWorkspaceApi, useCan, useWorkspaceRoutes } from '@/compositions'
   import { useAutomationsByRelatedResource } from '@/compositions/useAutomationsByRelatedResource'
   import { localization } from '@/localization'
   import { Deployment, DeploymentScheduleCompatible } from '@/models'
+  import { ServiceLevelAgreement } from '@/models/ServiceLevelAgreement'
 
   const props = defineProps<{
     deployment: Deployment,
     alternate?: boolean,
+    slas?: ServiceLevelAgreement[] | null,
   }>()
 
   const emit = defineEmits<{
@@ -137,6 +146,7 @@
 
   const can = useCan()
   const api = useWorkspaceApi()
+  const serviceLevelAgreements = computed(() => props.slas)
 
   const createDeploymentSchedule = async (updatedSchedule: DeploymentScheduleCompatible): Promise<void> => {
     if (updatedSchedule.active === null || !updatedSchedule.schedule) {
@@ -213,4 +223,8 @@
   justify-between
   items-center
 }
+
+.deployment-details__sla-cards { @apply
+  my-1
+}
 </style>

src/components/DeploymentServiceLevelAgreementCard.vue

@@ -0,0 +1,27 @@
+<template>
+  <p-card class="deployment-service-level-agreement-card">
+    <p-key-value label="Name" :value="serviceLevelAgreement.name" />
+    <p-key-value label="Severity" :value="uppercase(serviceLevelAgreement.severity)" />
+    <p-key-value v-if="serviceLevelAgreement.description" label="Description" :value="serviceLevelAgreement.description" />
+    <p-key-value label="Duration" :value="`${serviceLevelAgreement.durationInSeconds()} seconds`" />
+  </p-card>
+</template>
+
+
+<script lang="ts" setup>
+  import { ServiceLevelAgreement } from '@/models/ServiceLevelAgreement'
+  import { uppercase } from '@/utilities'
+
+  defineProps<{
+    serviceLevelAgreement: ServiceLevelAgreement,
+  }>()
+</script>
+
+<style>
+.deployment-service-level-agreement-card { @apply
+  text-sm
+  gap-y-2
+  w-full
+}
+</style>
+

src/maps/index.ts

@@ -60,6 +60,7 @@ import { mapScheduleToScheduleResponse, mapScheduleResponseToSchedule, mapSchedu
 import { mapSchemaDefinitionsResponseToSchemaDefinitions, mapSchemaPropertiesResponseToSchemaProperties, mapSchemaPropertyResponseToSchemaProperty, mapSchemaResponseToSchema } from '@/maps/schema'
 import { mapSchemaValuesToSchemaValuesRequest } from '@/maps/schemaValuesRequest'
 import { mapSchemaValuesResponseToSchemaValues } from '@/maps/schemaValuesResponse'
+import { mapServiceLevelAgreementResponseToServiceLevelAgreement } from '@/maps/serviceLevelAgreements'
 import { mapStateResponseToState, mapStateToStateResponse, mapStateCreateToStateRequest } from '@/maps/state'
 import { mapStateDetailsCreateToStateDetailsRequest, mapStateDetailsResponseToStateDetails, mapStateDetailsToStateDetailsRequest, mapStateDetailsToStateDetailsResponse } from '@/maps/stateDetails'
 import { mapStateHistoryToStateHistoryResponse, mapStateHistoryResponseToStateHistory } from '@/maps/stateHistory'
@@ -193,6 +194,7 @@ export const maps = {
   ServerStateType: { StateType: mapServerStateTypeToStateType },
   ServerWorkPoolStatus: { WorkPoolStatus: mapServerWorkPoolStatusToWorkPoolStatus },
   ServerWorkPoolWorkerStatus: { WorkPoolWorkerStatus: mapServerWorkPoolWorkerStatusToWorkPoolWorkerStatus },
+  ServiceLevelAgreementResponse: { ServiceLevelAgreement: mapServiceLevelAgreementResponseToServiceLevelAgreement },
   State: { StateResponse: mapStateToStateResponse },
   StateCreate: { StateRequest: mapStateCreateToStateRequest },
   StateDetails: { StateDetailsResponse: mapStateDetailsToStateDetailsResponse, StateDetailsRequest: mapStateDetailsToStateDetailsRequest },

src/maps/serviceLevelAgreements.ts

@@ -0,0 +1,26 @@
+import { ServiceLevelAgreementResponse } from '@/models/api/ServiceLevelAgreementResponse'
+import { ServiceLevelAgreement } from '@/models/ServiceLevelAgreement'
+import { MapFunction } from '@/services/Mapper'
+
+export const mapServiceLevelAgreementResponseToServiceLevelAgreement: MapFunction<ServiceLevelAgreementResponse, ServiceLevelAgreement> = function(source) {
+  return new ServiceLevelAgreement({
+    id: source.id,
+    name: source.name,
+    description: source.description,
+    enabled: source.enabled,
+    trigger: this.map('AutomationTriggerResponse', source.trigger, 'AutomationTrigger'),
+    labels: source.labels,
+    severity: source.severity,
+    created: this.map('string', source.created, 'Date'),
+    updated: this.map('string', source.updated, 'Date'),
+    account: source.account,
+    workspace: source.workspace,
+    actor: {
+      actorId: source.actor.actor_id,
+      handle: source.actor.handle,
+      userId: source.actor.user_id,
+      botId: source.actor.bot_id,
+    },
+  })
+}
+

src/models/ServiceLevelAgreement.ts

@@ -0,0 +1,62 @@
+import { AutomationTrigger } from '@/automations'
+
+export type ServiceLevelAgreementSeverity = 'minor' | 'low' | 'moderate' | 'high' | 'critical'
+
+export interface IServiceLevelAgreement {
+  id: string,
+  name: string,
+  description: string,
+  enabled: boolean,
+  trigger: AutomationTrigger,
+  labels: Record<string, string>[],
+  severity: ServiceLevelAgreementSeverity,
+  created: Date,
+  updated: Date,
+  account: string,
+  workspace: string,
+  actor: {
+    actorId: string,
+    handle: string,
+    userId: string | null,
+    botId: string | null,
+  },
+}
+
+export class ServiceLevelAgreement implements IServiceLevelAgreement {
+  public readonly id: string
+  public readonly name: string
+  public readonly description: string
+  public readonly enabled: boolean
+  public readonly trigger: AutomationTrigger
+  public readonly labels: Record<string, string>[]
+  public readonly severity: ServiceLevelAgreementSeverity
+  public readonly created: Date
+  public readonly updated: Date
+  public readonly account: string
+  public readonly workspace: string
+  public readonly actor: {
+    actorId: string,
+    handle: string,
+    userId: string | null,
+    botId: string | null,
+  }
+
+  public constructor(serviceLevelAgreement: IServiceLevelAgreement) {
+    this.id = serviceLevelAgreement.id
+    this.name = serviceLevelAgreement.name
+    this.description = serviceLevelAgreement.description
+    this.enabled = serviceLevelAgreement.enabled
+    this.trigger = serviceLevelAgreement.trigger
+    this.labels = serviceLevelAgreement.labels
+    this.created = serviceLevelAgreement.created
+    this.updated = serviceLevelAgreement.updated
+    this.account = serviceLevelAgreement.account
+    this.workspace = serviceLevelAgreement.workspace
+    this.actor = serviceLevelAgreement.actor
+    this.severity = serviceLevelAgreement.severity
+  }
+
+  public durationInSeconds(): number {
+    return this.trigger.within
+  }
+}

src/models/api/ServiceLevelAgreementResponse.ts

@@ -0,0 +1,25 @@
+import { AutomationActionResponse } from '@/automations/types/api/actions'
+import { AutomationTriggerResponse } from '@/automations/types/api/triggers'
+import { ServiceLevelAgreementSeverity } from '@/models/ServiceLevelAgreement'
+
+
+export type ServiceLevelAgreementResponse = {
+  name: string,
+  description: string,
+  enabled: boolean,
+  trigger: AutomationTriggerResponse,
+  actions_on_resolve: AutomationActionResponse[],
+  labels: Record<string, string>[],
+  severity: ServiceLevelAgreementSeverity,
+  id: string,
+  created: string,
+  updated: string,
+  account: string,
+  workspace: string,
+  actor: {
+    actor_id: string,
+    handle: string,
+    user_id: string | null,
+    bot_id: string | null,
+  },
+}

src/models/api/index.ts

@@ -24,6 +24,7 @@ export * from './SavedSearchResponse'
 export * from './ScheduleRequest'
 export * from './ScheduleResponse'
 export * from './SchemaResponse'
+export * from './ServiceLevelAgreementResponse'
 export * from './StateDetailsRequest'
 export * from './StateDetailsResponse'
 export * from './StateHistoryResponse'

src/models/index.ts

@@ -73,4 +73,5 @@ export * from './WorkPoolWorkerStatus'
 export * from './TaskRunHistory'
 export * from './workspaceEvent'
 export * from './workspaceEvents'
-export * from './workspaceEventsCount'
+export * from './workspaceEventsCount'
+export * from './ServiceLevelAgreement'