feat: add History api and ui (#524)

Author: SamYSF

console/atest-ui/package-lock.json

@@ -17,13 +17,15 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.11.0",
+    "codemirror": "^5.65.17",
+    "diff-match-patch": "^1.0.5",
     "element-plus": "^2.3.7",
     "intro.js": "^7.0.1",
     "jsonlint-mod": "^1.7.6",
     "jsonpath-plus": "^7.2.0",
     "skywalking-client-js": "^0.10.0",
     "vue": "^3.3.4",
-    "vue-codemirror": "^6.1.1",
+    "vue-codemirror": "^5.1.0",
     "vue-i18n": "^9.2.2",
     "vue-json-viewer": "^3.0.4",
     "vue-router": "^4.2.2"

console/atest-ui/package.json

@@ -2,6 +2,7 @@
 import {
   Document,
   Menu as IconMenu,
+  Histogram,
   Location,
   Share,
   ArrowDown
@@ -10,6 +11,7 @@ import { ref, watch } from 'vue'
 import { API } from './views/net'
 import { Cache } from './views/cache'
 import TestingPanel from './views/TestingPanel.vue'
+import TestingHistoryPanel from './views/TestingHistoryPanel.vue'
 import MockManager from './views/MockManager.vue'
 import StoreManager from './views/StoreManager.vue'
 import SecretManager from './views/SecretManager.vue'
@@ -81,6 +83,12 @@ const handleChangeLan = (command: string) => {
   }
 };
 
+const ID = ref(null);
+const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
+  ID.value = selectID;
+  panelName.value = historyPanelName;
+}
+
 </script>
 
 <template>
@@ -104,6 +112,10 @@ const handleChangeLan = (command: string) => {
           <el-icon><icon-menu /></el-icon>
           <template #title>{{ t('title.testing' )}}</template>
         </el-menu-item>
+        <el-menu-item index="history" test-id="history-menu">
+          <el-icon><histogram /></el-icon>
+          <template #title>{{ t('title.history' )}}</template>
+        </el-menu-item>
         <el-menu-item index="mock" test-id="mock-menu">
           <el-icon><icon-menu /></el-icon>
           <template #title>{{ t('title.mock' )}}</template>
@@ -134,7 +146,8 @@ const handleChangeLan = (command: string) => {
           </el-dropdown>
         </el-col>
       </div>
-      <TestingPanel v-if="panelName === 'testing'" />
+      <TestingPanel v-if="panelName === 'testing'" @toHistoryPanel="toHistoryPanel"/>
+      <TestingHistoryPanel v-else-if="panelName === 'history'" :ID="ID"/>
       <MockManager v-else-if="panelName === 'mock'" />
       <StoreManager v-else-if="panelName === 'store'" />
       <SecretManager v-else-if="panelName === 'secret'" />

console/atest-ui/src/App.vue

@@ -22,7 +22,11 @@
         "generateCode": "Generate Code",
         "sendWithParam": "Send With Parameter",
         "fullScreen": "Full Screen",
-        "cancelFullScreen": "Cancel Full Screen"
+        "cancelFullScreen": "Cancel Full Screen",
+        "viewHistory": "View History Test Case Result",
+        "revert": "Revert",
+        "goToHistory": "Go to History",
+        "deleteAllHistory": "Delete All History"
     },
     "title": {
         "createTestSuite": "Create Test Suite",
@@ -38,6 +42,7 @@
         "apiRequestParameter": "API Request Parameter",
         "codeGenerator": "Code Generator",
         "testing": "Testing",
+        "history": "Testing History",
         "mock": "Mock",
         "welcome": "Welcome",
         "secrets": "Secrets",
@@ -49,7 +54,8 @@
         "filter": "Filter Keyword",
         "noParameter": "No Parameter",
         "testsuite": "Test Suite:",
-        "apiAddress": "API Address:"
+        "apiAddress": "API Address:",
+        "runningAt": "Running At:"
     },
     "field": {
         "name": "Name",