From 4ff52343af1818a6dcc5a555edc0ced139c28059 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Palancher?= <remi@rackslab.io>
Date: Fri, 8 Nov 2024 10:52:57 +0100
Subject: [PATCH 1/3] refactor(front): iterate over array of job fields

Iterate over a computed array of job fields in job view, with tiny
subcomponents to represent the values.
---
 .../src/components/job/JobFieldComment.vue    |  29 +++
 .../src/components/job/JobFieldExitCode.vue   |  25 +++
 frontend/src/components/job/JobFieldRaw.vue   |  30 +++
 frontend/src/components/job/JobFieldTRES.vue  |  27 +++
 frontend/src/composables/GatewayAPI.ts        |   8 +-
 frontend/src/views/JobView.vue                | 205 +++++++-----------
 6 files changed, 200 insertions(+), 124 deletions(-)
 create mode 100644 frontend/src/components/job/JobFieldComment.vue
 create mode 100644 frontend/src/components/job/JobFieldExitCode.vue
 create mode 100644 frontend/src/components/job/JobFieldRaw.vue
 create mode 100644 frontend/src/components/job/JobFieldTRES.vue

diff --git a/frontend/src/components/job/JobFieldComment.vue b/frontend/src/components/job/JobFieldComment.vue
new file mode 100644
index 00000000..9b19c7c3
--- /dev/null
+++ b/frontend/src/components/job/JobFieldComment.vue
@@ -0,0 +1,29 @@
+<!--
+  Copyright (c) 2024 Rackslab
+
+  This file is part of Slurm-web.
+
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ClusterJobComment } from '@/composables/GatewayAPI'
+
+const props = defineProps({
+  comment: {
+    type: Object as PropType<ClusterJobComment>,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+    <p v-if="comment.administrator">
+      <span class="italic">(administrator)</span> {{ comment.administrator }}
+    </p>
+    <p v-if="comment.system"><span class="italic">(system)</span> {{ comment.system }}</p>
+    <p v-if="comment.job"><span class="italic">(job)</span> {{ comment.job }}</p>
+  </dd>
+</template>
diff --git a/frontend/src/components/job/JobFieldExitCode.vue b/frontend/src/components/job/JobFieldExitCode.vue
new file mode 100644
index 00000000..8e5edd84
--- /dev/null
+++ b/frontend/src/components/job/JobFieldExitCode.vue
@@ -0,0 +1,25 @@
+<!--
+  Copyright (c) 2024 Rackslab
+
+  This file is part of Slurm-web.
+
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ClusterJobExitCode } from '@/composables/GatewayAPI'
+
+defineProps({
+  exit_code: {
+    type: Object as PropType<ClusterJobExitCode>,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+    {{ exit_code.status }} ({{ exit_code.return_code }})
+  </dd>
+</template>
diff --git a/frontend/src/components/job/JobFieldRaw.vue b/frontend/src/components/job/JobFieldRaw.vue
new file mode 100644
index 00000000..32496aaf
--- /dev/null
+++ b/frontend/src/components/job/JobFieldRaw.vue
@@ -0,0 +1,30 @@
+<!--
+  Copyright (c) 2024 Rackslab
+
+  This file is part of Slurm-web.
+
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+const props = defineProps({
+  field: {
+    required: true
+  },
+  monospace: {
+    type: Boolean,
+    def: false
+  }
+})
+</script>
+
+<template>
+  <dd
+    :class="[
+      monospace ? 'font-mono' : '',
+      'mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0'
+    ]"
+  >
+    {{ field }}
+  </dd>
+</template>
diff --git a/frontend/src/components/job/JobFieldTRES.vue b/frontend/src/components/job/JobFieldTRES.vue
new file mode 100644
index 00000000..5da10dfd
--- /dev/null
+++ b/frontend/src/components/job/JobFieldTRES.vue
@@ -0,0 +1,27 @@
+<!--
+  Copyright (c) 2024 Rackslab
+
+  This file is part of Slurm-web.
+
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { ClusterTRES } from '@/composables/GatewayAPI'
+
+defineProps({
+  tres: {
+    type: Object as PropType<ClusterTRES[]>,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+    <ul>
+      <li v-for="resource in tres" :key="resource.id">{{ resource.type }}: {{ resource.count }}</li>
+    </ul>
+  </dd>
+</template>
diff --git a/frontend/src/composables/GatewayAPI.ts b/frontend/src/composables/GatewayAPI.ts
index 51203bea..31ae7a4f 100644
--- a/frontend/src/composables/GatewayAPI.ts
+++ b/frontend/src/composables/GatewayAPI.ts
@@ -112,6 +112,12 @@ export interface ClusterJobStep {
   step: { id: { job_id: number; step_id: string }; name: string }
 }
 
+export interface ClusterJobComment {
+  administrator: string
+  job: string
+  system: string
+}
+
 export interface ClusterJobExitCode {
   return_code: number
   status: string
@@ -122,7 +128,7 @@ export interface ClusterIndividualJob {
   association: { account: string; cluster: string; partition: string; user: string }
   batch_flag: boolean
   command: string
-  comment: { administrator: string; job: string; system: string }
+  comment: ClusterJobComment
   cpus: ClusterOptionalNumber
   current_working_directory: string
   derived_exit_code: ClusterJobExitCode
diff --git a/frontend/src/views/JobView.vue b/frontend/src/views/JobView.vue
index d55a3069..db12573c 100644
--- a/frontend/src/views/JobView.vue
+++ b/frontend/src/views/JobView.vue
@@ -7,6 +7,7 @@
 -->
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import type { LocationQueryRaw } from 'vue-router'
 import ClusterMainLayout from '@/components/ClusterMainLayout.vue'
@@ -18,6 +19,10 @@ import { useRuntimeStore } from '@/stores/runtime'
 import ErrorAlert from '@/components/ErrorAlert.vue'
 import LoadingSpinner from '@/components/LoadingSpinner.vue'
 import { ChevronLeftIcon } from '@heroicons/vue/20/solid'
+import JobFieldRaw from '@/components/job/JobFieldRaw.vue'
+import JobFieldComment from '@/components/job/JobFieldComment.vue'
+import JobFieldExitCode from '@/components/job/JobFieldExitCode.vue'
+import JobFieldTRES from '@/components/job/JobFieldTRES.vue'
 
 const props = defineProps({
   cluster: {
@@ -42,6 +47,78 @@ function backToJobs() {
 }
 
 const { data, unable, loaded } = useClusterDataPoller<ClusterIndividualJob>('job', 5000, props.id)
+
+const jobFields = computed(() => {
+  if (!data.value) return []
+  return [
+    { id: 'user', label: 'User', component: JobFieldRaw, props: { field: data.value.user } },
+    { id: 'group', label: 'Group', component: JobFieldRaw, props: { field: data.value.group } },
+    {
+      id: 'account',
+      label: 'Account',
+      component: JobFieldRaw,
+      props: { field: data.value.association.account }
+    },
+    {
+      id: 'wckeys',
+      label: 'Wckeys',
+      component: JobFieldRaw,
+      props: { field: data.value.wckey.wckey }
+    },
+    {
+      id: 'priority',
+      label: 'Priority',
+      component: JobFieldRaw,
+      props: { field: data.value.priority.number }
+    },
+    { id: 'name', label: 'Name', component: JobFieldRaw, props: { field: data.value.name } },
+    {
+      id: 'comments',
+      label: 'Comments',
+      component: JobFieldComment,
+      props: { comment: data.value.comment }
+    },
+    {
+      id: 'submit-line',
+      label: 'Submit line',
+      component: JobFieldRaw,
+      props: { field: data.value.submit_line, monospace: true }
+    },
+    { id: 'script', label: 'Script', component: JobFieldRaw, props: { field: data.value.script } },
+    {
+      id: 'workdir',
+      label: 'Working directory',
+      component: JobFieldRaw,
+      props: { field: data.value.working_directory, monospace: true }
+    },
+    {
+      id: 'exit-code',
+      label: 'Exit Code',
+      component: JobFieldExitCode,
+      props: { exit_code: data.value.exit_code }
+    },
+    { id: 'nodes', label: 'Nodes', component: JobFieldRaw, props: { field: data.value.nodes } },
+    {
+      id: 'partition',
+      label: 'Partition',
+      component: JobFieldRaw,
+      props: { field: data.value.partition }
+    },
+    { id: 'qos', label: 'QOS', component: JobFieldRaw, props: { field: data.value.qos } },
+    {
+      id: 'tres-requested',
+      label: 'Requested',
+      component: JobFieldTRES,
+      props: { tres: data.value.tres.requested }
+    },
+    {
+      id: 'tres-allocated',
+      label: 'Allocated',
+      component: JobFieldTRES,
+      props: { tres: data.value.tres.allocated }
+    }
+  ]
+})
 </script>
 
 <template>
@@ -84,133 +161,15 @@ const { data, unable, loaded } = useClusterDataPoller<ClusterIndividualJob>('job
         <div class="w-full lg:w-2/3">
           <div class="border-t border-gray-100">
             <dl class="divide-y divide-gray-100">
-              <!-- Association -->
-              <div id="job-user" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">User</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.user }}
-                </dd>
-              </div>
-              <div id="job-group" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Group</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.group }}
-                </dd>
-              </div>
-              <div id="job-account" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Account</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.association.account }}
-                </dd>
-              </div>
-              <div id="job-wckey" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Wckeys</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.wckey.wckey }}
-                </dd>
-              </div>
-              <!-- General information -->
-              <div id="job-priority" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Priority</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.priority.number }}
-                </dd>
-              </div>
-              <div id="job-name" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Name</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.name }}
-                </dd>
-              </div>
-              <div id="job-comments" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Comments</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  <p v-if="data.comment.administrator">
-                    <span class="italic">(administrator)</span> {{ data.comment.administrator }}
-                  </p>
-                  <p v-if="data.comment.system">
-                    <span class="italic">(system)</span> {{ data.comment.system }}
-                  </p>
-                  <p v-if="data.comment.job">
-                    <span class="italic">(job)</span> {{ data.comment.job }}
-                  </p>
-                </dd>
-              </div>
-              <div id="job-submit-line" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Submit line</dt>
-                <dd class="mt-1 font-mono text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.submit_line }}
-                </dd>
-              </div>
-              <div id="job-script" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Script</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.script }}
-                </dd>
-              </div>
-              <div id="job-workdir" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Working directory</dt>
-                <dd class="mt-1 font-mono text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.working_directory }}
-                </dd>
-              </div>
-              <div id="job-exit-code" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Exit Code</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.exit_code.status }} ({{ data.exit_code.return_code }})
-                </dd>
-              </div>
-              <!-- Resources -->
-              <div id="job-nodes" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Nodes</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.nodes }}
-                </dd>
-              </div>
-              <div id="job-partition" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">Partition</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.partition }}
-                </dd>
-              </div>
-              <div id="job-qos" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-gray-900">QOS</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  {{ data.qos }}
-                </dd>
-              </div>
-              <div
-                id="job-tres-requested"
-                class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
-              >
-                <dt class="text-sm font-medium leading-6 text-gray-900">Requested</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  <ul>
-                    <li v-for="tres in data.tres.requested" :key="tres.id">
-                      {{ tres.type }}: {{ tres.count }}
-                    </li>
-                  </ul>
-                </dd>
-              </div>
               <div
-                id="job-tres-allocated"
+                v-for="field in jobFields"
+                :key="field.id"
+                :id="`job-${field.id}`"
                 class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
               >
-                <dt class="text-sm font-medium leading-6 text-gray-900">Allocated</dt>
-                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                  <ul>
-                    <li v-for="tres in data.tres.allocated" :key="tres.id">
-                      {{ tres.type }}: {{ tres.count }}
-                    </li>
-                  </ul>
-                </dd>
+                <dt class="text-sm font-medium leading-6 text-gray-900">{{ field.label }}</dt>
+                <component :is="field.component" v-bind="field.props" />
               </div>
-              <!--
-                <div v-for="(value, property) in data" class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                  <dt class="text-sm font-medium leading-6 text-gray-900">{{  property }}</dt>
-                  <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> {{ value }}</dd>
-                </div>
-              -->
             </dl>
           </div>
         </div>

From 1611ac3b000e27f1ad62ccf3c49636cb60393ebc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Palancher?= <remi@rackslab.io>
Date: Fri, 8 Nov 2024 19:07:17 +0100
Subject: [PATCH 2/3] feat(front): hash on job fields

Display hash near all jobs fields in job details page to generate link
to highlight specific field.

fix #251
---
 CHANGELOG.md                   |   2 +
 frontend/src/views/JobView.vue | 239 ++++++++++++++++++++++-----------
 2 files changed, 166 insertions(+), 75 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 598286af..6f211676 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
     timeseries metrics.
   - Display charts of resources (nodes/cores) status and jobs queue in dashboard
     page based on metrics from Prometheus (#275).
+  - Display hash near all jobs fields in job details page to generate link to
+    highlight specific field (#251).
 - conf:
   - Add `racksdb` > `infrastructure` parameter for the agent.
   - Add `metrics` > `enabled` parameter for the agent.
diff --git a/frontend/src/views/JobView.vue b/frontend/src/views/JobView.vue
index db12573c..6a4a0d59 100644
--- a/frontend/src/views/JobView.vue
+++ b/frontend/src/views/JobView.vue
@@ -7,8 +7,9 @@
 -->
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, onMounted, ref } from 'vue'
+import type { Component } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import type { LocationQueryRaw } from 'vue-router'
 import ClusterMainLayout from '@/components/ClusterMainLayout.vue'
 import { useClusterDataPoller } from '@/composables/DataPoller'
@@ -19,6 +20,7 @@ import { useRuntimeStore } from '@/stores/runtime'
 import ErrorAlert from '@/components/ErrorAlert.vue'
 import LoadingSpinner from '@/components/LoadingSpinner.vue'
 import { ChevronLeftIcon } from '@heroicons/vue/20/solid'
+import { HashtagIcon } from '@heroicons/vue/24/outline'
 import JobFieldRaw from '@/components/job/JobFieldRaw.vue'
 import JobFieldComment from '@/components/job/JobFieldComment.vue'
 import JobFieldExitCode from '@/components/job/JobFieldExitCode.vue'
@@ -37,6 +39,7 @@ const props = defineProps({
 
 const runtimeStore = useRuntimeStore()
 const router = useRouter()
+const route = useRoute()
 
 function backToJobs() {
   router.push({
@@ -46,78 +49,146 @@ function backToJobs() {
   })
 }
 
+const JobsFields = [
+  'user',
+  'group',
+  'account',
+  'wckeys',
+  'priority',
+  'name',
+  'comments',
+  'submit-line',
+  'script',
+  'workdir',
+  'exit-code',
+  'nodes',
+  'partition',
+  'qos',
+  'tres-requested',
+  'tres-allocated'
+] as const
+type JobField = (typeof JobsFields)[number]
+
+function isValidJobField(key: string): key is JobField {
+  return typeof key === 'string' && JobsFields.includes(key as JobField)
+}
+
 const { data, unable, loaded } = useClusterDataPoller<ClusterIndividualJob>('job', 5000, props.id)
 
-const jobFields = computed(() => {
-  if (!data.value) return []
-  return [
-    { id: 'user', label: 'User', component: JobFieldRaw, props: { field: data.value.user } },
-    { id: 'group', label: 'Group', component: JobFieldRaw, props: { field: data.value.group } },
-    {
-      id: 'account',
-      label: 'Account',
-      component: JobFieldRaw,
-      props: { field: data.value.association.account }
-    },
-    {
-      id: 'wckeys',
-      label: 'Wckeys',
-      component: JobFieldRaw,
-      props: { field: data.value.wckey.wckey }
-    },
-    {
-      id: 'priority',
-      label: 'Priority',
-      component: JobFieldRaw,
-      props: { field: data.value.priority.number }
-    },
-    { id: 'name', label: 'Name', component: JobFieldRaw, props: { field: data.value.name } },
-    {
-      id: 'comments',
-      label: 'Comments',
-      component: JobFieldComment,
-      props: { comment: data.value.comment }
-    },
-    {
-      id: 'submit-line',
-      label: 'Submit line',
-      component: JobFieldRaw,
-      props: { field: data.value.submit_line, monospace: true }
-    },
-    { id: 'script', label: 'Script', component: JobFieldRaw, props: { field: data.value.script } },
-    {
-      id: 'workdir',
-      label: 'Working directory',
-      component: JobFieldRaw,
-      props: { field: data.value.working_directory, monospace: true }
-    },
-    {
-      id: 'exit-code',
-      label: 'Exit Code',
-      component: JobFieldExitCode,
-      props: { exit_code: data.value.exit_code }
-    },
-    { id: 'nodes', label: 'Nodes', component: JobFieldRaw, props: { field: data.value.nodes } },
-    {
-      id: 'partition',
-      label: 'Partition',
-      component: JobFieldRaw,
-      props: { field: data.value.partition }
-    },
-    { id: 'qos', label: 'QOS', component: JobFieldRaw, props: { field: data.value.qos } },
-    {
-      id: 'tres-requested',
-      label: 'Requested',
-      component: JobFieldTRES,
-      props: { tres: data.value.tres.requested }
-    },
-    {
-      id: 'tres-allocated',
-      label: 'Allocated',
-      component: JobFieldTRES,
-      props: { tres: data.value.tres.allocated }
+const displayTags = ref<Record<JobField, { show: boolean; highlight: boolean }>>({
+  user: { show: false, highlight: false },
+  group: { show: false, highlight: false },
+  account: { show: false, highlight: false },
+  wckeys: { show: false, highlight: false },
+  priority: { show: false, highlight: false },
+  name: { show: false, highlight: false },
+  comments: { show: false, highlight: false },
+  'submit-line': { show: false, highlight: false },
+  script: { show: false, highlight: false },
+  workdir: { show: false, highlight: false },
+  'exit-code': { show: false, highlight: false },
+  nodes: { show: false, highlight: false },
+  partition: { show: false, highlight: false },
+  qos: { show: false, highlight: false },
+  'tres-allocated': { show: false, highlight: false },
+  'tres-requested': { show: false, highlight: false }
+})
+
+const jobFieldsContent = computed(
+  (): { id: JobField; label: string; component: Component; props: Object }[] => {
+    if (!data.value) return []
+    return [
+      { id: 'user', label: 'User', component: JobFieldRaw, props: { field: data.value.user } },
+      { id: 'group', label: 'Group', component: JobFieldRaw, props: { field: data.value.group } },
+      {
+        id: 'account',
+        label: 'Account',
+        component: JobFieldRaw,
+        props: { field: data.value.association.account }
+      },
+      {
+        id: 'wckeys',
+        label: 'Wckeys',
+        component: JobFieldRaw,
+        props: { field: data.value.wckey.wckey }
+      },
+      {
+        id: 'priority',
+        label: 'Priority',
+        component: JobFieldRaw,
+        props: { field: data.value.priority.number }
+      },
+      { id: 'name', label: 'Name', component: JobFieldRaw, props: { field: data.value.name } },
+      {
+        id: 'comments',
+        label: 'Comments',
+        component: JobFieldComment,
+        props: { comment: data.value.comment }
+      },
+      {
+        id: 'submit-line',
+        label: 'Submit line',
+        component: JobFieldRaw,
+        props: { field: data.value.submit_line, monospace: true }
+      },
+      {
+        id: 'script',
+        label: 'Script',
+        component: JobFieldRaw,
+        props: { field: data.value.script }
+      },
+      {
+        id: 'workdir',
+        label: 'Working directory',
+        component: JobFieldRaw,
+        props: { field: data.value.working_directory, monospace: true }
+      },
+      {
+        id: 'exit-code',
+        label: 'Exit Code',
+        component: JobFieldExitCode,
+        props: { exit_code: data.value.exit_code }
+      },
+      { id: 'nodes', label: 'Nodes', component: JobFieldRaw, props: { field: data.value.nodes } },
+      {
+        id: 'partition',
+        label: 'Partition',
+        component: JobFieldRaw,
+        props: { field: data.value.partition }
+      },
+      { id: 'qos', label: 'QOS', component: JobFieldRaw, props: { field: data.value.qos } },
+      {
+        id: 'tres-requested',
+        label: 'Requested',
+        component: JobFieldTRES,
+        props: { tres: data.value.tres.requested }
+      },
+      {
+        id: 'tres-allocated',
+        label: 'Allocated',
+        component: JobFieldTRES,
+        props: { tres: data.value.tres.allocated }
+      }
+    ]
+  }
+)
+
+/* highlight this field for some time */
+function highlightField(field: JobField) {
+  displayTags.value[field].highlight = true
+  setTimeout(() => {
+    displayTags.value[field].highlight = false
+  }, 2000)
+}
+
+onMounted(() => {
+  /* If a job field is in route hash, highlight this field. */
+  if (route.hash) {
+    const field = route.hash.slice(1) // remove initial hash
+    if (isValidJobField(field)) {
+      highlightField(field)
     }
-  ]
+  }
 })
 </script>
 
@@ -162,12 +233,30 @@ const jobFields = computed(() => {
           <div class="border-t border-gray-100">
             <dl class="divide-y divide-gray-100">
               <div
-                v-for="field in jobFields"
+                v-for="field in jobFieldsContent"
                 :key="field.id"
-                :id="`job-${field.id}`"
-                class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"
+                :id="`${field.id}`"
+                :class="[
+                  displayTags[field.id].highlight ? 'bg-slurmweb-light' : '',
+                  ' px-4 py-2 transition-colors duration-700 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0'
+                ]"
               >
-                <dt class="text-sm font-medium leading-6 text-gray-900">{{ field.label }}</dt>
+                <dt class="text-sm font-medium leading-6 text-gray-900">
+                  <a :href="`#${field.id}`">
+                    <span
+                      class="flex items-center"
+                      @mouseover="displayTags[field.id].show = true"
+                      @mouseleave="displayTags[field.id].show = false"
+                    >
+                      <HashtagIcon
+                        v-show="displayTags[field.id].show"
+                        class="-ml-5 mr-2 h-3 w-3 text-gray-500"
+                        aria-hidden="true"
+                      />
+                      {{ field.label }}
+                    </span>
+                  </a>
+                </dt>
                 <component :is="field.component" v-bind="field.props" />
               </div>
             </dl>

From f0deb86ddc8a0c54cda4df41d59c60ff152afa92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Palancher?= <remi@rackslab.io>
Date: Fri, 8 Nov 2024 19:08:21 +0100
Subject: [PATCH 3/3] tests(front): test highlighted job field

Also update div ids in exiting test to match new anchors names.
---
 frontend/tests/views/JobView.spec.ts | 41 ++++++++++++++++++++++------
 frontend/tests/views/common.ts       |  3 +-
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/frontend/tests/views/JobView.spec.ts b/frontend/tests/views/JobView.spec.ts
index 299779f7..ca70a245 100644
--- a/frontend/tests/views/JobView.spec.ts
+++ b/frontend/tests/views/JobView.spec.ts
@@ -1,9 +1,12 @@
+import { ref, nextTick } from 'vue'
 import { describe, test, expect, beforeEach, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { useRuntimeStore } from '@/stores/runtime'
 import JobView from '@/views/JobView.vue'
 import { init_plugins, getMockClusterDataPoller } from './common'
 import type { ClusterIndividualJob } from '@/composables/GatewayAPI'
 import jobRunning from '../assets/job-running.json'
+import type { RouterMock } from 'vue-router-mock'
 
 const mockClusterDataPoller = getMockClusterDataPoller<ClusterIndividualJob>()
 
@@ -11,9 +14,14 @@ vi.mock('@/composables/DataPoller', () => ({
   useClusterDataPoller: () => mockClusterDataPoller
 }))
 
+let router: RouterMock
+
 describe('JobView.vue', () => {
   beforeEach(() => {
-    init_plugins()
+    router = init_plugins()
+    useRuntimeStore().availableClusters = [
+      { name: 'foo', permissions: { roles: [], actions: [] }, infrastructure: 'foo', metrics: true }
+    ]
   })
   test('display job details', () => {
     mockClusterDataPoller.data.value = jobRunning
@@ -24,13 +32,28 @@ describe('JobView.vue', () => {
       }
     })
     // Check some jobs fields
-    expect(wrapper.get('dl div#job-user dd').text()).toBe(jobRunning.user)
-    expect(wrapper.get('dl div#job-group dd').text()).toBe(jobRunning.group)
-    expect(wrapper.get('dl div#job-account dd').text()).toBe(jobRunning.association.account)
-    expect(wrapper.get('dl div#job-priority dd').text()).toBe(jobRunning.priority.number.toString())
-    expect(wrapper.get('dl div#job-workdir dd').text()).toBe(jobRunning.working_directory)
-    expect(wrapper.get('dl div#job-nodes dd').text()).toBe(jobRunning.nodes)
-    expect(wrapper.get('dl div#job-partition dd').text()).toBe(jobRunning.partition)
-    expect(wrapper.get('dl div#job-qos dd').text()).toBe(jobRunning.qos)
+    expect(wrapper.get('dl div#user dd').text()).toBe(jobRunning.user)
+    expect(wrapper.get('dl div#group dd').text()).toBe(jobRunning.group)
+    expect(wrapper.get('dl div#account dd').text()).toBe(jobRunning.association.account)
+    expect(wrapper.get('dl div#priority dd').text()).toBe(jobRunning.priority.number.toString())
+    expect(wrapper.get('dl div#workdir dd').text()).toBe(jobRunning.working_directory)
+    expect(wrapper.get('dl div#nodes dd').text()).toBe(jobRunning.nodes)
+    expect(wrapper.get('dl div#partition dd').text()).toBe(jobRunning.partition)
+    expect(wrapper.get('dl div#qos dd').text()).toBe(jobRunning.qos)
+  })
+  test('highlight job field in route hash', async () => {
+    await router.setHash('#user')
+    mockClusterDataPoller.data.value = jobRunning
+    const wrapper = mount(JobView, {
+      props: {
+        cluster: 'foo',
+        id: 1234
+      }
+    })
+    await nextTick()
+    // Check user field is highlighted with specific background color due to
+    // #user hash in route while group field is not highlighted.
+    expect(wrapper.get('dl div#user').classes('bg-slurmweb-light')).toBe(true)
+    expect(wrapper.get('dl div#group').classes('bg-slurmweb-light')).toBe(false)
   })
 })
diff --git a/frontend/tests/views/common.ts b/frontend/tests/views/common.ts
index 27f8f517..139d349b 100644
--- a/frontend/tests/views/common.ts
+++ b/frontend/tests/views/common.ts
@@ -7,8 +7,9 @@ import { httpPlugin } from '@/plugins/http'
 import { createTestingPinia } from '@pinia/testing'
 import { config, RouterLinkStub } from '@vue/test-utils'
 import { createRouterMock, injectRouterMock } from 'vue-router-mock'
+import type { RouterMock } from 'vue-router-mock'
 
-export function init_plugins() {
+export function init_plugins(): RouterMock {
   config.global.plugins = [
     [
       runtimeConfiguration,