feat: finalized git progress for clone, pull, push

crawlab-team/crawlab#1485

src/components/box/Box.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import ClIcon from '@/components/icon/Icon.vue';
+
+defineOptions({ name: 'ClBox' });
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    visible?: boolean;
+    title?: string;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    closable?: boolean;
+    type?: BasicType;
+    icon?: Icon;
+    loading?: boolean;
+    zIndex?: number;
+  }>(),
+  {
+    position: 'top-right',
+    closable: true,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const cls = computed<string>(() => {
+  const { position } = props;
+  return [position].join(' ');
+});
+</script>
+
+<template>
+  <div
+    class="box"
+    :class="cls"
+    :style="{
+      zIndex: visible ? props.zIndex : -1,
+      opacity: visible ? 1 : 0,
+    }"
+  >
+    <el-card>
+      <template #header>
+        <div class="title" :class="type">
+          <div v-if="loading || icon" class="icon-wrapper">
+            <cl-icon v-if="loading" :icon="['fa', 'spinner']" spinning />
+            <cl-icon v-else :icon="icon" />
+          </div>
+          <template v-if="$slots.title">
+            <slot name="title" />
+          </template>
+          <template v-else>
+            {{ title }}
+          </template>
+        </div>
+      </template>
+      <slot />
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.box {
+  position: fixed;
+  z-index: 999;
+  min-width: 360px;
+  transition: opacity 0.3s;
+
+  &.top-right {
+    top: var(--cl-header-height);
+    right: 20px;
+  }
+
+  &.top-left {
+    top: var(--cl-header-height);
+    left: 20px;
+  }
+
+  &.bottom-right {
+    bottom: 20px;
+    right: 20px;
+  }
+
+  &.bottom-left {
+    bottom: 20px;
+    left: 20px;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+
+    &.info {
+      .icon-wrapper {
+        color: var(--cl-info-color);
+      }
+    }
+
+    &.success {
+      .icon-wrapper {
+        color: var(--cl-success-color);
+      }
+    }
+
+    &.warning {
+      .icon-wrapper {
+        color: var(--cl-warning-color);
+      }
+    }
+
+    &.danger {
+      .icon-wrapper {
+        color: var(--cl-danger-color);
+      }
+    }
+
+    .icon {
+      margin-right: 10px;
+      width: 24px;
+    }
+  }
+}
+</style>
+<style scoped>
+.box:deep(.title .icon) {
+  margin-right: 10px;
+  width: 24px;
+}
+</style>

src/components/file/FileEditorNavMenu.vue

@@ -430,6 +430,7 @@ const fileSearchString = ref<string>('');
         @node-drag-end="onNodeDragEnd"
         @node-drop="onNodeDrop"
         @node-click="onNodeClick"
+        @node-contextmenu="onNodeContextMenuShow"
         @node-expand="onNodeExpand"
         @node-collapse="onNodeCollapse"
       >

src/components/git/GitLogsBox.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClGitLogsBox' });
+
+import { translate } from '@/utils';
+
+defineProps<{
+  visible?: boolean;
+  loading?: boolean;
+  title?: string;
+  logs?: string[];
+}>();
+
+const t = translate;
+</script>
+
+<template>
+  <cl-box
+    :visible="logs?.length && visible"
+    :loading="loading"
+    :title="title"
+    :type="loading ? 'warning' : 'info'"
+  >
+    <template v-if="logs">
+      <div class="logs-list">
+        <div v-for="(log, $index) in logs" :key="$index">
+          {{ log }}
+        </div>
+      </div>
+    </template>
+  </cl-box>
+</template>
+
+<style scoped lang="scss">
+.logs-list {
+  min-height: 240px;
+}
+</style>

src/components/git/GitLogsDialog.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClGitLogsDialog' });
+import { ref, watch, computed, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { translate } from '@/utils';
+import { GIT_STATUS_CLONING } from '@/constants';
+import useGit from '@/components/git/useGit';
+import ClLogsView from '@/views/deps/task/LogsView.vue';
+
+const t = translate;
+
+const ns = 'git';
+const store = useStore();
+const { git: state } = store.state as RootStoreState;
+
+const { activeDialogKey } = useGit(store);
+
+const dialogVisible = computed(() => activeDialogKey.value === 'logs');
+
+const logsViewRef = ref<typeof ClLogsView>();
+
+let handle: number;
+const update = () => {
+  if (dialogVisible) {
+    handle = setInterval(async () => {
+      if (!state.form?._id) return;
+      await store.dispatch(`${ns}/getById`, state.form?._id);
+      if (state.form?.status !== GIT_STATUS_CLONING) {
+        clearInterval(handle);
+      }
+    }, 5000);
+    setTimeout(() => {
+      logsViewRef.value?.scrollToBottom();
+      console.debug(logsViewRef.value?.scrollToBottom);
+    }, 0);
+  } else {
+    clearInterval(handle);
+  }
+};
+watch(dialogVisible, update);
+onMounted(update);
+</script>
+
+<template>
+  <cl-dialog
+    :visible="dialogVisible"
+    :title="t('components.git.form.cloneLogs')"
+    @close="store.commit(`${ns}/hideDialog`)"
+    @confirm="store.commit(`${ns}/hideDialog`)"
+  >
+    <cl-logs-view ref="logsViewRef" :logs="state.form?.clone_logs || []" />
+  </cl-dialog>
+</template>
+
+<style scoped lang="scss"></style>

src/components/git/GitPath.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClGitPath' });
+
+import { translate } from '@/utils';
+import { FILE_ROOT } from '@/constants';
+
+const t = translate;
+defineProps<{
+  path?: string;
+}>();
+</script>
+
+<template>
+  <template v-if="path">{{ path }}</template>
+  <template v-else>
+    {{ FILE_ROOT }} ({{ t('components.file.rootDirectory') }})
+  </template>
+</template>
+
+<style scoped lang="scss"></style>

src/components/index.ts

@@ -1,3 +1,4 @@
+import Box from './box/Box.vue';
 import Button from './button/Button.vue';
 import FaIconButton from './button/FaIconButton.vue';
 import IconButton from './button/IconButton.vue';
@@ -59,6 +60,9 @@ import CreateGitSpiderDialog from './git/CreateGitSpiderDialog.vue';
 import GitBranchSelect from './git/GitBranchSelect.vue';
 import GitFileStatus from './git/GitFileStatus.vue';
 import GitForm from './git/GitForm.vue';
+import GitLogsBox from './git/GitLogsBox.vue';
+import GitLogsDialog from './git/GitLogsDialog.vue';
+import GitPath from './git/GitPath.vue';
 import GitRepo from './git/GitRepo.vue';
 import GitStatus from './git/GitStatus.vue';
 import UploadGitFilesDialog from './git/UploadGitFilesDialog.vue';
@@ -149,6 +153,7 @@ import UserRole from './user/UserRole.vue';
 import useUser from './user/useUser';
 
 export {
+  Box as ClBox,
   Button as ClButton,
   FaIconButton as ClFaIconButton,
   IconButton as ClIconButton,
@@ -210,6 +215,9 @@ export {
   GitBranchSelect as ClGitBranchSelect,
   GitFileStatus as ClGitFileStatus,
   GitForm as ClGitForm,
+  GitLogsBox as ClGitLogsBox,
+  GitLogsDialog as ClGitLogsDialog,
+  GitPath as ClGitPath,
   GitRepo as ClGitRepo,
   GitStatus as ClGitStatus,
   UploadGitFilesDialog as ClUploadGitFilesDialog,

src/components/tag/Tag.vue

@@ -153,7 +153,7 @@ onMounted(() => {
   margin-right: 5px;
 }
 
-.tag:deep(.suffix-icon) {
+.tag:not(.no-label):deep(.suffix-icon) {
   margin-left: 5px;
 }
 </style>

src/i18n/lang/en/components/git.ts

@@ -12,6 +12,7 @@ const git: LComponentsGit = {
     autoPull: 'Auto Pull',
     urlInvalid: 'Invalid URL',
     spider: 'Spider',
+    cloneLogs: 'Clone Logs',
   },
   common: {
     currentBranch: 'Current Branch',
@@ -59,6 +60,12 @@ const git: LComponentsGit = {
         tooltip: 'Loading Git data from remote, please wait...',
       },
     },
+    box: {
+      title: {
+        pull: 'Git Pull',
+        push: 'Git Push',
+      },
+    },
   },
   branches: {
     select: 'Select Branch',

src/i18n/lang/en/components/spider.ts

@@ -13,6 +13,7 @@ const spider: LComponentsSpider = {
     incrementalSync: 'Incremental Sync',
     autoInstall: 'Auto Install',
     autoInstallDisabled: 'Auto Install (available in Crawlab Pro)',
+    git: 'Git Repo',
     gitRootPath: 'Git Path',
   },
   actions: {

src/i18n/lang/zh/components/git.ts

@@ -12,6 +12,7 @@ const git: LComponentsGit = {
     autoPull: '自动拉取',
     urlInvalid: '无效 URL',
     spider: '爬虫',
+    cloneLogs: '克隆日志',
   },
   common: {
     currentBranch: '当前分支',
@@ -49,6 +50,12 @@ const git: LComponentsGit = {
         },
       },
     },
+    box: {
+      title: {
+        pull: '拉取代码',
+        push: '推送代码',
+      },
+    },
     actions: {
       pull: '拉取代码',
       commit: '提交代码',

src/i18n/lang/zh/components/spider.ts

@@ -13,6 +13,7 @@ const spider: LComponentsSpider = {
     incrementalSync: '增量同步文件',
     autoInstall: '自动安装依赖',
     autoInstallDisabled: '自动安装依赖 (仅限 Crawlab Pro)',
+    git: 'Git 仓库',
     gitRootPath: 'Git 仓库路径',
   },
   actions: {

src/interfaces/components/dialog/Dialog.d.ts

@@ -1,4 +1,4 @@
-type DialogKey = 'create' | 'edit' | 'run' | 'uploadFiles';
+type DialogKey = 'create' | 'edit' | 'run' | 'uploadFiles' | 'logs';
 
 interface DialogVisible {
   createEdit: boolean;

src/interfaces/i18n/components/git.d.ts

@@ -12,6 +12,7 @@ interface LComponentsGit {
     autoPull: string;
     urlInvalid: string;
     spider: string;
+    cloneLogs: string;
   };
   common: {
     currentBranch: string;
@@ -49,6 +50,12 @@ interface LComponentsGit {
         };
       };
     };
+    box: {
+      title: {
+        pull: string;
+        push: string;
+      };
+    };
     actions: {
       pull: string;
       commit: string;

src/interfaces/i18n/components/spider.d.ts

@@ -13,6 +13,7 @@ interface LComponentsSpider {
     incrementalSync: string;
     autoInstall: string;
     autoInstallDisabled: string;
+    git: string;
     gitRootPath: string;
   };
   actions: {

src/interfaces/models/git.d.ts

@@ -49,5 +49,6 @@ export declare global {
     error?: string;
     auto_pull?: boolean;
     spiders?: Spider[];
+    clone_logs?: string[];
   }
 }