加入git 日志

frontend/src/components/Settings/GitSettings.vue

@@ -1,159 +1,217 @@
 <template>
-  <div class="git-settings">
-    <h3 class="title">{{$t('Git Settings')}}</h3>
-    <el-form
-      class="git-settings-form"
-      label-width="150px"
-      :model="spiderForm"
-      ref="git-settings-form"
-    >
-      <el-form-item
-        :label="$t('Git URL')"
-        prop="git_url"
-        required
+  <el-tabs
+    v-model="activeTabName"
+    class="git-settings"
+  >
+    <el-tab-pane :label="$t('Settings')" name="settings">
+      <el-form
+        class="git-settings-form"
+        label-width="150px"
+        :model="spiderForm"
+        ref="git-settings-form"
       >
-        <el-input
-          v-model="spiderForm.git_url"
-          :placeholder="$t('Git URL')"
-          @blur="onGitUrlChange"
+        <el-form-item
+          :label="$t('Git URL')"
+          prop="git_url"
+          required
         >
-        </el-input>
-      </el-form-item>
-      <el-form-item
-        :label="$t('Has Credential')"
-        prop="git_has_credential"
-      >
-        <el-switch
-          v-model="spiderForm.git_has_credential"
-          size="small"
-          active-color="#67C23A"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="spiderForm.git_has_credential"
-        :label="$t('Git Username')"
-        prop="git_username"
-      >
-        <el-input
-          v-model="spiderForm.git_username"
-          :placeholder="$t('Git Username')"
+          <el-input
+            v-model="spiderForm.git_url"
+            :placeholder="$t('Git URL')"
+            @blur="onGitUrlChange"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('Has Credential')"
+          prop="git_has_credential"
         >
-        </el-input>
-      </el-form-item>
-      <el-form-item
-        v-if="spiderForm.git_has_credential"
-        :label="$t('Git Password')"
-        prop="git_password"
-      >
-        <el-input
-          v-model="spiderForm.git_password"
-          :placeholder="$t('Git Password')"
-          type="password"
-        >
-        </el-input>
-      </el-form-item>
-      <el-form-item
-        :label="$t('Git Branch')"
-        prop="git_branch"
-        required
-      >
-        <el-select
-          v-model="spiderForm.git_branch"
-          :placeholder="$t('Git Branch')"
-          :disabled="!spiderForm.git_url || isGitBranchesLoading"
-        >
-          <el-option
-            v-for="op in gitBranches"
-            :key="op"
-            :value="op"
-            :label="op"
+          <el-switch
+            v-model="spiderForm.git_has_credential"
+            size="small"
+            active-color="#67C23A"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        :label="$t('Auto Sync')"
-        prop="git_auto_sync"
-      >
-        <el-switch
-          v-model="spiderForm.git_auto_sync"
-          size="small"
-          active-color="#67C23A"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="spiderForm.git_auto_sync"
-        :label="$t('Sync Frequency')"
-        prop="git_sync_frequency"
-        required
-      >
-        <el-select
-          v-model="spiderForm.git_sync_frequency"
-          :placeholder="$t('Sync Frequency')"
+        </el-form-item>
+        <el-form-item
+          v-if="spiderForm.git_has_credential"
+          :label="$t('Git Username')"
+          prop="git_username"
         >
-          <el-option
-            v-for="op in syncFrequencies"
-            :key="op.value"
-            :value="op.value"
-            :label="op.label"
+          <el-input
+            v-model="spiderForm.git_username"
+            :placeholder="$t('Git Username')"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          v-if="spiderForm.git_has_credential"
+          :label="$t('Git Password')"
+          prop="git_password"
+        >
+          <el-input
+            v-model="spiderForm.git_password"
+            :placeholder="$t('Git Password')"
+            type="password"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('Git Branch')"
+          prop="git_branch"
+          required
+        >
+          <el-select
+            v-model="spiderForm.git_branch"
+            :placeholder="$t('Git Branch')"
+            :disabled="!spiderForm.git_url || isGitBranchesLoading"
+          >
+            <el-option
+              v-for="op in gitBranches"
+              :key="op"
+              :value="op"
+              :label="op"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          :label="$t('Auto Sync')"
+          prop="git_auto_sync"
+        >
+          <el-switch
+            v-model="spiderForm.git_auto_sync"
+            size="small"
+            active-color="#67C23A"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        v-if="spiderForm.git_sync_error"
-        :label="$t('Error Message')"
-        prop="git_git_sync_error"
-      >
-        <el-alert
-          type="error"
-          :closable="false"
+        </el-form-item>
+        <el-form-item
+          v-if="spiderForm.git_auto_sync"
+          :label="$t('Sync Frequency')"
+          prop="git_sync_frequency"
+          required
         >
-          {{spiderForm.git_sync_error}}
-        </el-alert>
-      </el-form-item>
-      <el-form-item
-        v-if="sshPublicKey"
-        :label="$t('SSH Public Key')"
-      >
-        <el-alert
-          type="info"
-          :closable="false"
+          <el-select
+            v-model="spiderForm.git_sync_frequency"
+            :placeholder="$t('Sync Frequency')"
+          >
+            <el-option
+              v-for="op in syncFrequencies"
+              :key="op.value"
+              :value="op.value"
+              :label="op.label"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="spiderForm.git_sync_error"
+          :label="$t('Error Message')"
+          prop="git_git_sync_error"
         >
-          {{sshPublicKey}}
-        </el-alert>
-        <span class="copy" @click="copySshPublicKey">
+          <el-alert
+            type="error"
+            :closable="false"
+          >
+            {{spiderForm.git_sync_error}}
+          </el-alert>
+        </el-form-item>
+        <el-form-item
+          v-if="sshPublicKey"
+          :label="$t('SSH Public Key')"
+        >
+          <el-alert
+            type="info"
+            :closable="false"
+          >
+            {{sshPublicKey}}
+          </el-alert>
+          <span class="copy" @click="copySshPublicKey">
           <i class="el-icon-copy-document"></i>
           {{$t('Copy')}}
         </span>
-        <input id="ssh-public-key" v-model="sshPublicKey" v-show="true">
-      </el-form-item>
-    </el-form>
-    <div class="action-wrapper">
-      <el-button
-        size="small"
-        type="warning"
-        :disabled="isGitResetLoading"
-        :icon="isGitResetLoading ? 'el-icon-loading' : 'el-icon-refresh-left'"
-        @click="onReset"
+          <input id="ssh-public-key" v-model="sshPublicKey" v-show="true">
+        </el-form-item>
+      </el-form>
+      <div class="action-wrapper">
+        <el-button
+          size="small"
+          type="warning"
+          :disabled="isGitResetLoading"
+          :icon="isGitResetLoading ? 'el-icon-loading' : 'el-icon-refresh-left'"
+          @click="onReset"
+        >
+          {{$t('Reset')}}
+        </el-button>
+        <el-button
+          size="small"
+          type="danger"
+          :icon="isGitSyncLoading ? 'el-icon-loading' : 'el-icon-refresh'"
+          :disabled="!spiderForm.git_url || isGitSyncLoading"
+          @click="onSync"
+        >
+          {{$t('Sync')}}
+        </el-button>
+        <el-button size="small" type="success" @click="onSave" icon="el-icon-check">
+          {{$t('Save')}}
+        </el-button>
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="Log" name="log">
+      <el-timeline
+        class="log"
       >
-        {{$t('Reset')}}
-      </el-button>
-      <el-button
-        size="small"
-        type="danger"
-        :icon="isGitSyncLoading ? 'el-icon-loading' : 'el-icon-refresh'"
-        :disabled="!spiderForm.git_url || isGitSyncLoading"
-        @click="onSync"
-      >
-        {{$t('Sync')}}
-      </el-button>
-      <el-button size="small" type="success" @click="onSave" icon="el-icon-check">
-        {{$t('Save')}}
-      </el-button>
-    </div>
-  </div>
+        <el-timeline-item
+          v-for="c in commits"
+          :key="c.hash"
+          :timestamp="c.ts"
+          :type="c.is_head ? 'primary' : ''"
+        >
+          <div class="commit">
+            <div class="row">
+              <div class="message">
+                {{c.message}}
+              </div>
+              <div class="author">
+                {{c.author}} ({{c.email}})
+              </div>
+            </div>
+            <div class="row" style="margin-top: 5px">
+              <div class="tags">
+                <el-tag
+                  v-if="c.is_head"
+                  type="primary"
+                  size="mini"
+                >
+                  <i class="fa fa-tag"></i>
+                  HEAD
+                </el-tag>
+                <el-tag
+                  v-for="b in c.branches"
+                  :key="b.name"
+                  :type="b.label === 'master' ? 'danger' : 'warning'"
+                  size="mini"
+                >
+                  <i class="fa fa-tag"></i>
+                  {{b.label}}
+                </el-tag>
+                <el-tag
+                  v-for="t in c.tags"
+                  :key="t.name"
+                  type="success"
+                  size="mini"
+                >
+                  <i class="fa fa-tag"></i>
+                  {{t.label}}
+                </el-tag>
+              </div>
+            </div>
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
 <script>
+import dayjs from 'dayjs'
 import {
   mapState
 } from 'vuex'
@@ -176,7 +234,9 @@ export default {
         { label: '12h', value: '0 0 0/12 * * *' },
         { label: '1d', value: '0 0 0 0 * *' }
       ],
-      sshPublicKey: ''
+      sshPublicKey: '',
+      activeTabName: 'settings',
+      commits: []
     }
   },
   computed: {
@@ -217,6 +277,7 @@ export default {
         }
       } finally {
         this.isGitSyncLoading = false
+        this.updateGit()
         await this.$store.dispatch('spider/getSpiderData', this.$route.params.id)
       }
       this.$st.sendEv('爬虫详情', 'Git 设置', '同步')
@@ -240,6 +301,7 @@ export default {
             }
           } finally {
             this.isGitResetLoading = false
+            this.updateGit()
           }
         })
       this.$st.sendEv('爬虫详情', 'Git 设置', '点击重置')
@@ -255,13 +317,24 @@ export default {
       document.execCommand('copy')
       this.$message.success(this.$t('SSH Public Key is copied to the clipboard'))
       this.$st.sendEv('爬虫详情', 'Git 设置', '拷贝 SSH 公钥')
+    },
+    async getCommits () {
+      const res = await this.$request.get('/git/commits', { spider_id: this.spiderForm._id })
+      this.commits = res.data.data.map(d => {
+        d.ts = dayjs(d.ts).format('YYYY-MM-DD HH:mm:ss')
+        return d
+      })
+    },
+    async updateGit () {
+      this.getCommits()
     }
   },
   async created () {
     if (this.spiderForm.git_url) {
       this.onGitUrlChange()
     }
-    await this.getSshPublicKey()
+    this.getSshPublicKey()
+    this.getCommits()
   }
 }
 </script>
@@ -318,4 +391,27 @@ export default {
     text-align: right;
     margin-top: 10px;
   }
+
+  .git-settings .log {
+    height: calc(100vh - 280px);
+    overflow: auto;
+  }
+
+  .git-settings .log .commit {
+    border-top: 1px solid rgb(244, 244, 245);
+    padding: 10px 0;
+  }
+
+  .git-settings .log .commit .row {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .git-settings .log .el-timeline-item {
+    /*cursor: pointer;*/
+  }
+
+  .git-settings .log .commit .row .tags .el-tag {
+    margin-right: 5px;
+  }
 </style>