Application Quality Frontend of 2.0.0-rc4

frontend/src/App.vue

@@ -25,7 +25,7 @@
         target="appquality_user_manual"
         :href="settings.user_manual__url"
       >
-        <v-icon size="24px"> mdi-help-box </v-icon>
+        <v-icon size="24px" style="min-width: 32px"> mdi-help-box </v-icon>
       </v-btn>
 
       <v-btn
@@ -35,7 +35,7 @@
         target="_blank"
         :href="settings.getGrafanaDashboardsURL()"
       >
-        <v-icon size="24px"> mdi-chart-box </v-icon>
+        <v-icon size="24px" style="min-width: 32px"> mdi-chart-box </v-icon>
       </v-btn>
 
       <v-btn
@@ -45,7 +45,7 @@
         target="_blank"
         :href="settings.source__url"
       >
-        <v-icon size="24px"> mdi-github </v-icon>
+        <v-icon size="24px" style="min-width: 32px"> mdi-github </v-icon>
       </v-btn>
 
       <span

frontend/src/assets/tools.js

@@ -45,4 +45,4 @@ export function removeTrailingSlashes(str) {
     return str;
   }
   return str.replace(/\/+$/, '');
-}
+}

frontend/src/components/PipelineExecutionList.vue

@@ -60,7 +60,7 @@
     <v-data-table
       v-model:items-per-page="itemsPerPage"
       v-model:sort-by="sortBy"
-      :headers="headers"
+      :headers="filteredHeaders"
       :items="store.executions"
       :filter-keys="['pipeline']"
       :custom-filter="filterOnPipelineId"
@@ -77,6 +77,7 @@
           <td>
             {{ item.pipeline && store.pipelineById(item.pipeline).version }}
           </td>
+          <td v-if="this.authStore.isAdmin">{{ item.started_by }}</td>
           <td>{{ formatDate(item.start_time) }}</td>
           <td>{{ formatDate(item.completion_time) }}</td>
           <td class="first-letter">{{ item.status || 'Unknown' }}</td>
@@ -89,7 +90,7 @@
               :max="progressMax(item)"
               :indeterminate="item.status.toLowerCase() == 'starting'"
             >
-              <strong>{{ progress(item) }} / {{ progressMax(item) }}</strong>
+              Reports:&nbsp;<strong>{{ progress(item) }}</strong>
             </v-progress-linear>
           </td>
           <td class="text-right nowrap">
@@ -116,7 +117,6 @@
               v-if="settings.isGrafanaEnabled()"
               color="secondary"
               variant="text"
-              :disabled="item.job_reports_count == 0"
               v-tooltip:bottom-end="'View execution dashboard (new page)'"
               @click="viewPipelineExecutionDashboard(item)"
             >
@@ -215,6 +215,13 @@ export default {
           key: 'version',
           sortable: true,
         },
+        {
+          // Only shown to admins using computed property, below
+          title: 'User',
+          key: 'started_by',
+          sortable: true,
+          admins_only: true,
+        },
         {
           title: 'Started',
           key: 'start_time',
@@ -266,6 +273,13 @@ export default {
       const seconds = Math.floor((Date.now() - this.lastPollTime) / 1000);
       return `${seconds}s ago`;
     },
+
+    filteredHeaders() {
+      // Filter out columns restricted to admins if necessary
+      return this.headers.filter(
+        (x) => !x.admins_only || this.authStore.isAdmin,
+      );
+    },
   },
 
   mounted() {

frontend/src/components/PipelineList.vue

@@ -81,24 +81,33 @@
               v-tooltip:bottom-end="'Pipeline information (' + item.name + ')'"
               @click="viewPipelineDetails(item)"
             >
-              <v-icon size="26px"> mdi-information </v-icon>
+              <v-icon> mdi-information </v-icon>
             </v-btn>
             <v-btn
-              icon="mdi-monitor-eye"
               color="primary"
               variant="text"
               v-tooltip:bottom-end="'Pipeline executions'"
               @click="viewPipelineExecutions(item)"
             >
-              <v-icon size="26px"> mdi-monitor-eye </v-icon>
+              <v-icon> mdi-monitor-eye </v-icon>
             </v-btn>
             <v-btn
               color="pink"
               variant="text"
               v-tooltip:bottom-end="'Execute ' + item.name"
               @click="showExecutionPanel(item)"
             >
-              <v-icon size="26px"> mdi-flash </v-icon>
+              <v-icon> mdi-flash </v-icon>
+            </v-btn>
+            <v-btn
+              v-if="settings.isDebugEnabled()"
+              color="primary"
+              variant="text"
+              v-tooltip:bottom-end="'Execution payload template'"
+              @click="viewPipelinePayload(item)"
+              :disabled="!canExecuteRemotely(item)"
+            >
+              <v-icon> mdi-code-json </v-icon>
             </v-btn>
             <!-- Dropdown menu with extra actions: edit, delete -->
             <v-menu location="bottom end" :disabled="!canEditPipeline(item)">
@@ -108,7 +117,7 @@
                   variant="text"
                   :disabled="!canEditPipeline(item)"
                 >
-                  <v-icon size="26px"> mdi-dots-vertical </v-icon>
+                  <v-icon> mdi-dots-vertical </v-icon>
                 </v-btn>
               </template>
 
@@ -120,7 +129,24 @@
                   <template v-slot:prepend>
                     <v-icon color="warning" icon="mdi-pencil" />
                   </template>
-                  <v-list-item-title>Edit</v-list-item-title>
+                  <v-list-item-title
+                    v-tooltip:bottom-end="'Edit pipeline ' + item.name"
+                    >Edit</v-list-item-title
+                  >
+                </v-list-item>
+
+                <v-list-item
+                  v-if="this.authStore.isAdmin"
+                  @click="changePipelineOwner(item)"
+                  :disabled="true"
+                >
+                  <template v-slot:prepend>
+                    <v-icon color="warning" icon="mdi-account-edit" />
+                  </template>
+                  <v-list-item-title
+                    v-tooltip:bottom-end="'Change the pipeline owner'"
+                    >Change Owner</v-list-item-title
+                  >
                 </v-list-item>
 
                 <v-list-item
@@ -130,7 +156,10 @@
                   <template v-slot:prepend>
                     <v-icon color="error" icon="mdi-delete" />
                   </template>
-                  <v-list-item-title>Delete</v-list-item-title>
+                  <v-list-item-title
+                    v-tooltip:bottom-end="'Delete this pipeline'"
+                    >Delete</v-list-item-title
+                  >
                 </v-list-item>
               </v-list>
             </v-menu>
@@ -171,6 +200,32 @@
       </v-card>
     </v-dialog>
 
+    <!-- Pipeline Payload Dialog -->
+    <v-dialog v-model="showPayloadDialog" max-width="800px">
+      <v-card v-if="selectedPipeline">
+        <!-- v-card-title>
+            {{ selectedPipeline.name || selectedPipeline.id }}
+            <v-spacer />
+            <v-btn icon="mdi-close" variant="text" @click="showDetails = false" />
+          </v-card-title -->
+        <v-card-text>
+          <v-alert v-if="selectedPipeline" type="info" class="mb-4"
+            >Use the template below to execute the pipeline using cloud events
+            or API calls.<br />
+            Pipeline name: <b>{{ selectedPipeline.name }}</b
+            ><br />
+            Pipeline identifier: <b>{{ selectedPipeline.id }}</b
+            ><br />
+            See the definition of the parameters in the tool information.<br />
+            Change the parameter values as necessary.</v-alert
+          >
+          <pre class="report-json">{{
+            JSON.stringify(executionPayload, null, 2)
+          }}</pre>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
     <!-- Pipeline creation drawer component -->
     <pipeline-creation-panel
       v-model="creationParameters"
@@ -239,6 +294,7 @@
 import { useAuthStore } from '@/stores/auth';
 import { useToolStore } from '@/stores/tools';
 import { usePipelineStore } from '@/stores/pipelines';
+import { useSettingsStore } from '@/stores/settings';
 import JsonToHtmlTable from '@/components/JsonToHtmlTable.vue';
 import PipelineCreationPanel from './PipelineCreationPanel.vue';
 import PipelineExecutionPanel from './PipelineExecutionPanel.vue';
@@ -257,6 +313,7 @@ export default {
     return {
       search: '',
       showDetailsDialog: false,
+      showPayloadDialog: false,
       selectedPipeline: null,
       creationPanelVisible: false,
       creationParameters: {},
@@ -309,7 +366,8 @@ export default {
     const authStore = useAuthStore();
     const pipelineStore = usePipelineStore();
     const toolStore = useToolStore();
-    return { pipelineStore, toolStore, authStore };
+    const settings = useSettingsStore();
+    return { pipelineStore, toolStore, authStore, settings };
   },
 
   mounted() {
@@ -334,6 +392,13 @@ export default {
         return allText.toLowerCase().includes(searchTerm);
       });
     },
+
+    executionPayload() {
+      // Generate a pipeline execution payload template
+      return {
+        parameters: this.getPipelineUserParams(this.selectedPipeline),
+      };
+    },
   },
 
   methods: {
@@ -372,6 +437,12 @@ export default {
       );
     },
 
+    canExecuteRemotely(pipeline) {
+      // TODO: Use pipeline property / flag
+      console.debug('Can this pipeline be executed remotely?', pipeline);
+      return this.authStore.isAdmin;
+    },
+
     prunePipelineDetails(pipeline) {
       const keysToKeep = [
         'name',
@@ -398,6 +469,11 @@ export default {
       this.showDetailsDialog = true;
     },
 
+    viewPipelinePayload(pipeline) {
+      this.selectedPipeline = pipeline;
+      this.showPayloadDialog = true;
+    },
+
     viewPipelineExecutions(pipeline) {
       // Store the selected pipeline in the store so it accessible by the executions page
       // Navigate to the executions page
@@ -604,4 +680,9 @@ export default {
   padding: 5px;
   min-width: 0px;
 }
+
+.v-icon {
+  font-size: 26px;
+  min-width: 30px;
+}
 </style>

frontend/src/components/ReportList.vue

@@ -101,14 +101,15 @@
               '-'
             }}
           </td>
-          <td>
+          <!-- <td>
             {{
               store.pipelineById(store.executionById(item.run).pipeline)
                 .version || '-'
             }}
-          </td>
-          <td>{{ formatDate(store.executionById(item.run).start_time) }}</td>
+          </td> -->
+          <!-- <td>{{ formatDate(store.executionById(item.run).start_time) }}</td> -->
           <td>{{ item.name || 'No name' }}</td>
+          <td>{{ item.instance || '' }}</td>
           <td>{{ formatDate(item.created_at) }}</td>
           <td class="text-right nowrap">
             <v-btn
@@ -196,30 +197,36 @@ export default {
         {
           title: 'Pipeline',
           key: 'pipeline',
-          sortable: true,
-          align: 'start',
-        },
-        {
-          title: 'Version',
-          key: 'version',
-          sortable: true,
+          sortable: false,
           align: 'start',
         },
+        // {
+        //   title: 'Version',
+        //   key: 'version',
+        //   sortable: true,
+        //   align: 'start',
+        // },
+        // {
+        //   title: 'Pipeline Start Time',
+        //   key: 'pipeline_start_time',
+        //   sortable: true,
+        //   align: 'start',
+        // },
         {
-          title: 'Pipeline Start Time',
-          key: 'pipeline_start_time',
+          title: 'Tool',
+          key: 'name',
           sortable: true,
           align: 'start',
         },
         {
-          title: 'Tool',
-          key: 'tool_name',
+          title: 'Instance',
+          key: 'instance',
           sortable: true,
           align: 'start',
         },
         {
           title: 'Report Time',
-          key: 'report_time',
+          key: 'created_at',
           sortable: true,
         },
         {
@@ -296,7 +303,7 @@ export default {
           this.store.selectedExecutionId,
         );
       } else {
-        console.debug('No execution selected for fetching reports');
+        console.warn('No execution selected for fetching reports');
       }
     },