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.
eclipse-jifa · Nov 27, 2023 · 6371766 · 6371766
1 parent ae6f090
commit 6371766
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 13 deletions.
diff --git a/frontend/src/components/Analysis.vue b/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>

diff --git a/frontend/src/components/heapdump/Setup.vue b/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>

diff --git a/frontend/src/components/heapdump/Toolbar.vue b/frontend/src/components/heapdump/Toolbar.vue
@@ -20,12 +20,18 @@ 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="SetUp" @click="discard">
+      {{ t('analysis.discard') }}
+    </el-button>
+  </template>
 </template>
diff --git a/frontend/src/i18n/en.ts b/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,

diff --git a/frontend/src/i18n/zh.ts b/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,

diff --git a/frontend/src/stores/analysis.ts b/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
     }
   }
 });