Updating UI
This commit is contained in:
Kinesin Data Technologies Incorporated
parent
e711b3249b
commit
2e89c1bac2
@@ -5,6 +5,7 @@
|
|||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="https://unpkg.com/timelines-chart"></script>
|
<script src="https://unpkg.com/timelines-chart"></script>
|
||||||
|
<link rel="stylesheet" href="/waterfall.css">
|
||||||
<title>Waterfall</title>
|
<title>Waterfall</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -2,18 +2,6 @@
|
|||||||
--base-fontsize: 1.0rem;
|
--base-fontsize: 1.0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
--accent-bg: #F3F3F3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--accent-bg: #3F3F3F;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
+24
-14
@@ -1,29 +1,35 @@
|
|||||||
<script>
|
<script>
|
||||||
import RunExplorer from './components/RunExplorer.vue'
|
import Timeline from './components/Timeline.vue'
|
||||||
import GlobalSettings from './components/GlobalSettings.vue'
|
import GlobalSettings from './components/GlobalSettings.vue'
|
||||||
|
import SegmentDetails from './components/SegmentDetails.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
refreshSeconds: 15, // How often to refresh
|
refreshSeconds: 15, // How often to refresh
|
||||||
daggydURL: window.location.origin,
|
waterfallURL: 'http://localhost:2503',
|
||||||
|
activeSegment: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
updateURL(url) {
|
updateURL(url) {
|
||||||
this.daggydURL = url;
|
this.waterfallURL = url;
|
||||||
},
|
},
|
||||||
updateRefreshInterval(interval) {
|
updateRefreshInterval(interval) {
|
||||||
this.refreshSeconds = interval;
|
this.refreshSeconds = interval;
|
||||||
},
|
},
|
||||||
|
setActiveSegment(segment) {
|
||||||
|
this.activeSegment = segment;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
GlobalSettings,
|
GlobalSettings,
|
||||||
RunExplorer
|
Timeline,
|
||||||
}
|
SegmentDetails,
|
||||||
}
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -32,19 +38,23 @@ input { max-width: 25%; }
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="settings">
|
|
||||||
<GlobalSettings
|
<GlobalSettings
|
||||||
:daggydURL="daggydURL"
|
:waterfallURL="waterfallURL"
|
||||||
:refreshSeconds="refreshSeconds"
|
:refreshSeconds="refreshSeconds"
|
||||||
@update-refresh-interval="(interval) => this.updateRefreshInterval(interval)"
|
@update-refresh-interval="(interval) => this.updateRefreshInterval(interval)"
|
||||||
@update-daggyd-url="(url) => this.updateURL(url)"
|
@update-waterfall-url="(url) => this.updateURL(url)"
|
||||||
/>
|
/>
|
||||||
</div>
|
<br/>
|
||||||
<div id="explorer">
|
<div>
|
||||||
<RunExplorer
|
<Timeline
|
||||||
|
:waterfallURL="waterfallURL"
|
||||||
:refreshSeconds="refreshSeconds"
|
:refreshSeconds="refreshSeconds"
|
||||||
:daggydURL="daggydURL"
|
@update-active-segment="(segment) => this.setActiveSegment(segment)"
|
||||||
@new-active-run="(runID) => this.activeRunID = runID"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<br/>
|
||||||
|
<SegmentDetails
|
||||||
|
v-if="this.activeSegment !== null"
|
||||||
|
:activeSegment="activeSegment"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: ['refreshSeconds', 'daggydURL'],
|
props: ['refreshSeconds', 'waterfallURL'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
interval: this.refreshSeconds,
|
interval: this.refreshSeconds,
|
||||||
url: this.daggydURL,
|
url: this.waterfallURL,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
emits: ['update-refresh-interval', 'update-daggyd-url'],
|
emits: ['update-refresh-interval', 'update-waterfall-url'],
|
||||||
computed: {
|
computed: {
|
||||||
validRefreshIntervals() {
|
validRefreshIntervals() {
|
||||||
return [5, 10, 15, 30, 60, 300, 600];
|
return [5, 10, 15, 30, 60, 300, 600];
|
||||||
@@ -23,10 +23,11 @@ export default {
|
|||||||
<details>
|
<details>
|
||||||
<summary>Global Settings</summary>
|
<summary>Global Settings</summary>
|
||||||
<label>
|
<label>
|
||||||
Daggy Base URL
|
Waterfall Base URL
|
||||||
<input @change="$emit('update-daggyd-url', url)" v-model="url"/>
|
<input @change="$emit('update-waterfall-url', url)" v-model="url"/>
|
||||||
</label>
|
</label>
|
||||||
<label>Refresh Interval (seconds)
|
<label>
|
||||||
|
Refresh Interval (seconds)
|
||||||
<select @change="$emit('update-refresh-interval', interval)" v-model="interval">
|
<select @change="$emit('update-refresh-interval', interval)" v-model="interval">
|
||||||
<option v-for="interval in validRefreshIntervals"
|
<option v-for="interval in validRefreshIntervals"
|
||||||
:key="interval"
|
:key="interval"
|
||||||
|
|||||||
@@ -1,252 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { ALL_STATES } from '../defs.js'
|
|
||||||
|
|
||||||
import SortableTableHeader from './SortableTableHeader.vue';
|
|
||||||
import TaskDetails from './TaskDetails.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: ['daggydURL', 'refreshSeconds', 'activeRunID'],
|
|
||||||
components: { SortableTableHeader, TaskDetails },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
sortCol: 'lastUpdate',
|
|
||||||
sortAscending: false,
|
|
||||||
run: null,
|
|
||||||
activeTaskName: null,
|
|
||||||
filterStates: ALL_STATES.map((x) => x.name),
|
|
||||||
filterMinTime: 0,
|
|
||||||
filterMaxTime: 2000000000000000000,
|
|
||||||
filterRegex: '.*',
|
|
||||||
columns: [
|
|
||||||
{ name: 'name', title: 'Name', sortable: true },
|
|
||||||
{ name: 'state', title: 'State', sortable: true },
|
|
||||||
{ name: 'startTime', title: 'Last Update', sortable: true },
|
|
||||||
{ name: 'duration', title: 'Duration (s)', sortable: true },
|
|
||||||
{ name: 'attempts', title: '# of Attempts', sortable: true },
|
|
||||||
{ name: 'controls', title: 'Controls', sortable: false },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
refreshSeconds() {
|
|
||||||
this.fetchRun();
|
|
||||||
},
|
|
||||||
daggydURL() {
|
|
||||||
this.fetchRun();
|
|
||||||
},
|
|
||||||
activeRunID() {
|
|
||||||
this.fetchRun();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
tasks() {
|
|
||||||
if (this.run === null) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
const tasks = Object.keys(this.run.tasks)
|
|
||||||
.map((taskName) => {
|
|
||||||
let startTime = 0;
|
|
||||||
let stopTime = 0;
|
|
||||||
let duration = 0;
|
|
||||||
const attempts = (taskName in this.run.taskAttempts
|
|
||||||
? this.run.taskAttempts[taskName]
|
|
||||||
: []);
|
|
||||||
if (attempts.length > 0) {
|
|
||||||
const firstAttempt = attempts[0];
|
|
||||||
const lastAttempt = attempts[attempts.length - 1];
|
|
||||||
startTime = firstAttempt.startTime;
|
|
||||||
stopTime = lastAttempt.stopTime;
|
|
||||||
duration = lastAttempt.stopTime - firstAttempt.startTime;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
name: taskName,
|
|
||||||
state: this.run.taskStates[taskName],
|
|
||||||
startTime,
|
|
||||||
lastUpdate: stopTime,
|
|
||||||
attempts: attempts.length,
|
|
||||||
duration: (duration / 1e9).toFixed(2),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
return tasks
|
|
||||||
.filter(this.filter)
|
|
||||||
.sort(this.sorter);
|
|
||||||
},
|
|
||||||
allStates() {
|
|
||||||
return ALL_STATES;
|
|
||||||
},
|
|
||||||
activeTask() {
|
|
||||||
if (this.activeTaskName === null) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const name = this.activeTaskName;
|
|
||||||
const attempts = (name in this.run.taskAttempts ? this.run.taskAttempts[name] : []);
|
|
||||||
const augAttempts = attempts
|
|
||||||
.sort((a, b) => a.startTime - b.startTime)
|
|
||||||
.map((a, i) => {
|
|
||||||
a.id = i + 1;
|
|
||||||
return a;
|
|
||||||
});
|
|
||||||
const obj = {
|
|
||||||
name,
|
|
||||||
task: this.run.tasks[name],
|
|
||||||
attempts: augAttempts,
|
|
||||||
state: this.run.taskStates[name],
|
|
||||||
};
|
|
||||||
return obj;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
isNumeric(x) {
|
|
||||||
const p = parseFloat(x);
|
|
||||||
return !Number.isNaN(p) && Number.isFinite(p);
|
|
||||||
},
|
|
||||||
|
|
||||||
sorter(a, b) {
|
|
||||||
const aa = a[this.sortCol];
|
|
||||||
const bb = b[this.sortCol];
|
|
||||||
|
|
||||||
let ret = 0;
|
|
||||||
if (this.isNumeric(aa) && this.isNumeric(bb)) {
|
|
||||||
ret = aa - bb;
|
|
||||||
} else if (aa < bb) {
|
|
||||||
ret = -1;
|
|
||||||
} else if (bb === aa) {
|
|
||||||
ret = 0;
|
|
||||||
} else {
|
|
||||||
ret = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.sortAscending) {
|
|
||||||
ret *= -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return ret;
|
|
||||||
},
|
|
||||||
|
|
||||||
filter(task) {
|
|
||||||
const reFilter = new RegExp(this.filterRegex, '');
|
|
||||||
return (this.filterStates.indexOf(task.state) > -1)
|
|
||||||
&& (task.startTime >= this.filterMinTime)
|
|
||||||
&& (task.lastUpdate <= this.filterMaxTime)
|
|
||||||
&& (reFilter.test(task.name));
|
|
||||||
},
|
|
||||||
|
|
||||||
setSortCol(name) {
|
|
||||||
if (this.sortCol === name) {
|
|
||||||
this.sortAscending = !this.sortAscending;
|
|
||||||
} else {
|
|
||||||
this.sortCol = name;
|
|
||||||
this.sortAscending = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Root tags
|
|
||||||
// runID, tag, tasks, taskStates, taskAttempts
|
|
||||||
|
|
||||||
async fetchRun() {
|
|
||||||
if (this.activeRunID === null) { return; }
|
|
||||||
const resp = await fetch(`${this.daggydURL}/v1/dagrun/${this.activeRunID}`);
|
|
||||||
this.run = await resp.json();
|
|
||||||
},
|
|
||||||
|
|
||||||
killTask(taskName) {
|
|
||||||
fetch(`${this.daggydURL}/v1/dagrun/${this.activeRunID}/task/${taskName}`, { method: 'delete' });
|
|
||||||
},
|
|
||||||
|
|
||||||
retryTask(taskName) {
|
|
||||||
fetch(`${this.daggydURL}/v1/dagrun/${this.activeRunID}/task/${taskName}/state/QUEUED`, { method: 'patch' });
|
|
||||||
},
|
|
||||||
|
|
||||||
update() {
|
|
||||||
this.fetchRun();
|
|
||||||
setTimeout(() => {
|
|
||||||
this.update();
|
|
||||||
}, this.refreshSeconds * 1000);
|
|
||||||
},
|
|
||||||
setActiveTask(taskName) {
|
|
||||||
this.activeTaskName = taskName;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.update();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
input {
|
|
||||||
max-width: 25%;
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="run-view">
|
|
||||||
<TaskDetails :task="activeTask" />
|
|
||||||
<div id="run-view-filter">
|
|
||||||
<details>
|
|
||||||
<summary>Task Filter</summary>
|
|
||||||
<div>
|
|
||||||
<label>
|
|
||||||
Min Time
|
|
||||||
<input v-model.lazy="filterMinTime"/>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Max Time
|
|
||||||
<input v-model.lazy="filterMaxTime"/>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Task Name Regex
|
|
||||||
<input v-model.lazy="filterRegex"/>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label v-for="state in allStates" :key="state.name">
|
|
||||||
{{ state.display }}
|
|
||||||
<input type="checkbox" :value="state.name" v-model="filterStates">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
<div id="run-view-data">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th v-for="col in columns" :key="col.name">
|
|
||||||
<SortableTableHeader
|
|
||||||
:title="col.title"
|
|
||||||
:sorted="col.name == this.sortCol"
|
|
||||||
:ascending="sortAscending"
|
|
||||||
:sortable="col.sortable"
|
|
||||||
@update-sort-column="setSortCol(col.name)"
|
|
||||||
/>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="task in tasks" :key="task.name">
|
|
||||||
<td>{{task.name}}</td>
|
|
||||||
<td>{{task.state}}</td>
|
|
||||||
<td>{{task.startTime}}</td>
|
|
||||||
<td>{{task.duration}}</td>
|
|
||||||
<td>{{task.attempts}}</td>
|
|
||||||
<td>
|
|
||||||
<img class='svgicon'
|
|
||||||
src='/icon-search.svg'
|
|
||||||
@click="setActiveTask(task.name)"/>
|
|
||||||
<img class='svgicon' src='/icon-trash.svg' @click="killTask(task.name)"/>
|
|
||||||
<img class='svgicon' src='/icon-launch.svg' @click="retryTask(task.name)"/>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
<script>
|
|
||||||
import RunList from './RunList.vue';
|
|
||||||
import RunDetails from './RunDetails.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: ['refreshSeconds', 'daggydURL'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeRunID: null,
|
|
||||||
activeTaskName: null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
RunList,
|
|
||||||
RunDetails,
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setActiveRunID(runID) {
|
|
||||||
this.activeRunID = runID;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div id="explorer">
|
|
||||||
<RunList
|
|
||||||
:daggydURL="daggydURL"
|
|
||||||
:refreshSeconds="refreshSeconds"
|
|
||||||
@update-active-runid="(runID) => setActiveRunID(runID)"
|
|
||||||
/>
|
|
||||||
<RunDetails
|
|
||||||
:daggydURL="daggydURL"
|
|
||||||
:refreshSeconds="refreshSeconds"
|
|
||||||
:activeRunID="activeRunID"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,220 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { ALL_STATES, defaultCountHandler } from '../defs.js'
|
|
||||||
|
|
||||||
import SortableTableHeader from './SortableTableHeader.vue';
|
|
||||||
|
|
||||||
// import SortIndicator from './SortIndicator.vue';
|
|
||||||
// import RunButton from './RunButton.vue';
|
|
||||||
// components: { RunButton, SortIndicator },
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: ['daggydURL', 'refreshSeconds'],
|
|
||||||
components: { SortableTableHeader },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
sortCol: 'lastUpdate', // Which column to sort view on
|
|
||||||
sortAscending: false,
|
|
||||||
runs: [],
|
|
||||||
filterStates: ALL_STATES.map((x) => x.name),
|
|
||||||
filterMinTime: 0,
|
|
||||||
filterMaxTime: 2000000000000000000,
|
|
||||||
filterRegex: '.*',
|
|
||||||
columns: [
|
|
||||||
{ name: 'runID', title: 'Run ID', sortable: true },
|
|
||||||
{ name: 'tag', title: 'Tag', sortable: true },
|
|
||||||
{ name: 'state', title: 'State', sortable: true },
|
|
||||||
{ name: 'progress', title: 'Progress', sortable: true },
|
|
||||||
{ name: 'startTime', title: 'Start Time', sortable: true },
|
|
||||||
{ name: 'lastUpdate', title: 'LastUpdate', sortable: true },
|
|
||||||
{ name: 'queued', title: 'Queued', sortable: true },
|
|
||||||
{ name: 'running', title: 'Running', sortable: true },
|
|
||||||
{ name: 'errored', title: 'Errored', sortable: true },
|
|
||||||
{ name: 'completed', title: 'Completed', sortable: true },
|
|
||||||
{ name: 'controls', title: 'Controls', sortable: false },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
runList() {
|
|
||||||
return this.runs
|
|
||||||
.filter((run) => this.runFilter(run))
|
|
||||||
.map((r) => {
|
|
||||||
const run = r;
|
|
||||||
run.nTasks = Object
|
|
||||||
.values(run.taskCounts)
|
|
||||||
.reduce((prev, cur) => prev + cur, 0);
|
|
||||||
run.task_states = new Proxy(run.taskCounts, defaultCountHandler);
|
|
||||||
run.progress = run.task_states.COMPLETED / run.nTasks;
|
|
||||||
return run;
|
|
||||||
})
|
|
||||||
.sort((a, b) => this.sorter(a, b));
|
|
||||||
},
|
|
||||||
allStates() {
|
|
||||||
return ALL_STATES;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
refreshSeconds() {
|
|
||||||
this.fetchRuns();
|
|
||||||
},
|
|
||||||
daggydURL() {
|
|
||||||
this.fetchRuns();
|
|
||||||
},
|
|
||||||
activeRunID() {
|
|
||||||
this.fetchRuns();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
isNumeric(x) {
|
|
||||||
const p = parseFloat(x);
|
|
||||||
return !Number.isNaN(p) && Number.isFinite(p);
|
|
||||||
},
|
|
||||||
|
|
||||||
sorter(a, b) {
|
|
||||||
const aa = a[this.sortCol];
|
|
||||||
const bb = b[this.sortCol];
|
|
||||||
|
|
||||||
let ret = 0;
|
|
||||||
if (this.isNumeric(aa) && this.isNumeric(bb)) {
|
|
||||||
ret = aa - bb;
|
|
||||||
} else if (aa < bb) {
|
|
||||||
ret = -1;
|
|
||||||
} else if (bb === aa) {
|
|
||||||
ret = 0;
|
|
||||||
} else {
|
|
||||||
ret = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.sortAscending) {
|
|
||||||
ret *= -1;
|
|
||||||
}
|
|
||||||
return ret;
|
|
||||||
},
|
|
||||||
|
|
||||||
runFilter(run) {
|
|
||||||
const reFilter = new RegExp(this.filterRegex, '');
|
|
||||||
return (this.filterStates.indexOf(run.state) > -1)
|
|
||||||
&& (run.startTime >= this.filterMinTime)
|
|
||||||
&& (run.lastUpdate <= this.filterMaxTime)
|
|
||||||
&& (reFilter.test(run.tag));
|
|
||||||
},
|
|
||||||
|
|
||||||
setSortCol(name) {
|
|
||||||
if (this.sortCol === name) {
|
|
||||||
this.sortAscending = !this.sortAscending;
|
|
||||||
} else {
|
|
||||||
this.sortCol = name;
|
|
||||||
this.sortAscending = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
killRun(runID) {
|
|
||||||
fetch(`${this.daggydURL}/v1/dagrun/${runID}`, { method: 'delete' });
|
|
||||||
},
|
|
||||||
|
|
||||||
retryRun(runID) {
|
|
||||||
fetch(`${this.daggydURL}/v1/dagrun/${runID}/state/QUEUED`, { method: 'patch' });
|
|
||||||
},
|
|
||||||
|
|
||||||
async fetchRuns() {
|
|
||||||
const res = await fetch(`${this.daggydURL}/v1/dagruns?all=1`);
|
|
||||||
this.runs = await res.json();
|
|
||||||
},
|
|
||||||
|
|
||||||
update() {
|
|
||||||
this.fetchRuns();
|
|
||||||
setTimeout(() => {
|
|
||||||
this.update();
|
|
||||||
}, this.refreshSeconds * 1000);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.update();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div id="run-list">
|
|
||||||
<div id="run-list-filter">
|
|
||||||
<details>
|
|
||||||
<summary>Run Filter</summary>
|
|
||||||
<div>
|
|
||||||
<label>
|
|
||||||
Start Time
|
|
||||||
<input v-model.lazy="filterMinTime"/>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Time
|
|
||||||
<input v-model.lazy="filterMaxTime"/>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Task Name Regex
|
|
||||||
<input v-model.lazy="filterRegex"/>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label v-for="state in allStates" :key="state.name">
|
|
||||||
{{ state.display }}
|
|
||||||
<input type="checkbox" :value="state.name" v-model="filterStates">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
<div id="run-list-data">
|
|
||||||
<table class="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th v-for="col in columns" :key="col.name">
|
|
||||||
<SortableTableHeader
|
|
||||||
:title="col.title"
|
|
||||||
:sorted="col.name == this.sortCol"
|
|
||||||
:ascending="sortAscending"
|
|
||||||
:sortable="col.sortable"
|
|
||||||
@update-sort-column="setSortCol(col.name)"
|
|
||||||
/>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="run in runList" :key="run.runID">
|
|
||||||
<td>{{run.runID}}</td>
|
|
||||||
<td>{{run.tag}}</td>
|
|
||||||
<td>{{run.state}}</td>
|
|
||||||
<td><progress :value="run.progress"></progress></td>
|
|
||||||
<td>{{run.startTime}}</td>
|
|
||||||
<td>{{run.lastUpdate}}</td>
|
|
||||||
<td>{{run.task_states["QUEUED"]}}</td>
|
|
||||||
<td>{{run.task_states["RUNNING"]}}</td>
|
|
||||||
<td>{{run.task_states["ERRORED"]}}</td>
|
|
||||||
<td>{{run.task_states["COMPLETED"]}}</td>
|
|
||||||
<td>
|
|
||||||
<a href="#">
|
|
||||||
<img
|
|
||||||
class='svgicon'
|
|
||||||
src='/icon-search.svg'
|
|
||||||
@click="$emit('update-active-runid', run.runID)"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class='svgicon' src='/icon-trash.svg' @click="killRun(run.runID)"/>
|
|
||||||
</a>
|
|
||||||
<a href="#">
|
|
||||||
<img class='svgicon' src='/icon-launch.svg' @click="retryRun(run.runID)"/>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.svgicon {
|
|
||||||
height: 1em;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['activeSegment']
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="segment-details" v-if="activeSegment !== null">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Resource</th>
|
||||||
|
<th>Task Name</th>
|
||||||
|
<th>Interval</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>{{activeSegment.group}}</td>
|
||||||
|
<td>{{activeSegment.label}}</td>
|
||||||
|
<td>{{activeSegment.timeRange}}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.svgicon {
|
||||||
|
height: 1em;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: ['title', 'sorted', 'ascending', 'sortable'],
|
|
||||||
emits: ['update-sort-column'],
|
|
||||||
computed: {
|
|
||||||
src() {
|
|
||||||
let loc = '/icon-';
|
|
||||||
if (this.sorted) {
|
|
||||||
if (this.ascending) {
|
|
||||||
loc += 'sort-ascending';
|
|
||||||
} else {
|
|
||||||
loc += 'sort-decending';
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
loc += 'order-vertical';
|
|
||||||
}
|
|
||||||
loc += '.svg';
|
|
||||||
return loc;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.svgicon {
|
|
||||||
height: 1em;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
{{ title }}
|
|
||||||
<a href="#">
|
|
||||||
<img
|
|
||||||
v-if="sortable"
|
|
||||||
class='svgicon'
|
|
||||||
:src="src"
|
|
||||||
:alt="title"
|
|
||||||
@click="$emit('update-sort-column')"/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: ['task'],
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div id="task-details" v-if="task !== null">
|
|
||||||
<details open>
|
|
||||||
<summary>Task Details for {{ task.name }}</summary>
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<td>{{ task.name }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>State</th>
|
|
||||||
<td>{{ task.state }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>Definition</th>
|
|
||||||
<td><pre>{{ JSON.stringify(task.task, null, 2) }}</pre></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<details v-for="attempt in task.attempts" :key="attempt.id" open>
|
|
||||||
<summary>Attempt {{attempt.id}}</summary>
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th>Start Time</th>
|
|
||||||
<td>{{ attempt.startTime }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>Stop Time</th>
|
|
||||||
<td>{{ attempt.stopTime }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>Return Code</th>
|
|
||||||
<td>{{ attempt.rc }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>Standard Out</th>
|
|
||||||
<td><pre>{{ attempt.outputLog }}</pre></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>Standard Error</th>
|
|
||||||
<td><pre>{{ attempt.errorLog }}</pre></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>Executor Log</th>
|
|
||||||
<td><pre>{{ attempt.ExecutorLog }}</pre></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</details>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
<script>
|
||||||
|
// import TimelinesChart from 'timelines-chart';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: ['waterfallURL', 'refreshSeconds'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
data: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
refreshSeconds() {
|
||||||
|
this.fetchTimeline();
|
||||||
|
},
|
||||||
|
waterfallURL() {
|
||||||
|
this.fetchTimeline();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
async fetchTimeline() {
|
||||||
|
fetch(`${this.waterfallURL}/api/v1/details`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: '{ "start": "2021-09-01T00:00:00Z", "end": "2022-10-01T00:00:00Z" }'
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network response was not OK');
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((payload) => {
|
||||||
|
payload.map((group) => {
|
||||||
|
Object.values(group.data).map((label) => {
|
||||||
|
label.data.map((interval) => {
|
||||||
|
interval.timeRange = interval.timeRange.map((t) => new Date(t));
|
||||||
|
})
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.data = payload;
|
||||||
|
this.chart.data(payload);
|
||||||
|
})
|
||||||
|
.catch(err => { throw err });
|
||||||
|
},
|
||||||
|
|
||||||
|
update() {
|
||||||
|
this.fetchTimeline();
|
||||||
|
setTimeout(() => {
|
||||||
|
this.update();
|
||||||
|
}, this.refreshSeconds * 1000);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.chart = TimelinesChart()(document.getElementById("timeline-graph"))
|
||||||
|
.timeFormat("%Y-%m-%dT%H:%M:%S.%LZ") // ISO 8601 format
|
||||||
|
.zScaleLabel('State')
|
||||||
|
.zQualitative(true)
|
||||||
|
.useUtc(false)
|
||||||
|
.onSegmentClick((segment) => this.$emit('updateActiveSegment', segment) );
|
||||||
|
this.update();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="timeline-graph"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.svgicon {
|
||||||
|
height: 1em;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Reference in New Issue
Block a user