Anchors to highlight job fields

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.

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>

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>

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>

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>

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