Skip to content

Commit

Permalink
refactor(front): iterate over array of job fields
Browse files Browse the repository at this point in the history
Iterate over a computed array of job fields in job view, with tiny
subcomponents to represent the values.
  • Loading branch information
rezib committed Nov 11, 2024
1 parent 2889297 commit 4ff5234
Show file tree
Hide file tree
Showing 6 changed files with 200 additions and 124 deletions.
29 changes: 29 additions & 0 deletions frontend/src/components/job/JobFieldComment.vue
Original file line number Diff line number Diff line change
@@ -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>
25 changes: 25 additions & 0 deletions frontend/src/components/job/JobFieldExitCode.vue
Original file line number Diff line number Diff line change
@@ -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>
30 changes: 30 additions & 0 deletions frontend/src/components/job/JobFieldRaw.vue
Original file line number Diff line number Diff line change
@@ -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>
27 changes: 27 additions & 0 deletions frontend/src/components/job/JobFieldTRES.vue
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 7 additions & 1 deletion frontend/src/composables/GatewayAPI.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
205 changes: 82 additions & 123 deletions frontend/src/views/JobView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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: {
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 4ff5234

Please sign in to comment.