chore: fix defect report

package.json

@@ -1,6 +1,6 @@
 {
   "name": "penguin-stats-frontend",
-  "version": "3.10.2",
+  "version": "3.10.3",
   "private": true,
   "author": "Penguin Statistics Contributors <contributors@penguin-stats.io> (https://github.com/orgs/penguin-statistics/people)",
   "scripts": {
@@ -137,4 +137,4 @@
   ],
   "homepage": "https://github.com/penguin-statistics/frontend-v2#readme",
   "license": "MIT"
-}
+}

src/components/recognition/RecognitionDefectReportBtn.vue

@@ -132,7 +132,7 @@
     </v-btn>
 
     <v-btn
-      v-else
+      v-else-if="!dense"
       depressed
       text
       outlined
@@ -144,6 +144,29 @@
       </v-icon>
       {{ $t("report.recognition.defectReport.action") }}
     </v-btn>
+
+    <v-tooltip
+      v-else
+      bottom
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn
+          depressed
+          text
+          outlined
+          icon
+          color="deep-purple lighten-4"
+          v-bind="attrs"
+          @click="expanded = true"
+          v-on="on"
+        >
+          <v-icon>
+            mdi-bug
+          </v-icon>
+        </v-btn>
+      </template>
+      <span>{{ $t("report.recognition.defectReport.action") }}</span>
+    </v-tooltip>
   </div>
 </template>
 
@@ -170,6 +193,10 @@ export default {
     envContext: {
       type: Object,
       required: true
+    },
+    dense: {
+      type: Boolean,
+      default: () => false
     }
   },
   data() {
@@ -186,7 +213,7 @@ export default {
   },
   computed: {
     recognitionResult () {
-      return JSON.stringify(this.result.result, null, 4)
+      return JSON.stringify(this.result.originalResult, null, 4)
     },
     envInfo () {
       return JSON.stringify(this.envContext, null, 4)
@@ -209,7 +236,7 @@ export default {
 
         const preflight = (await reportDefect.initDefectReport({
           environment: this.envContext,
-          recognitionResult: this.result.result,
+          recognitionResult: this.result.originalResult,
         })).data
 
         this.state = "uploading";

src/components/recognition/RecognitionResultCard.vue

@@ -44,10 +44,10 @@
     </div>
     <v-divider />
 
-    <v-card-title class="align-start">
+    <v-card-title class="d-flex align-start grow">
       <div
         v-if="result.result.stage.stageId"
-        class="d-flex flex-row align-start flex-wrap"
+        class="d-flex flex-row align-start flex-wrap full-width"
       >
         <FactTableItem>
           <template #title>
@@ -93,6 +93,17 @@
             />
           </v-badge>
         </div>
+
+        <v-spacer />
+
+        <RecognitionDefectReportBtn
+          v-if="hasException"
+          :result="result"
+          :index="index"
+          :env-context="envContext"
+          dense
+          class="align-self-center"
+        />
       </div>
 
       <div

src/utils/recognizer.js

@@ -244,6 +244,8 @@ class Recognizer {
 
       Console.debug('Recognizer', 'Recognized. Took', duration + 'ms', 'with result', parsedResult)
 
+      const copiedOriginalResult = JSON.parse(JSON.stringify(parsedResult))
+
       parsedResult.exceptions = parsedResult.exceptions.map(exception => {
         exception.what = `${
           strings.capitalize(
@@ -293,7 +295,8 @@ class Recognizer {
         file,
         blobUrl,
         duration,
-        result: parsedResult
+        result: parsedResult,
+        originalResult: copiedOriginalResult
       })
       // console.log('callback executed')
       // console.timeLog(file.name)

vue.config.js

@@ -65,8 +65,8 @@ module.exports = {
   devServer: {
     proxy: {
       "/PenguinStats": {
-        // target: "https://penguin-stats.io/",
-        target: "http://localhost:9010/",
+        target: "https://penguin-stats.io/",
+        // target: "http://localhost:9010/",
       },
     },
   },