Commit 499b4222 authored by Dillenn Terumalai's avatar Dillenn Terumalai
Browse files

// WIP

parent 4e7a1c47
This diff is collapsed.
{
"/app.js": "/app.js?id=6150589d40b63358ac09",
"/app.js": "/app.js?id=a66f629a1c03465b6e5a",
"/img/favicon.ico": "/img/favicon.ico?id=ddf9962d2b7fa394e573"
}
<template>
<v-app id="slurm-cluster">
<v-app id="cluster">
<v-app-bar
app
color="transparent"
......@@ -69,7 +69,7 @@
v-for="(link,index) in links"
:key="index"
link
@click="$inertia.get(link.route)"
@click="$router.push({ name: link.route })"
>
<v-list-item-icon class="mr-3">
<v-icon :color="route().current(link.route) ? 'primary' : 'grey'">
......@@ -86,7 +86,7 @@
</v-col>
<v-col>
<slot></slot>
<router-view></router-view>
</v-col>
</v-row>
</v-container>
......@@ -104,37 +104,37 @@ export default class ClusterLayout extends Vue {
{
label: 'Dashboard',
icon: 'mdi-home',
route: 'cluster.dashboard'
route: 'dashboard'
},
{
label: 'Queue',
icon: 'mdi-tray-full',
route: 'cluster.queue'
route: 'queue'
},
{
label: 'Inspector',
icon: 'mdi-magnify',
route: 'cluster.inspector'
route: 'inspector'
},
{
label: 'Pending Jobs',
icon: 'mdi-pause-circle-outline',
route: 'cluster.pending'
route: 'pending-jobs'
},
{
label: 'Completed Jobs',
icon: 'mdi-check-circle-outline',
route: 'cluster.completed'
route: 'completed-jobs'
},
{
label: 'Failed Jobs',
icon: 'mdi-close-circle-outline',
route: 'cluster.failed'
route: 'failed-jobs'
},
{
label: 'Cancelled Jobs',
icon: 'mdi-delete-circle-outline',
route: 'cluster.cancelled'
route: 'cancelled-jobs'
}
]
}
......
<template>
<cluster-layout>
<v-card>
<v-card-title>
<p class="text-h6 mb-0">Cancelled Jobs</p>
</v-card-title>
<v-card-text class="px-0 pb-0">
<div v-if="!items.length" class="pa-15 text-center grey lighten-5 black--text">
There aren't any jobs.
</div>
<v-data-table
v-if="items.length"
:headers="headers"
:items="items"
:loading="isLoading"
hide-default-footer
<v-card>
<v-card-title>
<p class="text-h6 mb-0">Cancelled Jobs</p>
</v-card-title>
<v-card-text class="px-0 pb-0">
<div v-if="!items.length" class="pa-15 text-center grey lighten-5 black--text">
There aren't any jobs.
</div>
<v-data-table
v-if="items.length"
:headers="headers"
:items="items"
:loading="isLoading"
hide-default-footer
>
<template
v-slot:item.job="{ item }"
>
<template
v-slot:item.job="{ item }"
>
<div class="pa-3">
<a class="primary--text text-subtitle-1"
@click="$router.push({ name: 'cancelled-job-detail', params: {id: item.id}})">{{
item.job_name.toUpperCase()
}}</a>
<p class="text-caption grey--text text--darken-1 mb-0">Partition: {{ item.partition }} | ID:
{{ item.id }}</p>
</div>
</template>
</v-data-table>
</v-card-text>
</v-card>
</cluster-layout>
<div class="pa-3">
<a class="primary--text text-subtitle-1"
@click="$router.push({ name: 'cancelled-job-detail', params: {id: item.id}})">{{
item.job_name.toUpperCase()
}}</a>
<p class="text-caption grey--text text--darken-1 mb-0">Partition: {{ item.partition }} | ID:
{{ item.id }}</p>
</div>
</template>
</v-data-table>
</v-card-text>
</v-card>
</template>
<script lang="ts">
import 'reflect-metadata'
import {Component, Vue} from 'vue-property-decorator'
import ClusterLayout from '@/Layouts/ClusterLayout.vue'
@Component({
components: {ClusterLayout}
})
@Component
export default class CancelledJobs extends Vue {
isLoading: boolean = false
......
<template>
<cluster-layout>
<v-card>
<v-card-title>
<p class="text-h6 mb-0">Completed Jobs</p>
</v-card-title>
<v-card-text class="px-0 pb-0">
<div v-if="!items.length" class="pa-15 text-center grey lighten-5 black--text">
There aren't any jobs.
</div>
<v-data-table
v-if="items.length"
:headers="headers"
:items="items"
:loading="isLoading"
hide-default-footer
<v-card>
<v-card-title>
<p class="text-h6 mb-0">Completed Jobs</p>
</v-card-title>
<v-card-text class="px-0 pb-0">
<div v-if="!items.length" class="pa-15 text-center grey lighten-5 black--text">
There aren't any jobs.
</div>
<v-data-table
v-if="items.length"
:headers="headers"
:items="items"
:loading="isLoading"
hide-default-footer
>
<template
v-slot:item.job="{ item }"
>
<template
v-slot:item.job="{ item }"
>
<div class="pa-3">
<a class="primary--text text-subtitle-1" @click="$router.push({ name: 'completed-job-detail', params: {id: item.id}})">{{
item.job_name.toUpperCase()
}}</a>
<p class="text-caption grey--text text--darken-1 mb-0">Partition: {{ item.partition }} | ID:
{{ item.id }}</p>
</div>
</template>
</v-data-table>
</v-card-text>
</v-card>
</cluster-layout>
<div class="pa-3">
<a class="primary--text text-subtitle-1" @click="$router.push({ name: 'completed-job-detail', params: {id: item.id}})">{{
item.job_name.toUpperCase()
}}</a>
<p class="text-caption grey--text text--darken-1 mb-0">Partition: {{ item.partition }} | ID:
{{ item.id }}</p>
</div>
</template>
</v-data-table>
</v-card-text>
</v-card>
</template>
<script lang="ts">
import 'reflect-metadata'
import { Component, Prop, Vue } from 'vue-property-decorator'
import ClusterLayout from '@/Layouts/ClusterLayout.vue'
import {Component, Vue} from 'vue-property-decorator'
@Component({
components: { ClusterLayout }
})
@Component
export default class CompletedJobs extends Vue {
isLoading: boolean = false
......
<template>
<cluster-layout>
<div>
<v-card class="mb-10">
<v-card-title>
<p class="text-h6 mb-0">Overview</p>
......@@ -49,17 +49,14 @@
></v-data-table>
</v-card-text>
</v-card>
</cluster-layout>
</div>
</template>
<script lang="ts">
import 'reflect-metadata'
import {Component, Vue} from 'vue-property-decorator'
import ClusterLayout from '@/Layouts/ClusterLayout.vue'
@Component({
components: { ClusterLayout }
})
@Component
export default class Dashboard extends Vue {
isLoading: boolean = false
......
<template>
<cluster-layout>
<v-card>
<v-card-title>
<p class="text-h6 mb-0">Failed Jobs</p>
</v-card-title>
<v-card-text class="px-0 pb-0">
<div v-if="!items.length" class="pa-15 text-center grey lighten-5 black--text">
There aren't any jobs.
</div>
<v-data-table
v-if="items.length"
:headers="headers"
:items="items"
:loading="isLoading"
hide-default-footer
<v-card>
<v-card-title>
<p class="text-h6 mb-0">Failed Jobs</p>
</v-card-title>
<v-card-text class="px-0 pb-0">
<div v-if="!items.length" class="pa-15 text-center grey lighten-5 black--text">
There aren't any jobs.
</div>
<v-data-table
v-if="items.length"
:headers="headers"
:items="items"
:loading="isLoading"
hide-default-footer
>
<template
v-slot:item.job="{ item }"
>
<template
v-slot:item.job="{ item }"
>
<div class="pa-3">
<a class="primary--text text-subtitle-1" @click="$router.push({ name: 'failed-job-detail', params: {id: item.id}})">{{
item.job_name.toUpperCase()
}}</a>
<p class="text-caption grey--text text--darken-1 mb-0">Partition: {{ item.partition }} | ID:
{{ item.id }}</p>
</div>
</template>
</v-data-table>
</v-card-text>
</v-card>
</cluster-layout>
<div class="pa-3">
<a class="primary--text text-subtitle-1" @click="$router.push({ name: 'failed-job-detail', params: {id: item.id}})">{{
item.job_name.toUpperCase()
}}</a>
<p class="text-caption grey--text text--darken-1 mb-0">Partition: {{ item.partition }} | ID:
{{ item.id }}</p>
</div>
</template>
</v-data-table>
</v-card-text>
</v-card>
</template>
<script lang="ts">
import 'reflect-metadata'
import { Component, Prop, Vue } from 'vue-property-decorator'
import ClusterLayout from '@/Layouts/ClusterLayout.vue'
import {Component, Vue} from 'vue-property-decorator'
@Component({
components: { ClusterLayout }
})
@Component
export default class FailedJobs extends Vue {
isLoading: boolean = false
......
<template>
<cluster-layout>
<v-card class="mb-10" :loading="isLoading">
<v-card-title>
<p class="text-h6 mb-0">Inspector</p>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-text-field v-model="jobId" placeholder="Type job ID..." hide-details outlined dense></v-text-field>
<v-btn class="ml-3" color="primary" depressed @click="inspect()">Inspect</v-btn>
</v-card-title>
<v-card-text class="px-0 pb-0">
<v-sheet color="black" dark class="pa-5">
<p class="format-text text-subtitle-1 font-weight-medium formatted-output">{{
formattedInformation
}}</p>
</v-sheet>
</v-card-text>
</v-card>
</cluster-layout>
<v-card class="mb-10" :loading="isLoading">
<v-card-title>
<p class="text-h6 mb-0">Inspector</p>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-text-field v-model="jobId" placeholder="Type job ID..." hide-details outlined dense></v-text-field>
<v-btn class="ml-3" color="primary" depressed @click="inspect()">Inspect</v-btn>
</v-card-title>
<v-card-text class="px-0 pb-0">
<v-sheet color="black" dark class="pa-5">
<p class="format-text text-subtitle-1 font-weight-medium formatted-output">{{
formattedInformation
}}</p>
</v-sheet>
</v-card-text>
</v-card>
</template>
<script lang="ts">
import 'reflect-metadata'
import {Component, Prop, Vue} from 'vue-property-decorator'
import ClusterLayout from '@/Layouts/ClusterLayout.vue'
import {Component, Vue} from 'vue-property-decorator'
@Component({
components: {ClusterLayout}
})
@Component
export default class Inspector extends Vue {
isLoading: boolean = false
......
<template>
<cluster-layout>
<v-card>
<v-card-title>
<p class="text-h6 mb-0">Pending Jobs</p>
</v-card-title>
<v-card-text class="px-0 pb-0">
<div v-if="!items.length" class="pa-15 text-center grey lighten-5 black--text">
There aren't any jobs.
</div>
<v-data-table
v-if="items.length"
:headers="headers"
:items="items"
hide-default-footer
<v-card>
<v-card-title>
<p class="text-h6 mb-0">Pending Jobs</p>
</v-card-title>
<v-card-text class="px-0 pb-0">
<div v-if="!items.length" class="pa-15 text-center grey lighten-5 black--text">
There aren't any jobs.
</div>
<v-data-table
v-if="items.length"
:headers="headers"
:items="items"
hide-default-footer
>
<template
v-slot:item.job="{ item }"
>
<template
v-slot:item.job="{ item }"
>
<div class="pa-3">
<a class="primary--text text-subtitle-1" @click="$router.push({ name: 'pending-job-detail', params: {id: item.id}})">{{
item.job_name.toUpperCase()
}}</a>
<p class="text-caption grey--text text--darken-1 mb-0">Partition: {{ item.partition }} | ID: {{ item.id }}</p>
</div>
</template>
</v-data-table>
</v-card-text>
</v-card>
</cluster-layout>
<div class="pa-3">
<a class="primary--text text-subtitle-1" @click="$router.push({ name: 'pending-job-detail', params: {id: item.id}})">{{
item.job_name.toUpperCase()
}}</a>
<p class="text-caption grey--text text--darken-1 mb-0">Partition: {{ item.partition }} | ID: {{ item.id }}</p>
</div>
</template>
</v-data-table>
</v-card-text>
</v-card>
</template>
<script lang="ts">
import 'reflect-metadata'
import { Component, Vue } from 'vue-property-decorator'
import ClusterLayout from '@/Layouts/ClusterLayout.vue'
import {Component, Vue} from 'vue-property-decorator'
@Component({
components: { ClusterLayout }
})
@Component
export default class PendingJobs extends Vue {
isLoading: boolean = false
......
<template>
<cluster-layout>
<v-card>
<v-card-title>
<p class="text-h6 mb-0">Queue</p>
</v-card-title>
<v-card-text class="px-0 pb-0">
<v-data-table
:headers="headers"
:items="queues"
:loading="isLoading"
hide-default-footer
></v-data-table>
</v-card-text>
</v-card>
</cluster-layout>
<v-card>
<v-card-title>
<p class="text-h6 mb-0">Queue</p>
</v-card-title>
<v-card-text class="px-0 pb-0">
<v-data-table
:headers="headers"
:items="queues"
:loading="isLoading"
hide-default-footer
></v-data-table>
</v-card-text>
</v-card>
</template>
<script lang="ts">
import 'reflect-metadata'
import { Component, Vue } from 'vue-property-decorator'
import ClusterLayout from '@/Layouts/ClusterLayout.vue'
import {Component, Vue} from 'vue-property-decorator'
@Component({
components: { ClusterLayout }
})
@Component
export default class Queue extends Vue {
isLoading: boolean = false
......
<template>
<cluster-layout>
<div>
<v-card class="mb-10" :loading="isLoading">
<v-card-title>
<p class="text-h6 mb-0">{{ job.job_name }}</p>
......@@ -34,17 +34,14 @@
</v-sheet>
</v-card-text>
</v-card>
</cluster-layout>
</div>
</template>
<script lang="ts">
import 'reflect-metadata'
import { Component, Prop, Vue } from 'vue-property-decorator'
import ClusterLayout from '@/Layouts/ClusterLayout.vue'
import {Component, Vue} from 'vue-property-decorator'
@Component({
components: { ClusterLayout }
})
@Component
export default class ShowCancelledJob extends Vue {
isLoading: boolean = false
......
<template>
<cluster-layout>
<div>
<v-card class="mb-10" :loading="isLoading">
<v-card-title>
<p class="text-h6 mb-0">{{ job.job_name }}</p>
......@@ -71,18 +71,15 @@
></v-data-table>
</v-card-text>
</v-card>
</cluster-layout>
</div>
</template>
<script lang="ts">
import 'reflect-metadata'
import { Component, Vue } from 'vue-property-decorator'
import ClusterLayout from '@/Layouts/ClusterLayout.vue'
import { DataTableHeader } from 'vuetify'
import {Component, Vue} from 'vue-property-decorator'
import {DataTableHeader} from 'vuetify'
@Component({
components: { ClusterLayout }
})
@Component
export default class ShowCompletedJob extends Vue {
isLoading: boolean = false
......
<template>
<cluster-layout>
<div>
<v-card class="mb-10">
<v-card-title>
<p class="text-h6 mb-0">{{ job.job_name }}</p>
......@@ -68,17 +68,14 @@
</v-sheet>
</v-card-text>
</v-card>
</cluster-layout>
</div>
</template>
<script lang="ts">
import 'reflect-metadata'
import { Component, Vue } from 'vue-property-decorator'
import ClusterLayout from '@/Layouts/ClusterLayout.vue'
import {Component, Vue} from 'vue-property-decorator'
@Component({
components: { ClusterLayout }
})
@Component
export default class ShowFailedJob extends Vue {
isLoading: boolean = false
......
<template>
<cluster-layout>
<div>
<v-card class="mb-10">
<v-card-title>
<p class="text-h6 mb-0">{{ job.job_name }}</p>
......@@ -32,17 +32,14 @@
</v-sheet>
</v-card-text>
</v-card>