Add individual concurrency limit page with active runs list (#7848)

orion-ui/src/pages/ConcurrencyLimit.vue

@@ -0,0 +1,62 @@
+<template>
+  <p-layout-well class="concurrencyLimit">
+    <template #header>
+      <PageHeadingConcurrencyLimit v-if="concurrencyLimit" :concurrency-limit="concurrencyLimit" @delete="deleteConcurrencyLimit" />
+    </template>
+
+    <p-tabs :tabs="tabs">
+      <template #details>
+        <ConcurrencyLimitDetails v-if="concurrencyLimit" :concurrency-limit="concurrencyLimit" />
+      </template>
+      <template #active-task-runs>
+        <ConcurrencyLimitActiveRuns v-if="concurrencyLimit?.activeSlots" :active-slots="concurrencyLimit.activeSlots" />
+      </template>
+    </p-tabs>
+
+    <template #well>
+      <ConcurrencyLimitDetails v-if="concurrencyLimit" alternate :concurrency-limit="concurrencyLimit" />
+    </template>
+  </p-layout-well>
+</template>
+
+<script lang="ts" setup>
+  import { PageHeadingConcurrencyLimit, ConcurrencyLimitDetails, ConcurrencyLimitActiveRuns, useTabs, useWorkspaceApi } from '@prefecthq/orion-design'
+  import { media } from '@prefecthq/prefect-design'
+  import { useRouteParam, useSubscription } from '@prefecthq/vue-compositions'
+  import { computed } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { usePageTitle } from '@/compositions/usePageTitle'
+  import { routes } from '@/router'
+
+  const api = useWorkspaceApi()
+  const concurrencyLimitId = useRouteParam('concurrencyLimitId')
+  const router = useRouter()
+
+  const computedTabs = computed(() => [
+    { label: 'Details', hidden: media.xl },
+    { label: 'Active Task Runs' },
+  ])
+  const tabs = useTabs(computedTabs)
+
+  const subscriptionOptions = {
+    interval: 300000,
+  }
+
+  const concurrencyLimitSubscription = useSubscription(api.concurrencyLimits.getConcurrencyLimit, [concurrencyLimitId.value], subscriptionOptions)
+  const concurrencyLimit = computed(() => concurrencyLimitSubscription.response)
+
+
+  function deleteConcurrencyLimit(): void {
+    router.push(routes.concurrencyLimits())
+  }
+
+  const title = computed<string>(() => {
+    if (!concurrencyLimit.value) {
+      return 'Concurrency Limit'
+    }
+
+    return `Concurrency Limit: ${concurrencyLimit.value.tag}`
+  })
+
+  usePageTitle(title)
+</script>

orion-ui/src/router/index.ts

@@ -27,6 +27,7 @@ const workspaceRoutes = createWorkspaceRouteRecords({
   notifications: () => import('@/pages/Notifications.vue'),
   notificationCreate: () => import('@/pages/NotificationCreate.vue'),
   notificationEdit: () => import('@/pages/NotificationEdit.vue'),
+  concurrencyLimit: () => import('@/pages/ConcurrencyLimit.vue'),
   concurrencyLimits: () => import('@/pages/ConcurrencyLimits.vue'),
 })