Web UI Filter Options and Table formatting fixes

turbinia/workers/__init__.py

@@ -452,9 +452,9 @@ class TurbiniaTask:
 
  # The list of attributes that we will persist into storage
  STORED_ATTRIBUTES = [
- 'id', 'job_id', 'start_time', 'last_update', 'name', 'evidence_name',
- 'evidence_id', 'request_id', 'requester', 'group_name', 'reason',
- 'group_id'
+ 'id', 'job_id', 'job_name', 'start_time', 'last_update', 'name',
+ 'evidence_name', 'evidence_id', 'request_id', 'requester', 'group_name',
+ 'reason', 'group_id'
  ]
 
  # The list of evidence states that are required by a Task in order to run.

web/package.json

@@ -7,16 +7,16 @@
  "preview": "vite preview"
  },
  "dependencies": {
- "@mdi/font": "7.0.96",
- "axios": "^1.6.5",
+ "@mdi/font": "7.4.47",
+ "axios": "^1.7.2",
  "streamsaver": "^2.0.6",
- "vue": "^3.2.0",
- "vuetify": "^3.0.0"
+ "vue": "^3.4.34",
+ "vuetify": "^3.6.13"
  },
  "devDependencies": {
- "@vitejs/plugin-vue": "^4.0.0",
- "unplugin-fonts": "^1.0.3",
- "vite": "^4.5.3",
- "vite-plugin-vuetify": "^1.0.0"
+ "@vitejs/plugin-vue": "^5.1.0",
+ "unplugin-fonts": "^1.1.1",
+ "vite": "^5.3.4",
+ "vite-plugin-vuetify": "^2.0.3"
  }
-}
+}

web/src/App.vue

@@ -44,9 +44,12 @@ limitations under the License.
  <v-card rounded v-if="Object.keys(taskDetails).length">
  <task-details :taskDetails="taskDetails"></task-details>
  </v-card>
+ <v-card rounded v-else-if="Object.keys(requestDetails).length">
+ <request-details :requestDetails="requestDetails"></request-details>
+ </v-card>
  <v-card rounded v-else>
- <v-card-title> Task Details </v-card-title>
- <v-card-subtitle> No Task Selected. Please click on a Task ID to see its details. </v-card-subtitle>
+ <v-card-title> Request or Task Details </v-card-title>
+ <v-card-subtitle> Please click on a Request ID or Task ID to see its details. </v-card-subtitle>
  </v-card>
  </v-col>
  </v-row>
@@ -57,6 +60,7 @@ limitations under the License.
 
 <script>
 import RequestList from './components/RequestList.vue'
+import RequestDetails from './components/RequestDetails.vue';
 import TaskDetails from './components/TaskDetails.vue'
 import ApiClient from './utils/RestApiClient.js'
 
@@ -70,22 +74,35 @@ export function truncate(text, length, suffix) {
 
 export default {
  name: 'app',
- components: { RequestList, TaskDetails },
+ components: { RequestList, RequestDetails, TaskDetails },
  provide() {
  return {
  getTaskDetails: this.getTaskDetails,
+ getRequestDetails: this.getRequestDetails,
  }
  },
  data() {
  return {
  taskDetails: {},
+ requestDetails: {},
  }
  },
  methods: {
  getTaskDetails: function (task_id) {
  ApiClient.getTaskDetails(task_id)
  .then((response) => {
  this.taskDetails = response.data
+ this.requestDetails = {}
+ })
+ .catch((e) => {
+ console.error(e)
+ })
+ },
+ getRequestDetails: function (request_id) {
+ ApiClient.getRequestDetails(request_id)
+ .then((response) => {
+ this.requestDetails = response.data
+ this.taskDetails = {}
  })
  .catch((e) => {
  console.error(e)
@@ -112,4 +129,11 @@ body {
  overflow: auto;
  font-family: 'Roboto';
 }
+
+.v-table__wrapper {
+ overflow: hidden;
+ word-break: break-all;
+ text-overflow: ellipsis
+}
+
 </style>

web/src/components/RequestDetails.vue

@@ -0,0 +1,139 @@
+<!--
+Copyright 2024 Google Inc. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<template>
+ <div>
+ <v-card-title>
+ Request Details
+ <v-snackbar timeout="5000" color="primary" location="top" height="55">
+ Request output is <strong>downloading in the background</strong>, please wait
+ <v-progress-circular color="white" indeterminate></v-progress-circular>
+ <template v-slot:activator="{ props: snackbar }">
+ <v-tooltip top text="Download request output">
+ <template v-slot:activator="{ props: tooltip }">
+ <v-btn icon="mdi-folder-arrow-down-outline" variant="text" v-bind="mergeProps(snackbar, tooltip)"
+ @click="getRequestOutput(requestDetails.request_id)">
+ </v-btn>
+ </template>
+ </v-tooltip>
+ </template>
+ </v-snackbar>
+ </v-card-title>
+ <v-alert v-if="requestDetails.status === 'success'" type="success" prominent>
+ Request <strong>{{ requestDetails.request_id }}</strong> completed successfully.
+ </v-alert>
+ <v-alert v-else-if="requestDetails.status === 'running'" type="info" prominent>
+ Request <strong>{{ requestDetails.request_id }}</strong> has <strong>{{ requestDetails.task_count - requestDetails.successful_tasks - requestDetails.failed_tasks }}</strong> Tasks remaining.
+ </v-alert>
+ <v-alert v-else-if="requestDetails.status === 'completed_with_errors'" type="warning" prominent>
+ Request <strong>{{ requestDetails.request_id }}</strong> completed with <strong>{{ requestDetails.failed_tasks }}</strong> failed Tasks.
+ </v-alert>
+ <v-alert v-else type="error" prominent>
+ Request <strong>{{ requestDetails.request_id }}</strong> was not successful.
+ </v-alert>
+ <v-card>
+ <v-list density="compact" v-model:opened="openGroups">
+ <v-list-group value="ids">
+ <template v-slot:activator="{ props }">
+ <v-list-item v-bind="props" title="Associated IDs"></v-list-item>
+ </template>
+ <v-list-item title="Request ID:">
+ {{ requestDetails.request_id }}
+ </v-list-item>
+ <v-list-item title="Evidence ID:">
+ {{ requestDetails.evidence_id }}
+ </v-list-item>
+ <v-list-item title="Reason:">
+ {{ requestDetails.reason }}
+ </v-list-item>
+ </v-list-group>
+ <v-list-group value="details">
+ <template v-slot:activator="{ props }">
+ <v-list-item v-bind="props" title="Processing Details"></v-list-item>
+ </template>
+ <v-list-item title="Evidence Name:">
+ {{ requestDetails.evidence_name }}
+ </v-list-item>
+ <v-list-item title="Last Update:">
+ {{ requestDetails.last_task_update_time }}
+ </v-list-item>
+ <v-list-item title="Requester:">
+ {{ requestDetails.requester }}
+ </v-list-item>
+ <v-list-item title="Status:">
+ {{ requestDetails.status }}
+ </v-list-item>
+ <v-list-item title="Total:">
+ {{ requestDetails.task_count }} Tasks
+ </v-list-item>
+ <v-list-item title="Running:">
+ {{ requestDetails.running_tasks }} Tasks
+ </v-list-item>
+ <v-list-item title="Queued:">
+ {{ requestDetails.queued_tasks }} Tasks
+ </v-list-item>
+ <v-list-item title="Successful:">
+ {{ requestDetails.successful_tasks }} Tasks
+ </v-list-item>
+ <v-list-item title="Failed:">
+ {{ requestDetails.failed_tasks }} Tasks
+ </v-list-item>
+ </v-list-group>
+ </v-list>
+ </v-card>
+ </div>
+ </template>
+
+ <script>
+ import ApiClient from '../utils/RestApiClient.js'
+ import { mergeProps } from 'vue'
+
+ export default {
+ props: ['requestDetails'],
+ data() {
+ return {
+ openGroups: ['ids', 'details']
+ }
+ },
+ methods: {
+ mergeProps,
+ getRequestOutput: function (request_id) {
+ ApiClient.getRequestOutput(request_id)
+ .then(({ data }) => {
+ const downloadObj = window.URL.createObjectURL(new Blob([data]))
+ const link = document.createElement('a')
+ link.href = downloadObj
+ link.setAttribute('download', request_id + '.tgz')
+ document.body.appendChild(link)
+ link.click()
+ link.remove()
+ })
+ .catch((e) => {
+ console.error(e)
+ })
+ },
+ }
+ }
+ </script>
+
+ <style scoped>
+ .v-list-item {
+ font-size: 12px;
+ }
+
+ .v-list-item__action {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ </style>
+