Adding vue copy/paste from daggy
This commit is contained in:
Kinesin Data Technologies Incorporated
parent
6b49038db6
commit
e711b3249b
@@ -17,6 +17,7 @@ impl TaskSet {
|
|||||||
pub fn validate(&self) -> Result<()> {
|
pub fn validate(&self) -> Result<()> {
|
||||||
let state = self.coverage();
|
let state = self.coverage();
|
||||||
|
|
||||||
|
// Ensures that all requirements are met
|
||||||
for task in &self.0 {
|
for task in &self.0 {
|
||||||
for resource in task.requires_resources() {
|
for resource in task.requires_resources() {
|
||||||
if !state.contains_key(&resource) {
|
if !state.contains_key(&resource) {
|
||||||
@@ -29,6 +30,8 @@ impl TaskSet {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO Ensure that all resources will be produced over the valid_over interval
|
||||||
|
|
||||||
// validate that no task generates the same resource on overlapping times
|
// validate that no task generates the same resource on overlapping times
|
||||||
let providers: HashMap<Resource, Vec<usize>> =
|
let providers: HashMap<Resource, Vec<usize>> =
|
||||||
self.0
|
self.0
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
/* eslint-env node */
|
||||||
|
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'eslint:recommended',
|
||||||
|
'@vue/eslint-config-prettier'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest'
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
{}
|
||||||
Vendored
+3
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
# waterfall
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lint with [ESLint](https://eslint.org/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
+10
-39
@@ -1,43 +1,14 @@
|
|||||||
<html>
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<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>
|
||||||
</html>
|
<title>Waterfall</title>
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="timeline"></div>
|
<div id="app"></div>
|
||||||
<script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
fetch("http://localhost:2503/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) => {
|
|
||||||
console.log(payload);
|
|
||||||
payload.map((group) => {
|
|
||||||
Object.values(group.data).map((label) => {
|
|
||||||
label.data.map((interval) => {
|
|
||||||
interval.timeRange = interval.timeRange.map((t) => new Date(t));
|
|
||||||
})
|
|
||||||
})
|
|
||||||
});
|
|
||||||
TimelinesChart()
|
|
||||||
(document.body)
|
|
||||||
.timeFormat("%Y-%m-%dT%H:%M:%S.%LZ") // ISO 8601 format
|
|
||||||
.zScaleLabel('State')
|
|
||||||
.zQualitative(true)
|
|
||||||
.useUtc(false)
|
|
||||||
.data(payload)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.catch(err => { throw err });
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Generated
+3772
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "waterfall",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview --port 4173",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.2.38"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@rushstack/eslint-patch": "^1.1.4",
|
||||||
|
"@vitejs/plugin-vue": "^3.0.3",
|
||||||
|
"@vue/eslint-config-prettier": "^7.0.0",
|
||||||
|
"eslint": "^8.22.0",
|
||||||
|
"eslint-plugin-vue": "^9.3.0",
|
||||||
|
"prettier": "^2.7.1",
|
||||||
|
"vite": "^3.0.9"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
function renderDetails(segment) {
|
||||||
|
document.getElementById("details").innerHTML = JSON.stringify(segment);
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch("http://localhost:2503/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) => {
|
||||||
|
console.log(payload);
|
||||||
|
payload.map((group) => {
|
||||||
|
Object.values(group.data).map((label) => {
|
||||||
|
label.data.map((interval) => {
|
||||||
|
interval.timeRange = interval.timeRange.map((t) => new Date(t));
|
||||||
|
})
|
||||||
|
})
|
||||||
|
});
|
||||||
|
TimelinesChart()
|
||||||
|
(document.getElementById("timeline"))
|
||||||
|
.timeFormat("%Y-%m-%dT%H:%M:%S.%LZ") // ISO 8601 format
|
||||||
|
.zScaleLabel('State')
|
||||||
|
.zQualitative(true)
|
||||||
|
.useUtc(false)
|
||||||
|
.onSegmentClick(renderDetails)
|
||||||
|
.data(payload)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.catch(err => { throw err });
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<html>
|
||||||
|
<script src="https://unpkg.com/timelines-chart"></script>
|
||||||
|
</html>
|
||||||
|
<body>
|
||||||
|
<div id="timeline"></div>
|
||||||
|
<div id="details"></div>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
:root {
|
||||||
|
--base-fontsize: 1.0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
--accent-bg: #F3F3F3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--accent-bg: #3F3F3F;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-size: 1.0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
flex-flow: column wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svgicon {
|
||||||
|
height: 1em;
|
||||||
|
width: auto;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-launch"><g><path class="primary" d="M14.57 6.96a2 2 0 0 1 2.47 2.47c.29.17.5.47.5.86v7.07a1 1 0 0 1-.3.71L13 22.31a1 1 0 0 1-1.7-.7v-3.58l-.49.19a1 1 0 0 1-1.17-.37 14.1 14.1 0 0 0-3.5-3.5 1 1 0 0 1-.36-1.16l.19-.48H2.39A1 1 0 0 1 1.7 11l4.24-4.24a1 1 0 0 1 .7-.3h7.08c.39 0 .7.21.86.5zM13.19 9.4l-2.15 2.15a3 3 0 0 1 .84.57 3 3 0 0 1 .57.84l2.15-2.15A2 2 0 0 1 13.2 9.4zm6.98-6.61a1 1 0 0 1 1.04 1.04c-.03.86-.13 1.71-.3 2.55-.47-.6-1.99-.19-2.55-.74-.55-.56-.14-2.08-.74-2.55.84-.17 1.7-.27 2.55-.3z"/><path class="secondary" d="M7.23 10.26A16.05 16.05 0 0 1 17.62 3.1a19.2 19.2 0 0 1 3.29 3.29 15.94 15.94 0 0 1-7.17 10.4 19.05 19.05 0 0 0-6.51-6.52zm-.86 5.5a16.2 16.2 0 0 1 1.87 1.87 1 1 0 0 1-.47 1.6c-.79.25-1.6.42-2.4.54a1 1 0 0 1-1.14-1.13c.12-.82.3-1.62.53-2.41a1 1 0 0 1 1.6-.47zm7.34-5.47a2 2 0 1 0 2.83-2.83 2 2 0 0 0-2.83 2.83z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 926 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-order-vertical"><path class="secondary" d="M7 18.59V9a1 1 0 0 1 2 0v9.59l2.3-2.3a1 1 0 0 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.42L7 18.6z"/><path class="primary" d="M17 5.41V15a1 1 0 1 1-2 0V5.41l-2.3 2.3a1 1 0 1 1-1.4-1.42l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.42L17 5.4z"/></svg>
|
||||||
|
After Width: | Height: | Size: 370 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-search"><circle cx="10" cy="10" r="7" class="primary"/><path class="secondary" d="M16.32 14.9l1.1 1.1c.4-.02.83.13 1.14.44l3 3a1.5 1.5 0 0 1-2.12 2.12l-3-3a1.5 1.5 0 0 1-.44-1.14l-1.1-1.1a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/></svg>
|
||||||
|
After Width: | Height: | Size: 326 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-sort-ascending"><path class="secondary" d="M18 13v7a1 1 0 0 1-2 0v-7h-3a1 1 0 0 1-.7-1.7l4-4a1 1 0 0 1 1.4 0l4 4A1 1 0 0 1 21 13h-3z"/><path class="primary" d="M3 3h13a1 1 0 0 1 0 2H3a1 1 0 1 1 0-2zm0 4h9a1 1 0 0 1 0 2H3a1 1 0 1 1 0-2zm0 4h5a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2z"/></svg>
|
||||||
|
After Width: | Height: | Size: 353 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-sort-decending"><path class="secondary" d="M6 11V4a1 1 0 1 1 2 0v7h3a1 1 0 0 1 .7 1.7l-4 4a1 1 0 0 1-1.4 0l-4-4A1 1 0 0 1 3 11h3z"/><path class="primary" d="M21 21H8a1 1 0 0 1 0-2h13a1 1 0 0 1 0 2zm0-4h-9a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2zm0-4h-5a1 1 0 0 1 0-2h5a1 1 0 0 1 0 2z"/></svg>
|
||||||
|
After Width: | Height: | Size: 354 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-trash"><path class="primary" d="M5 5h14l-.89 15.12a2 2 0 0 1-2 1.88H7.9a2 2 0 0 1-2-1.88L5 5zm5 5a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1zm4 0a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1z"/><path class="secondary" d="M8.59 4l1.7-1.7A1 1 0 0 1 11 2h2a1 1 0 0 1 .7.3L15.42 4H19a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2h3.59z"/></svg>
|
||||||
|
After Width: | Height: | Size: 402 B |
Vendored
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,50 @@
|
|||||||
|
<script>
|
||||||
|
import RunExplorer from './components/RunExplorer.vue'
|
||||||
|
import GlobalSettings from './components/GlobalSettings.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
refreshSeconds: 15, // How often to refresh
|
||||||
|
daggydURL: window.location.origin,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
updateURL(url) {
|
||||||
|
this.daggydURL = url;
|
||||||
|
},
|
||||||
|
updateRefreshInterval(interval) {
|
||||||
|
this.refreshSeconds = interval;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
GlobalSettings,
|
||||||
|
RunExplorer
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
select { max-width: 25%; }
|
||||||
|
input { max-width: 25%; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="settings">
|
||||||
|
<GlobalSettings
|
||||||
|
:daggydURL="daggydURL"
|
||||||
|
:refreshSeconds="refreshSeconds"
|
||||||
|
@update-refresh-interval="(interval) => this.updateRefreshInterval(interval)"
|
||||||
|
@update-daggyd-url="(url) => this.updateURL(url)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="explorer">
|
||||||
|
<RunExplorer
|
||||||
|
:refreshSeconds="refreshSeconds"
|
||||||
|
:daggydURL="daggydURL"
|
||||||
|
@new-active-run="(runID) => this.activeRunID = runID"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
|
:root {
|
||||||
|
--vt-c-white: #ffffff;
|
||||||
|
--vt-c-white-soft: #f8f8f8;
|
||||||
|
--vt-c-white-mute: #f2f2f2;
|
||||||
|
|
||||||
|
--vt-c-black: #181818;
|
||||||
|
--vt-c-black-soft: #222222;
|
||||||
|
--vt-c-black-mute: #282828;
|
||||||
|
|
||||||
|
--vt-c-indigo: #2c3e50;
|
||||||
|
|
||||||
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||||
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||||
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||||
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||||
|
|
||||||
|
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||||
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* semantic color variables for this project */
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-white);
|
||||||
|
--color-background-soft: var(--vt-c-white-soft);
|
||||||
|
--color-background-mute: var(--vt-c-white-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-light-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
|
--color-text: var(--vt-c-text-light-1);
|
||||||
|
|
||||||
|
--section-gap: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-black);
|
||||||
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
|
--color-background-mute: var(--vt-c-black-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-dark-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-background);
|
||||||
|
transition: color 0.5s, background-color 0.5s;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||||
|
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 308 B |
@@ -0,0 +1,35 @@
|
|||||||
|
@import "./base.css";
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
.green {
|
||||||
|
text-decoration: none;
|
||||||
|
color: hsla(160, 100%, 37%, 1);
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
a:hover {
|
||||||
|
background-color: hsla(160, 100%, 37%, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['refreshSeconds', 'daggydURL'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
interval: this.refreshSeconds,
|
||||||
|
url: this.daggydURL,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
emits: ['update-refresh-interval', 'update-daggyd-url'],
|
||||||
|
computed: {
|
||||||
|
validRefreshIntervals() {
|
||||||
|
return [5, 10, 15, 30, 60, 300, 600];
|
||||||
|
},
|
||||||
|
isSelected(interval) {
|
||||||
|
return (interval === this.refreshSeconds ? 'selected' : 'unselected');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<details>
|
||||||
|
<summary>Global Settings</summary>
|
||||||
|
<label>
|
||||||
|
Daggy Base URL
|
||||||
|
<input @change="$emit('update-daggyd-url', url)" v-model="url"/>
|
||||||
|
</label>
|
||||||
|
<label>Refresh Interval (seconds)
|
||||||
|
<select @change="$emit('update-refresh-interval', interval)" v-model="interval">
|
||||||
|
<option v-for="interval in validRefreshIntervals"
|
||||||
|
:key="interval"
|
||||||
|
:value="interval"
|
||||||
|
>
|
||||||
|
{{ interval }} Seconds
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</details>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,252 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,220 @@
|
|||||||
|
<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,43 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
<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,17 @@
|
|||||||
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
|
export const ALL_STATES = [
|
||||||
|
{ name: 'QUEUED', display: 'Queued' },
|
||||||
|
{ name: 'RUNNING', display: 'Running' },
|
||||||
|
{ name: 'ERRORED', display: 'Errored' },
|
||||||
|
{ name: 'COMPLETED', display: 'Completed' },
|
||||||
|
{ name: 'KILLED', display: 'Killed' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const defaultCountHandler = {
|
||||||
|
get(target, name) {
|
||||||
|
return name in target ? target[name] : 0;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user