feat: 数据源更新记录接口联调 (#1364)

src/pages/package.json

@@ -36,10 +36,13 @@
     "less": "^4.1.3",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
+    "monaco-editor": "^0.44.0",
     "pinia": "^2.0.23",
     "query-string": "^8.1.0",
     "request": "^2.88.2",
+    "screenfull": "^6.0.2",
     "sortablejs": "^1.15.0",
+    "vite-plugin-monaco-editor": "^1.1.0",
     "vue": "^3.2.41",
     "vue-router": "^4.1.6"
   },

src/pages/src/components/sql-file/SQLFile.vue

@@ -0,0 +1,206 @@
+<template>
+  <div
+    ref="rootRef"
+    class="sql-execute-editor">
+    <div class="editor-layout-header">
+      <span>{{ title }}</span>
+      <div class="editro-action-box">
+        <i
+          class="user-icon icon-copy"
+          @click="handleCopy" />
+        <i
+          class="user-icon icon-import"
+          @click="handleDownload" />
+        <i
+          v-if="isFullscreen"
+          class="user-icon icon-un-full-screen"
+          @click="handleExitFullScreen" />
+        <i
+          v-else
+          class="user-icon icon-full-screen"
+          @click="handleFullScreen" />
+      </div>
+    </div>
+    <div class="resize-wrapper">
+      <div
+        ref="editorRef"
+        style="height: 100%;" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import * as monaco from 'monaco-editor';
+import screenfull from 'screenfull';
+import {
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
+
+import { copy } from '@/utils';
+
+interface Props {
+  modelValue: string,
+  title: string,
+  readonly?: boolean,
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+  syntaxChecking: false,
+});
+
+const emits = defineEmits(['update:modelValue', 'change']);
+
+const rootRef = ref();
+const editorRef = ref();
+const isFullscreen = ref(false);
+
+let editor: monaco.editor.IStandaloneCodeEditor;
+
+watch(() => props.modelValue, () => {
+  if (props.modelValue !== editor.getValue()) {
+    editor.setValue(props.modelValue);
+  }
+});
+
+const handleToggleScreenfull = () => {
+  if (screenfull.isFullscreen) {
+    isFullscreen.value = true;
+  } else {
+    isFullscreen.value = false;
+  }
+  editor.layout();
+};
+
+const handleReize = () => {
+  editor.layout();
+};
+
+const handleCopy = () => {
+  copy(props.modelValue);
+};
+
+const handleDownload = () => {
+  const link = document.createElement('a');
+  link.download = `${props.title.replace(/\s/g, '')}.sql`;
+  link.style.display = 'none';
+  // 字符内容转变成blob地址
+  const blob = new Blob([props.modelValue], { type: 'sql' });
+  link.href = URL.createObjectURL(blob);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const handleFullScreen = () => {
+  screenfull.toggle(rootRef.value);
+};
+
+const handleExitFullScreen = () => {
+  screenfull.toggle(rootRef.value);
+};
+
+onMounted(() => {
+  monaco.editor.defineTheme('logTheme', {
+    base: 'vs',
+    inherit: true,
+    rules: [
+      { token: 'error-token', foreground: '#EA3636' },
+      { token: 'info-token', foreground: '#C4C6CC' },
+      { token: 'warning-token', foreground: '#FF9C01' },
+    ],
+    colors: {
+      'editor.foreground': '#EA3636',
+      'editor.background': '#000000',
+      'editorCursor.foreground': '#C4C6CC',
+      'editor.lineHighlightBackground': '#000000', // 光标颜色
+      'editorLineNumber.foreground': '#C4C6CC', // 序号颜色
+      'editor.selectionBackground': '#1768EF', // 选中背景颜色
+      'editor.inactiveSelectionBackground': '#000000', // 选中后失焦背景颜色
+      'editorActiveLineNumber.foreground': '#C4C6CC',
+    },
+  });
+
+  monaco.editor.setTheme('logTheme');
+
+  monaco.languages.register({ id: 'logLanguage' });
+  monaco.languages.setMonarchTokensProvider('logLanguage', {
+    keywords: ['ERROR', 'INFO', 'WARNING'],
+    header: /\[(\w+)\]/,
+    tokenizer: {
+      root: [
+        [/^ERROR.*/, 'error-token'],
+        [/^INFO.*/, 'info-token'],
+        [/^WARNING.*/, 'warning-token'],
+      ],
+    },
+  });
+
+  editor = monaco.editor.create(editorRef.value, {
+    value: 'ERROR This is an error\nWARNING This is an warning\nINFO This is an info',
+    language: 'logLanguage',
+    theme: 'logTheme',
+    readOnly: props.readonly,
+    minimap: {
+      enabled: false,
+    },
+    wordWrap: 'bounded',
+    scrollbar: {
+      alwaysConsumeMouseWheel: false,
+    },
+    automaticLayout: true,
+  });
+
+  editor.onDidChangeModelContent(() => {
+    const value = editor.getValue();
+    emits('update:modelValue', value);
+    emits('change', value);
+  });
+  screenfull.on('change', handleToggleScreenfull);
+  window.addEventListener('resize', handleReize);
+});
+
+onBeforeUnmount(() => {
+  editor.dispose();
+  screenfull.off('change', handleToggleScreenfull);
+  window.removeEventListener('resize', handleReize);
+});
+
+</script>
+<style lang="less" scoped>
+.sql-execute-editor {
+  position: relative;
+  z-index: 0;
+  flex: 1;
+  height: calc(100vh - 52px);
+  padding: 16px;
+
+  .editor-layout-header {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding-right: 16px;
+    padding-left: 25px;
+    font-size: 14px;
+    color: #c4c6cc;
+    background: #2e2e2e;
+
+    .editro-action-box {
+      margin-left: auto;
+      color: #979ba5;
+
+      & > * {
+        margin-left: 12px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .resize-wrapper {
+    height: calc(100% - 40px);
+    background: #212121;
+  }
+}
+</style>

src/pages/src/http/dataSourceFiles.ts

@@ -8,6 +8,7 @@ import type {
   NewDataSourceUserParams,
   PutDataSourceParams,
   PutDataSourceUserParams,
+  SyncRecordsParams,
   TestConnectionParams,
 } from './types/dataSourceFiles';
 
@@ -99,3 +100,16 @@ export const postOperationsSync = (id: string) => http.post(`/api/v1/web/data-so
  * 生成数据源用户随机密码
  */
 export const randomPasswords = () => http.post('/api/v1/web/data-sources/random-passwords/');
+
+/**
+ * 数据源更新记录
+ */
+export const getSyncRecords = (params: SyncRecordsParams) => {
+  const { page, pageSize } = params;
+  return http.get(`/api/v1/web/data-sources/sync-records/?page=${page}&page_size=${pageSize}`);
+};
+
+/**
+ * 数据源更新日志
+ */
+export const getSyncLogs = (id: string) => http.get(`/api/v1/web/data-sources/sync-records/${id}/`);

src/pages/src/http/types/dataSourceFiles.ts

@@ -99,3 +99,11 @@ export interface TestConnectionParams {
   plugin_id: string,
   plugin_config: {},
 }
+
+/**
+ * 数据源更新记录参数
+ */
+export interface SyncRecordsParams {
+  page: number,
+  pageSize: number,
+}

src/pages/src/utils/index.ts

@@ -2,6 +2,7 @@ import { Message } from 'bkui-vue';
 import moment from 'moment';
 
 import abnormalImg from '@/images/abnormal.svg';
+import loadingImg from '@/images/loading.svg';
 import normalImg from '@/images/normal.svg';
 import unknownImg from '@/images/unknown.svg';
 import warningImg from '@/images/warning.svg';
@@ -249,3 +250,27 @@ export const SYNC_CONFIG_LIST = [
     label: '从不',
   },
 ];
+
+// 数据更新记录状态
+export const dataRecordStatus = {
+  pending: {
+    icon: loadingImg,
+    text: '待执行',
+    theme: 'warning',
+  },
+  running: {
+    icon: loadingImg,
+    text: '同步中',
+    theme: 'warning',
+  },
+  success: {
+    icon: normalImg,
+    text: '成功',
+    theme: 'success',
+  },
+  failed: {
+    icon: abnormalImg,
+    text: '失败',
+    theme: 'danger',
+  },
+};