feat(sagemakerunifiedstudio): Add job definition detail page and edit page (aws#2181)

## Problem
- Need job definition detail page
- Need job definition edit page

## Solution
- Create new job definition detail page
- Create new job definition edit page
- Create common breadcrumb component for page navigation

#### Job definition detail page
<img width="1356" height="1310" alt="Screenshot 2025-07-29 at 12 27
42 PM"
src="https://github.com/user-attachments/assets/69b85254-d318-42cb-8326-b3a0b65b44d9"
/>

#### Job definition edit page
<img width="1356" height="1310" alt="Screenshot 2025-07-29 at 12 27
53 PM"
src="https://github.com/user-attachments/assets/7cbc9229-bf0b-44de-804d-16f27427a857"
/>

---

- Treat all work as PUBLIC. Private `feature/x` branches will not be
squash-merged at release time.
- Your code changes must meet the guidelines in
[CONTRIBUTING.md](https://github.com/aws/aws-toolkit-vscode/blob/master/CONTRIBUTING.md#guidelines).
- License: I confirm that my contribution is made under the terms of the
Apache 2.0 license.

Author: spkamboj

packages/core/src/sagemakerunifiedstudio/notebookScheduling/utils/constants.ts

@@ -5,22 +5,40 @@
 
 export interface Page {
     name: string
-    metadata: CreateJobPageMetadata | ViewJobsPageMetadata | JobDetailPageMetadata
+    metadata:
+        | CreateJobPageMetadata
+        | ViewJobsPageMetadata
+        | JobDetailPageMetadata
+        | JobDefinitionDetailPageMetadata
+        | EditJobDefinitionPageMetadata
 }
 
 export interface CreateJobPageMetadata {}
 
 export interface ViewJobsPageMetadata {
     newJob?: string
     newJobDefinition?: string
+    showJobDefinitions?: boolean
 }
 
 export interface JobDetailPageMetadata {
     jobId: string
 }
 
+export interface JobDefinitionDetailPageMetadata {
+    jobDefinitionId: string
+}
+
+export interface EditJobDefinitionPageMetadata {
+    jobDefinitionId: string
+}
+
 export const createJobPage: string = 'createJob'
 
 export const viewJobsPage: string = 'viewJobs'
 
 export const jobDetailPage: string = 'jobDetailPage'
+
+export const jobDefinitionDetailPage: string = 'jobDefinitionDetailPage'
+
+export const editJobDefinitionPage: string = 'editJobDefinitionPage'

packages/core/src/sagemakerunifiedstudio/notebookScheduling/vue/app.vue

@@ -9,8 +9,17 @@ import TkFixedLayout from '../../shared/ux/tkFixedLayout.vue'
 import CreateJobPage from './views/createJobPage.vue'
 import ViewJobsPage from './views/viewJobsPage.vue'
 import JobDetailPage from './views/jobDetailPage.vue'
+import JobDefinitionDetailPage from './views/jobDefinitionDetailPage.vue'
+import EditJobDefinitionPage from './views/editJobDefinitionPage.vue'
 import { client } from './composables/useClient'
-import { createJobPage, viewJobsPage, jobDetailPage, Page } from '../utils/constants'
+import {
+    createJobPage,
+    viewJobsPage,
+    jobDetailPage,
+    jobDefinitionDetailPage,
+    editJobDefinitionPage,
+    Page,
+} from '../utils/constants'
 
 import '../../shared/ux/styles.css'
 
@@ -37,7 +46,7 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-    <tk-fixed-layout v-if="state.page?.name === createJobPage" :width="628">
+    <tk-fixed-layout v-if="state.page?.name === createJobPage" :width="628" :max-width="700" :center="false">
         <create-job-page />
     </tk-fixed-layout>
 
@@ -49,5 +58,23 @@ onBeforeMount(async () => {
         <job-detail-page />
     </tk-fixed-layout>
 
+    <tk-fixed-layout
+        v-else-if="state.page?.name === jobDefinitionDetailPage"
+        :width="800"
+        :max-width="900"
+        :center="false"
+    >
+        <job-definition-detail-page />
+    </tk-fixed-layout>
+
+    <tk-fixed-layout
+        v-else-if="state.page?.name === editJobDefinitionPage"
+        :width="628"
+        :max-width="700"
+        :center="false"
+    >
+        <edit-job-definition-page />
+    </tk-fixed-layout>
+
     <div v-else>Loading...</div>
 </template>

packages/core/src/sagemakerunifiedstudio/notebookScheduling/vue/components/breadcrumbs.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import TkSpaceBetween from '../../../shared/ux/tkSpaceBetween.vue'
+import { client } from '../composables/useClient'
+import { ViewJobsPageMetadata, JobDefinitionDetailPageMetadata } from '../../utils/constants'
+
+//-------------------------------------------------------------------------------------------------
+// Props
+//-------------------------------------------------------------------------------------------------
+export interface BreadcrumbItem {
+    text: string
+    page?: string
+    metadata?: ViewJobsPageMetadata | JobDefinitionDetailPageMetadata
+}
+
+interface Props {
+    items: BreadcrumbItem[]
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+//-------------------------------------------------------------------------------------------------
+// Variables & Methods
+//-------------------------------------------------------------------------------------------------
+async function onNavigate(item: BreadcrumbItem) {
+    if (item.page && item.metadata) {
+        await client.setCurrentPage({ name: item.page, metadata: item.metadata })
+    }
+}
+</script>
+
+<template>
+    <tk-space-between class="breadcrumb" direction="horizontal" size="xs">
+        <template v-for="(item, index) in props.items" :key="index">
+            <span v-if="index < props.items.length - 1"
+                ><a @click="onNavigate(item)">{{ item.text }}</a></span
+            >
+            <span v-else>{{ item.text }}</span>
+
+            <span v-if="index < props.items.length - 1">/</span>
+        </template>
+    </tk-space-between>
+</template>
+
+<style scoped>
+.breadcrumb a {
+    cursor: pointer;
+}
+</style>

packages/core/src/sagemakerunifiedstudio/notebookScheduling/vue/components/jobsDefinitions.vue

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { reactive, computed, onBeforeMount } from 'vue'
+import { reactive, computed, watch } from 'vue'
 import TkSpaceBetween from '../../../shared/ux/tkSpaceBetween.vue'
 import TkBox from '../../../shared/ux/tkBox.vue'
 import TkTable from '../../../shared/ux/tkTable.vue'
@@ -13,9 +13,10 @@ import TkBanner from '../../../shared/ux/tkBanner.vue'
 import PlayIcon from '../../../shared/ux/icons/playIcon.vue'
 import PauseIcon from '../../../shared/ux/icons/pauseIcon.vue'
 import CloseIcon from '../../../shared/ux/icons/closeIcon.vue'
-import { jobDefinitions } from '../composables/useJobs'
+import { jobDefinitions, JobDefinition } from '../composables/useJobs'
+import { newJobDefinition } from '../composables/useViewJobs'
 import { client } from '../composables/useClient'
-import { ViewJobsPageMetadata } from '../../utils/constants'
+import { jobDefinitionDetailPage, JobDefinitionDetailPageMetadata } from '../../utils/constants'
 
 //-------------------------------------------------------------------------------------------------
 // State
@@ -59,14 +60,12 @@ const bannerMessage = computed(() => {
 })
 
 //-------------------------------------------------------------------------------------------------
-// Lifecycle Hooks
+// Watchers
 //-------------------------------------------------------------------------------------------------
-onBeforeMount(async () => {
-    const page = await client.getCurrentPage()
-    const metadata = page.metadata as ViewJobsPageMetadata
-
-    if (metadata.newJobDefinition) {
-        state.newJobDefinition = metadata.newJobDefinition
+watch(newJobDefinition, (newVal, _oldVal) => {
+    if (newVal) {
+        state.newJobDefinition = newVal
+        newJobDefinition.value = undefined
     }
 })
 
@@ -76,6 +75,14 @@ onBeforeMount(async () => {
 const itemsPerTablePage = 10
 const tableColumns = ['Job definition name', 'Input filename', 'Created at', 'Schedule', 'Status', 'Actions']
 
+async function onJobDefinition(jobDefinition: JobDefinition): Promise<void> {
+    const metadata: JobDefinitionDetailPageMetadata = {
+        jobDefinitionId: jobDefinition.id,
+    }
+
+    await client.setCurrentPage({ name: jobDefinitionDetailPage, metadata })
+}
+
 function onPagination(page: number) {
     state.paginatedPage = page
 }
@@ -150,7 +157,7 @@ function resetJobDefinitionToDelete(): void {
                 <template v-slot:body>
                     <tr v-for="(jobDefinition, index) in jobsDefinitionsPerPage" :key="index">
                         <td>
-                            <a>
+                            <a class="anchor-link" @click="onJobDefinition(jobDefinition)">
                                 {{ jobDefinition.name }}
                             </a>
                         </td>
@@ -189,7 +196,8 @@ function resetJobDefinitionToDelete(): void {
 </template>
 
 <style scoped>
-.jobs-definitions {
+.jobs-definitions .anchor-link {
+    cursor: pointer;
 }
 
 .jobs-definitions .delete-confirm {

packages/core/src/sagemakerunifiedstudio/notebookScheduling/vue/components/jobsList.vue

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { computed, reactive, onBeforeMount } from 'vue'
+import { computed, reactive, watch } from 'vue'
 import TkSpaceBetween from '../../../shared/ux/tkSpaceBetween.vue'
 import TkBox from '../../../shared/ux/tkBox.vue'
 import TkBanner from '../../../shared/ux/tkBanner.vue'
@@ -14,7 +14,21 @@ import DownloadIcon from '../../../shared/ux/icons/downloadIcon.vue'
 import CloseIcon from '../../../shared/ux/icons/closeIcon.vue'
 import { jobs, Job } from '../composables/useJobs'
 import { client } from '../composables/useClient'
-import { jobDetailPage, JobDetailPageMetadata, ViewJobsPageMetadata } from '../../utils/constants'
+import { newJob } from '../composables/useViewJobs'
+import { jobDetailPage, JobDetailPageMetadata } from '../../utils/constants'
+
+//-------------------------------------------------------------------------------------------------
+// Props
+//-------------------------------------------------------------------------------------------------
+interface Props {
+    jobDefinitionId?: string
+    hideHeading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    jobDefinitionId: undefined,
+    hideHeading: false,
+})
 
 //-------------------------------------------------------------------------------------------------
 // State
@@ -34,18 +48,27 @@ const state: State = reactive({
 //-------------------------------------------------------------------------------------------------
 // Computed Properties
 //-------------------------------------------------------------------------------------------------
+const allowedJobs = computed(() => {
+    if (props.jobDefinitionId) {
+        const jobsForDefinition = jobs.value.filter((job) => job.jobDefinitionId === props.jobDefinitionId)
+        return jobsForDefinition
+    } else {
+        return [...jobs.value]
+    }
+})
+
 const jobsPerPage = computed(() => {
     const items = []
 
     const startIndex = state.paginatedPage * itemsPerTablePage
     let endIndex = startIndex + itemsPerTablePage
 
-    if (endIndex > jobs.value.length) {
-        endIndex = jobs.value.length
+    if (endIndex > allowedJobs.value.length) {
+        endIndex = allowedJobs.value.length
     }
 
     for (let index = startIndex; index < endIndex; index++) {
-        items.push(jobs.value[index])
+        items.push(allowedJobs.value[index])
     }
 
     return items
@@ -58,14 +81,12 @@ const bannerMessage = computed(() => {
 })
 
 //-------------------------------------------------------------------------------------------------
-// Lifecycle Hooks
+// Watchers
 //-------------------------------------------------------------------------------------------------
-onBeforeMount(async () => {
-    const page = await client.getCurrentPage()
-    const metadata = page.metadata as ViewJobsPageMetadata
-
-    if (metadata.newJob) {
-        state.newJob = metadata.newJob
+watch(newJob, (newVal, _oldVal) => {
+    if (newVal) {
+        state.newJob = newVal
+        newJob.value = undefined
     }
 })
 
@@ -100,8 +121,8 @@ function onDelete(index: number): void {
 
     const jobIndex = state.paginatedPage * itemsPerTablePage + index
 
-    if (jobIndex < jobs.value.length) {
-        jobs.value[jobIndex].delete = true
+    if (jobIndex < allowedJobs.value.length) {
+        allowedJobs.value[jobIndex].delete = true
         state.jobToDeleteIndex = jobIndex
     }
 }
@@ -115,8 +136,8 @@ function onDownload(index: number): void {
 }
 
 function resetJobToDelete(): void {
-    if (state.jobToDeleteIndex !== undefined && state.jobToDeleteIndex < jobs.value.length) {
-        jobs.value[state.jobToDeleteIndex].delete = false
+    if (state.jobToDeleteIndex !== undefined && state.jobToDeleteIndex < allowedJobs.value.length) {
+        allowedJobs.value[state.jobToDeleteIndex].delete = false
         state.jobToDeleteIndex = undefined
     }
 }
@@ -125,23 +146,26 @@ function resetJobToDelete(): void {
 <template>
     <div class="jobs-list">
         <tk-space-between>
-            <h1>Notebook Jobs</h1>
+            <h1 v-if="!props.hideHeading">Notebook Jobs</h1>
 
             <tk-banner v-if="state.newJob" :content="bannerMessage" @dismiss="onBannerDismiss" />
 
             <tk-box float="right">
                 <button class="tk-button" @click="onReload">Reload</button>
             </tk-box>
 
-            <div v-if="jobs.length === 0">
+            <div v-if="props.jobDefinitionId && allowedJobs.length === 0">
+                No notebook jobs associated with this job definition.
+            </div>
+            <div v-else-if="allowedJobs.length === 0">
                 There are no notebook jobs. Notebook jobs run files in the background, immediately or on a schedule. To
                 create a notebook job, right-click on a notebook in the file browser and select "Create Notebook Job".
             </div>
 
             <tk-table
-                v-if="jobs.length > 0"
+                v-if="allowedJobs.length > 0"
                 :items-per-page="itemsPerTablePage"
-                :total-items="jobs.length"
+                :total-items="allowedJobs.length"
                 @pagination="onPagination"
             >
                 <template v-slot:head>