feat(ui): baseline rollback (#502)

cmdb-ui/src/modules/cmdb/api/history.js

@@ -71,3 +71,19 @@ export function judgeItsmInstalled() {
     isShowMessage: false
   })
 }
+
+export function getCIsBaseline(params) {
+  return axios({
+    url: `/v0.1/ci/baseline`,
+    method: 'GET',
+    params
+  })
+}
+
+export function CIBaselineRollback(ciId, params) {
+  return axios({
+    url: `/v0.1/ci/${ciId}/baseline/rollback`,
+    method: 'POST',
+    data: params
+  })
+}

cmdb-ui/src/modules/cmdb/components/cmdbGrant/grantComp.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cmdb-grant" :style="{ maxHeight: `${windowHeight - 130}px` }">
+  <div class="cmdb-grant" :style="{ }">
     <template v-if="cmdbGrantType.includes('ci_type')">
       <div class="cmdb-grant-title">{{ $t('cmdb.components.ciTypeGrant') }}</div>
       <CiTypeGrant

cmdb-ui/src/modules/cmdb/lang/en.js

@@ -520,7 +520,21 @@ if __name__ == "__main__":
         newUpdateField: 'Add a Attribute',
         attributeSettings: 'Attribute Settings',
         share: 'Share',
-        noPermission: 'No Permission'
+        noPermission: 'No Permission',
+        rollback: 'Rollback',
+        rollbackHeader: 'Instance Rollback',
+        rollbackTo: 'Rollback to',
+        rollbackToTips: 'Please select rollback time',
+        baselineDiff: 'Difference from baseline',
+        instance: 'Instance',
+        rollbackBefore: 'Current value',
+        rollbackAfter: 'After rollback',
+        noDiff: 'CI data has not changed after {baseline}',
+        rollbackConfirm: 'Are you sure you want to rollback?',
+        rollbackSuccess: 'Rollback successfully',
+        rollbackingTips: 'Rollbacking',
+        batchRollbacking: 'Deleting {total} items in total, {successNum} items successful, {errorNum} items failed',
+        baselineTips: 'Changes at this point in time will also be rollbacked, Unique ID and password attributes do not support',
     },
     serviceTree: {
         remove: 'Remove',

cmdb-ui/src/modules/cmdb/lang/zh.js

@@ -520,7 +520,21 @@ if __name__ == "__main__":
         newUpdateField: '新增修改字段',
         attributeSettings: '字段设置',
         share: '分享',
-        noPermission: '暂无权限'
+        noPermission: '暂无权限',
+        rollback: '回滚',
+        rollbackHeader: '实例回滚',
+        rollbackTo: '回滚至: ',
+        rollbackToTips: '请选择回滚时间点',
+        baselineDiff: '基线对比结果',
+        instance: '实例',
+        rollbackBefore: '当前值',
+        rollbackAfter: '回滚后',
+        noDiff: '在【{baseline}】后数据没有发生变化',
+        rollbackConfirm: '确认要回滚吗 ？',
+        rollbackSuccess: '回滚成功',
+        rollbackingTips: '正在批量回滚中',
+        batchRollbacking: '正在回滚，共{total}个，成功{successNum}个，失败{errorNum}个',
+        baselineTips: '该时间点的变更也会被回滚, 唯一标识、密码属性不支持回滚',
     },
     serviceTree: {
         remove: '移除',

cmdb-ui/src/modules/cmdb/views/ci/ciDetailPage.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="ci-detail-header">{{ this.type.alias }}</div>
     <div class="ci-detail-page">
-      <CiDetailTab ref="ciDetailTab" :typeId="typeId" />
+      <ci-detail-tab ref="ciDetailTab" :typeId="typeId" :attributeHistoryTableHeight="windowHeight - 250" />
     </div>
   </div>
 </template>
@@ -23,6 +23,11 @@ export default {
       attributes: {},
     }
   },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+  },
   provide() {
     return {
       attrList: () => {
@@ -55,7 +60,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
 .ci-detail-header {
   border-left: 3px solid @primary-color;
   padding-left: 10px;

cmdb-ui/src/modules/cmdb/views/ci/index.vue

@@ -68,6 +68,8 @@
             <span @click="openBatchDownload">{{ $t('download') }}</span>
             <a-divider type="vertical" />
             <span @click="batchDelete">{{ $t('delete') }}</span>
+            <a-divider type="vertical" />
+            <span @click="batchRollback">{{ $t('cmdb.ci.rollback') }}</span>
             <span>{{ $t('cmdb.ci.selectRows', { rows: selectedRowKeys.length }) }}</span>
           </div>
         </SearchForm>
@@ -293,6 +295,7 @@
         <create-instance-form ref="create" @reload="reloadData" @submit="batchUpdate" />
         <JsonEditor ref="jsonEditor" @jsonEditorOk="jsonEditorOk" />
         <BatchDownload ref="batchDownload" @batchDownload="batchDownload" />
+        <ci-rollback-form ref="ciRollbackForm" @batchRollbackAsync="batchRollbackAsync($event)" :ciIds="selectedRowKeys" />
         <MetadataDrawer ref="metadataDrawer" />
         <CMDBGrant ref="cmdbGrant" resourceTypeName="CIType" app_id="cmdb" />
       </a-spin>
@@ -325,6 +328,8 @@ import MetadataDrawer from './modules/MetadataDrawer.vue'
 import CMDBGrant from '../../components/cmdbGrant'
 import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
 import { getAttrPassword } from '../../api/CITypeAttr'
+import CiRollbackForm from './modules/ciRollbackForm.vue'
+import { CIBaselineRollback } from '../../api/history'
 
 export default {
   name: 'InstanceList',
@@ -340,6 +345,7 @@ export default {
     MetadataDrawer,
     CMDBGrant,
     OpsMoveIcon,
+    CiRollbackForm,
   },
   computed: {
     windowHeight() {
@@ -429,6 +435,12 @@ export default {
     // window.onkeypress = (e) => {
     //   this.handleKeyPress(e)
     // }
+    this.$nextTick(() => {
+      const loadingNode = document.getElementsByClassName('ant-drawer-mask')
+      if (loadingNode?.style) {
+        loadingNode.style.zIndex = 8
+      }
+    })
     setTimeout(() => {
       this.columnDrop()
     }, 1000)
@@ -661,7 +673,7 @@ export default {
               message: this.$t('warning'),
               description: errorMsg,
               duration: 0,
-              style: { whiteSpace: 'break-spaces' },
+              style: { whiteSpace: 'break-spaces', overflow: 'auto', height: this.windowHeight - 80 + 'px' },
             })
             errorNum += 1
           })
@@ -744,6 +756,55 @@ export default {
         },
       })
     },
+    batchRollback() {
+      this.$nextTick(() => {
+        this.$refs.ciRollbackForm.onOpen(true)
+      })
+    },
+    async batchRollbackAsync(params) {
+      const mask = document.querySelector('.ant-drawer-mask')
+      const oldValue = mask.style.zIndex
+      mask.style.zIndex = 2
+      let successNum = 0
+      let errorNum = 0
+      this.loading = true
+      this.loadTip = this.$t('cmdb.ci.rollbackingTips')
+      const floor = Math.ceil(this.selectedRowKeys.length / 6)
+      for (let i = 0; i < floor; i++) {
+        const itemList = this.selectedRowKeys.slice(6 * i, 6 * i + 6)
+        const promises = itemList.map((x) => CIBaselineRollback(x, params))
+        await Promise.allSettled(promises)
+          .then((res) => {
+            res.forEach((r) => {
+              if (r.status === 'fulfilled') {
+                successNum += 1
+              } else {
+                errorNum += 1
+              }
+            })
+          })
+          .finally(() => {
+            this.loadTip = this.$t('cmdb.ci.batchRollbacking', {
+              total: this.selectedRowKeys.length,
+              successNum: successNum,
+              errorNum: errorNum,
+            })
+          })
+      }
+      this.loading = false
+      this.loadTip = ''
+      mask.style.zIndex = oldValue
+      this.selectedRowKeys = []
+      this.$refs.xTable.getVxetableRef().clearCheckboxRow()
+      this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
+      this.$nextTick(() => {
+        if (this.currentPage === 1) {
+          this.loadTableData()
+        } else {
+          this.currentPage = 1
+        }
+      })
+    },
     async refreshAfterEditAttrs() {
       await this.loadPreferenceAttrList()
       await this.loadTableData()

cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailDrawer.vue

@@ -1,12 +1,13 @@
 <template>
   <CustomDrawer
-    width="80%"
+    width="90%"
     placement="left"
     @close="
       () => {
         visible = false
       }
     "
+    style="transform: translateX(0px)!important"
     :visible="visible"
     :hasTitle="false"
     :hasFooter="false"

cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailRelatedItsmTable.vue

@@ -7,7 +7,7 @@
       resizable
       border
       size="small"
-      class="ops-stripe-table"
+      class="ops-unstripe-table"
       :span-method="mergeRowMethod"
       :data="tableData"
       v-bind="ci_id ? { height: 'auto' } : { height: `${windowHeight - 225}px` }"
@@ -35,7 +35,7 @@
         :filters="[
           { value: 0, label: $t('new') },
           { value: 1, label: $t('delete') },
-          { value: 3, label: $t('update') },
+          { value: 2, label: $t('update') },
         ]"
         :filter-method="filterOperateMethod"
         :title="$t('operation')"
@@ -104,6 +104,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    attrList: {
+      type: Array,
+      default: () => [],
+    }
   },
   data() {
     return {
@@ -170,8 +174,8 @@ export default {
           if (attrColumn) {
             $table.setFilter(
               attrColumn,
-              this.tableData.map((item) => {
-                return { value: item.attr_alias, label: item.attr_alias }
+              this.attrList().map((attr) => {
+                return { value: attr.alias || attr.name, label: attr.alias || attr.name }
               })
             )
           }