From 2e89c1bac2696e6aece5fca2f44576a3889e69c6 Mon Sep 17 00:00:00 2001
From: Kinesin Data Technologies Incorporated
 <93931750+kinesintech@users.noreply.github.com>
Date: Fri, 7 Oct 2022 15:54:30 -0300
Subject: [PATCH] Updating UI

---
 webui/index.html                             |   1 +
 webui/public/{daggyd.css => waterfall.css}   |  12 -
 webui/src/App.vue                            |  38 +--
 webui/src/components/GlobalSettings.vue      |  35 +--
 webui/src/components/RunDetails.vue          | 252 -------------------
 webui/src/components/RunExplorer.vue         |  38 ---
 webui/src/components/RunList.vue             | 220 ----------------
 webui/src/components/SegmentDetails.vue      |  33 +++
 webui/src/components/SortableTableHeader.vue |  43 ----
 webui/src/components/TaskDetails.vue         |  60 -----
 webui/src/components/Timeline.vue            |  81 ++++++
 11 files changed, 157 insertions(+), 656 deletions(-)
 rename webui/public/{daggyd.css => waterfall.css} (57%)
 delete mode 100644 webui/src/components/RunDetails.vue
 delete mode 100644 webui/src/components/RunExplorer.vue
 delete mode 100644 webui/src/components/RunList.vue
 create mode 100644 webui/src/components/SegmentDetails.vue
 delete mode 100644 webui/src/components/SortableTableHeader.vue
 delete mode 100644 webui/src/components/TaskDetails.vue
 create mode 100644 webui/src/components/Timeline.vue
diff --git a/webui/index.html b/webui/index.html
index 69634f2..527af22 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -5,6 +5,7 @@
     <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>
+    <link rel="stylesheet" href="/waterfall.css">
     <title>Waterfall</title>
   </head>
   <body>
diff --git a/webui/public/daggyd.css b/webui/public/waterfall.css
similarity index 57%
rename from webui/public/daggyd.css
rename to webui/public/waterfall.css
index 476ed24..fb0a1dc 100644
--- a/webui/public/daggyd.css
+++ b/webui/public/waterfall.css
@@ -2,18 +2,6 @@
   --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;
diff --git a/webui/src/App.vue b/webui/src/App.vue
index 07d32e5..e26509c 100644
--- a/webui/src/App.vue
+++ b/webui/src/App.vue
@@ -1,29 +1,35 @@
 <script>
-import RunExplorer from './components/RunExplorer.vue'
+import Timeline from './components/Timeline.vue'
 import GlobalSettings from './components/GlobalSettings.vue'
+import SegmentDetails from './components/SegmentDetails.vue'
 
 export default {
   data() {
     return {
       refreshSeconds: 15,  // How often to refresh
-      daggydURL: window.location.origin,
+      waterfallURL: 'http://localhost:2503',
+      activeSegment: null,
     }
   },
 
   methods: {
     updateURL(url) {
-      this.daggydURL = url;
+      this.waterfallURL = url;
     },
     updateRefreshInterval(interval) {
       this.refreshSeconds = interval;
     },
+    setActiveSegment(segment) {
+      this.activeSegment = segment;
+    },
   },
 
   components: {
     GlobalSettings,
-    RunExplorer
-  }
-}
+    Timeline,
+    SegmentDetails,
+  },
+};
 </script>
 
 <style>
@@ -32,19 +38,23 @@ input { max-width: 25%; }
 </style>
 
 <template>
-  <div id="settings">
     <GlobalSettings
-      :daggydURL="daggydURL"
+      :waterfallURL="waterfallURL"
       :refreshSeconds="refreshSeconds"
       @update-refresh-interval="(interval) => this.updateRefreshInterval(interval)"
-      @update-daggyd-url="(url) => this.updateURL(url)"
+      @update-waterfall-url="(url) => this.updateURL(url)"
       />
-  </div>
-  <div id="explorer">
-    <RunExplorer
+  <br/>
+  <div>
+    <Timeline
+      :waterfallURL="waterfallURL"
       :refreshSeconds="refreshSeconds"
-      :daggydURL="daggydURL"
-      @new-active-run="(runID) => this.activeRunID = runID"
+      @update-active-segment="(segment) => this.setActiveSegment(segment)"
     />
   </div>
+  <br/>
+  <SegmentDetails
+    v-if="this.activeSegment !== null"
+    :activeSegment="activeSegment"
+    />
 </template>
diff --git a/webui/src/components/GlobalSettings.vue b/webui/src/components/GlobalSettings.vue
index 7bd410f..222b78c 100644
--- a/webui/src/components/GlobalSettings.vue
+++ b/webui/src/components/GlobalSettings.vue
@@ -1,13 +1,13 @@
 <script>
 export default {
-  props: ['refreshSeconds', 'daggydURL'],
+  props: ['refreshSeconds', 'waterfallURL'],
   data() {
     return {
       interval: this.refreshSeconds,
-      url: this.daggydURL,
+      url: this.waterfallURL,
     };
   },
-  emits: ['update-refresh-interval', 'update-daggyd-url'],
+  emits: ['update-refresh-interval', 'update-waterfall-url'],
   computed: {
     validRefreshIntervals() {
       return [5, 10, 15, 30, 60, 300, 600];
@@ -22,19 +22,20 @@ export default {
 <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>
+    <label>
+      Waterfall Base URL
+      <input @change="$emit('update-waterfall-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>
diff --git a/webui/src/components/RunDetails.vue b/webui/src/components/RunDetails.vue
deleted file mode 100644
index e4271a6..0000000
--- a/webui/src/components/RunDetails.vue
+++ /dev/null
@@ -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>
diff --git a/webui/src/components/RunExplorer.vue b/webui/src/components/RunExplorer.vue
deleted file mode 100644
index 0eab87e..0000000
--- a/webui/src/components/RunExplorer.vue
+++ /dev/null
@@ -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>
diff --git a/webui/src/components/RunList.vue b/webui/src/components/RunList.vue
deleted file mode 100644
index 47c1ab1..0000000
--- a/webui/src/components/RunList.vue
+++ /dev/null
@@ -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>
diff --git a/webui/src/components/SegmentDetails.vue b/webui/src/components/SegmentDetails.vue
new file mode 100644
index 0000000..fa94d3a
--- /dev/null
+++ b/webui/src/components/SegmentDetails.vue
@@ -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>
diff --git a/webui/src/components/SortableTableHeader.vue b/webui/src/components/SortableTableHeader.vue
deleted file mode 100644
index 23ca36c..0000000
--- a/webui/src/components/SortableTableHeader.vue
+++ /dev/null
@@ -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>
diff --git a/webui/src/components/TaskDetails.vue b/webui/src/components/TaskDetails.vue
deleted file mode 100644
index e5a65c0..0000000
--- a/webui/src/components/TaskDetails.vue
+++ /dev/null
@@ -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>
diff --git a/webui/src/components/Timeline.vue b/webui/src/components/Timeline.vue
new file mode 100644
index 0000000..c4800d8
--- /dev/null
+++ b/webui/src/components/Timeline.vue
@@ -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>
+

Name	{{ task.name }}
State	{{ task.state }}
Definition	{{ JSON.stringify(task.task, null, 2) }}
Start Time	{{ attempt.startTime }}
Stop Time	{{ attempt.stopTime }}
Return Code	{{ attempt.rc }}
Standard Out	{{ attempt.outputLog }}
Standard Error	{{ attempt.errorLog }}
Executor Log	{{ attempt.ExecutorLog }}