feat(frontend): mongo这里的变更脚本执行提供下载地址 #8771

Author: hLinx

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3878,5 +3878,12 @@
   "Mongo分片集群": "Mongo 分片集群",
   "sqlserver单节点版": "sqlserver 单节点版",
   "sqlserver主从版": "sqlserver 主从版",
+  "目标集群：": "目标集群：",
+  "目标 DB：": "目标 DB：",
+  "目标表名：": "目标表名：",
+  "where 条件：": "where 条件：",
+  "导出数据：": "导出数据：",
+  "脚本来源：": "脚本来源：",
+  "脚本执行内容：": "脚本执行内容：",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/utils/downloadUrl.ts

@@ -17,6 +17,7 @@ export const downloadUrl = (url: string) => {
   const eleLink = document.createElement('a');
   eleLink.style.display = 'none';
   eleLink.href = url;
+  eleLink.target = '_blank';
 
   // 触发点击
   document.body.appendChild(eleLink);

dbm-ui/frontend/src/views/db-manage/common/FlowRedisKeyExtract.vue

@@ -60,7 +60,6 @@
         :data="state.data"
         :height="460"
         :is-anomalies="isAnomalies"
-        :row-height="56"
         @refresh="fetchKeyFiles"
         @selection-change="handleTableSelected">
         <BkTableColumn

dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/flow-info/components/flow-type-inner-flow/StatusFailed.vue

@@ -19,11 +19,17 @@
         keypath="m_耗时_t"
         scope="global">
         <span style="color: #ea3636">{{ t('执行失败') }}</span>
+
         <CostTimer
           :is-timing="false"
           :start-time="utcTimeToSeconds(data.start_time)"
           :value="data.cost_time" />
       </I18nT>
+      <template v-if="ticketDetail.ticket_type === TicketTypes.MONGODB_EXEC_SCRIPT_APPLY">
+        <span> ，</span>
+        <!-- prettier-ignore -->
+        <MongodbExecScriptDownloadFile :details="(data.details as ComponentProps<typeof MongodbExecScriptDownloadFile>['details'])" />
+      </template>
       <template v-if="data.url">
         <span> ，</span>
         <a
@@ -58,13 +64,16 @@
   </StatusFailed>
 </template>
 <script setup lang="ts">
+  import type { ComponentProps } from 'vue-component-type-helpers';
   import { useI18n } from 'vue-i18n';
 
   import FlowMode from '@services/model/ticket/flow';
   import TicketModel from '@services/model/ticket/ticket';
 
   import { useUserProfile } from '@stores';
 
+  import { TicketTypes } from '@common/const';
+
   import CostTimer from '@components/cost-timer/CostTimer.vue';
 
   import ProcessFailedTerminate from '@views/ticket-center/common/action-confirm/ProcessFailedTerminate.vue';
@@ -74,6 +83,8 @@
 
   import StatusFailed from '../flow-type-common/StatusFailed.vue';
 
+  import MongodbExecScriptDownloadFile from './components/MongodbExecScriptDownloadFile.vue';
+
   interface Props {
     data: FlowMode;
     ticketDetail: TicketModel<unknown>;

dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/flow-info/components/flow-type-inner-flow/StatusSucceeded.vue

@@ -14,11 +14,17 @@
           :start-time="utcTimeToSeconds(data.start_time)"
           :value="data.cost_time" />
       </I18nT>
+      <template v-if="ticketDetail.ticket_type === TicketTypes.MONGODB_EXEC_SCRIPT_APPLY">
+        <span> ，</span>
+        <!-- prettier-ignore -->
+        <MongodbExecScriptDownloadFile :details="(data.details as ComponentProps<typeof MongodbExecScriptDownloadFile>['details'])" />
+      </template>
       <template v-if="ticketDetail.ticket_type === TicketTypes.REDIS_KEYS_EXTRACT">
         <span> ，</span>
-        <FlowRedisKeyExtract :id="data.flow_obj_id" />
+        <RedisKeysExtractFile :id="data.flow_obj_id" />
       </template>
-      <template v-if="ticketDetail.ticket_type === TicketTypes.MYSQL_DUMP_DATA">
+      <template
+        v-if="[TicketTypes.MYSQL_DUMP_DATA, TicketTypes.TENDBCLUSTER_DUMP_DATA].includes(ticketDetail.ticket_type)">
         <span> ，</span>
         <!-- prettier-ignore -->
         <MysqlDumpDataDownload :details="(data.details as ComponentProps<typeof MysqlDumpDataDownload>['details'])" />
@@ -48,13 +54,13 @@
 
   import CostTimer from '@components/cost-timer/CostTimer.vue';
 
-  import FlowRedisKeyExtract from '@views/db-manage/common/FlowRedisKeyExtract.vue';
-
   import { utcTimeToSeconds } from '@utils';
 
   import DbTimeLineItem from '../time-line/TimeLineItem.vue';
 
+  import MongodbExecScriptDownloadFile from './components/MongodbExecScriptDownloadFile.vue';
   import MysqlDumpDataDownload from './components/MysqlDumpDataDownload.vue';
+  import RedisKeysExtractFile from './components/RedisKeysExtractFile.vue';
 
   interface Props {
     data: FlowMode<unknown>;

dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/flow-info/components/flow-type-inner-flow/StatusTerminated.vue

@@ -10,6 +10,11 @@
           :start-time="utcTimeToSeconds(data.start_time)"
           :value="data.cost_time" />
       </I18nT>
+      <template v-if="ticketDetail.ticket_type === TicketTypes.MONGODB_EXEC_SCRIPT_APPLY">
+        <span> ，</span>
+        <!-- prettier-ignore -->
+        <MongodbExecScriptDownloadFile :details="(data.details as ComponentProps<typeof MongodbExecScriptDownloadFile>['details'])" />
+      </template>
       <template v-if="data.url">
         <span> ，</span>
         <a
@@ -22,18 +27,25 @@
   </StatusTerminated>
 </template>
 <script setup lang="ts">
+  import type { ComponentProps } from 'vue-component-type-helpers';
   import { useI18n } from 'vue-i18n';
 
   import FlowMode from '@services/model/ticket/flow';
+  import TicketModel from '@services/model/ticket/ticket';
+
+  import { TicketTypes } from '@common/const';
 
   import CostTimer from '@components/cost-timer/CostTimer.vue';
 
   import { utcTimeToSeconds } from '@utils';
 
   import StatusTerminated from '../flow-type-common/StatusTerminated.vue';
 
+  import MongodbExecScriptDownloadFile from './components/MongodbExecScriptDownloadFile.vue';
+
   interface Props {
     data: FlowMode;
+    ticketDetail: TicketModel<unknown>;
   }
 
   defineProps<Props>();

dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/flow-info/components/flow-type-inner-flow/components/MongodbExecScriptDownloadFile.vue

@@ -0,0 +1,74 @@
+<template>
+  <BkButton
+    text
+    theme="primary"
+    @click="handleShowFile">
+    {{ t('查看结果文件') }}
+  </BkButton>
+  <BkDialog
+    v-model:is-show="isShow"
+    :title="t('查看结果文件')"
+    :width="1140">
+    <BkTable
+      :data="details.ticket_data.rules"
+      :height="460">
+      <BkTableColumn
+        field="path"
+        :label="t('路径')" />
+      <BkTableColumn
+        :label="t('操作')"
+        :width="100">
+        <template #default="{ data: rowData }: { data: Props['details']['ticket_data']['rules'][number] }">
+          <BkButton
+            text
+            theme="primary"
+            @click="handleDownloadFile(rowData.path)">
+            {{ t('下载') }}
+          </BkButton>
+        </template>
+      </BkTableColumn>
+    </BkTable>
+    <template #footer>
+      <BkButton @click="handleClose">{{ t('关闭') }}</BkButton>
+    </template>
+  </BkDialog>
+</template>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  import { createBkrepoAccessToken } from '@services/source/storage';
+
+  import { downloadUrl, generateBkRepoDownloadUrl } from '@utils';
+
+  interface Props {
+    details: {
+      ticket_data: {
+        rules: {
+          cluster_id: number;
+          path: string;
+        }[];
+      };
+    };
+  }
+
+  defineProps<Props>();
+
+  const { t } = useI18n();
+
+  const isShow = ref(false);
+
+  const handleShowFile = () => {
+    isShow.value = true;
+  };
+
+  const handleDownloadFile = (path: string) => {
+    createBkrepoAccessToken({ file_path: path }).then((tokenResult) => {
+      const url = generateBkRepoDownloadUrl(tokenResult);
+      downloadUrl(url);
+    });
+  };
+
+  const handleClose = () => {
+    isShow.value = false;
+  };
+</script>