UI improvement, user can cancel change the settings (re-analysis dump file) after they open the setting panel in dump analysis scene.

before: dump analysis cache will dispose once user click 'Setting' button, it does not make sense.
now: dispose and re-analyse will performd sequencely only after use submit the new settings, but if user click the 'cancel' button after open the settins pannel, the pannel will closed and nothing else would happend.

Author: xupengfei11

frontend/src/components/Analysis.vue

@@ -177,6 +177,13 @@ onUnmounted(() => {
 <template>
   <transition mode="out-in">
     <div class="ej-common-view-div" v-if="analysis.phase == Phase.INIT" v-loading="true"></div>
+    <div
+      class="ej-common-view-div"
+      style="display: flex; flex-direction: column; justify-content: center; align-items: center"
+      v-else-if="analysis.phase === Phase.SETUP || analysis.showSetupPage === true"
+    >
+      <component :is="setupComponent" @confirmAnalysisOptions="analyze"></component>
+    </div>
     <div
       class="ej-common-view-div"
       style="display: flex; flex-direction: column; justify-content: start"
@@ -202,13 +209,6 @@ onUnmounted(() => {
         <p v-if="log" style="white-space: pre-line">{{ log }}</p>
       </div>
     </div>
-    <div
-      class="ej-common-view-div"
-      style="display: flex; flex-direction: column; justify-content: center; align-items: center"
-      v-else-if="analysis.phase === Phase.SETUP"
-    >
-      <component :is="setupComponent" @confirmAnalysisOptions="analyze"></component>
-    </div>
     <component :is="analysisComponent" v-else-if="analysis.phase == Phase.SUCCESS"></component>
   </transition>
 </template>

frontend/src/components/heapdump/Setup.vue

@@ -12,9 +12,15 @@
  -->
 <script setup lang="ts">
 import { hdt } from '@/components/heapdump/utils';
+import { Phase, useAnalysisStore } from '@/stores/analysis';
 import { InfoFilled } from '@element-plus/icons-vue';
 import { t } from '@/i18n/i18n';
 
+import { useAnalysisApiRequester } from '@/composables/analysis-api-requester';
+
+const { request } = useAnalysisApiRequester();
+const analysis = useAnalysisStore();
+
 const emit = defineEmits(['confirmAnalysisOptions']);
 
 const options = reactive({
@@ -27,7 +33,16 @@ const options = reactive({
 });
 
 function onConfirm() {
-  emit('confirmAnalysisOptions', options);
+  request('clean').then(() => {
+    analysis.leaveGuard = false;
+    analysis.setPhase(Phase.INIT)
+    analysis.setShowSetupPage(false);
+    emit('confirmAnalysisOptions', options);
+  });
+}
+
+function onCancel() {
+  analysis.setShowSetupPage(false);
 }
 
 const enableDiscard = computed(() => options.discard_objects);
@@ -183,6 +198,9 @@ const enableDiscard = computed(() => options.discard_objects);
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="onConfirm">{{ t('common.confirm') }}</el-button>
+      <el-button @click="onCancel" v-if="analysis.phase !== Phase.INIT && analysis.phase !== Phase.SETUP">
+        {{ t('common.cancel') }}
+      </el-button>
     </el-form-item>
   </el-form>
 </template>

frontend/src/components/heapdump/Toolbar.vue

@@ -12,20 +12,26 @@
  -->
 <script setup lang="ts">
 import DownloadLink from '@/components/common/DownloadLink.vue';
-import { SetUp } from '@element-plus/icons-vue';
+import { SetUp, Delete } from '@element-plus/icons-vue';
 import { t } from '@/i18n/i18n';
 import { useAnalysisApiRequester } from '@/composables/analysis-api-requester';
 import { Phase, useAnalysisStore } from '@/stores/analysis';
 
 const { request } = useAnalysisApiRequester();
 
 const analysis = useAnalysisStore();
-function clean() {
+
+function showSetup() {
+  analysis.setShowSetupPage(true)
+}
+
+function discard() {
   request('clean').then(() => {
     useAnalysisStore().leaveGuard = false;
     location.reload();
   });
 }
+
 </script>
 <template>
   <el-divider direction="vertical" />
@@ -34,8 +40,14 @@ function clean() {
   <template v-if="analysis.phase === Phase.SUCCESS || analysis.phase === Phase.FAILURE">
     <el-divider direction="vertical" />
 
-    <el-button link class="ej-header-button" :icon="SetUp" @click="clean">
+    <el-button link class="ej-header-button" :icon="SetUp" @click="showSetup">
       {{ t('analysis.setting') }}
     </el-button>
   </template>
+  <template v-if="analysis.phase === Phase.SUCCESS">
+    <el-divider direction="vertical" />
+    <el-button link class="ej-header-button" :icon="Delete" @click="discard">
+      {{ t('analysis.discard') }}
+    </el-button>
+  </template>
 </template>

frontend/src/i18n/en.ts

@@ -18,6 +18,7 @@ export default {
   jifa: {
     common: {
       confirm: 'Confirm',
+      cancel: 'Cancel',
       submit: 'Submit',
       back: 'Back',
       operations: 'Operations',
@@ -115,7 +116,8 @@ export default {
       success: 'Analysis successful',
       comparison: 'Comparison',
       selectComparisonTargets: 'Select Targets',
-      setting: 'Setting'
+      setting: 'Setting',
+      discard: 'Discard'
     },
 
     heapDump,

frontend/src/i18n/zh.ts

@@ -18,6 +18,7 @@ export default {
   jifa: {
     common: {
       confirm: '确定',
+      cancel: '取消',
       submit: '提交',
       back: '返回',
       operations: '操作',
@@ -115,7 +116,8 @@ export default {
       success: '分析成功',
       comparison: '分析对比',
       selectComparisonTargets: '选择对比目标',
-      setting: '分析设置'
+      setting: '分析设置',
+      discard: '销毁分析结果'
     },
 
     heapDump,

frontend/src/stores/analysis.ts

@@ -31,7 +31,9 @@ export const useAnalysisStore = defineStore('analysis', {
 
     phase: null as Phase | null,
 
-    leaveGuard: true
+    leaveGuard: true,
+
+    showSetupPage: false
   }),
 
   actions: {
@@ -47,6 +49,10 @@ export const useAnalysisStore = defineStore('analysis', {
 
     setPhase(phase: Phase | null) {
       this.phase = phase;
+    },
+
+    setShowSetupPage(showSetupPage: boolean) {
+      this.showSetupPage = showSetupPage
     }
   }
 });