质效管理

src/api/pipeline.js

@@ -44,3 +44,18 @@ export function deleteApplication(params) {
     method: 'delete'
   })
 }
+
+export function getQuali(data) {
+  return request({
+    url: '/manage/quali/find',
+    method: 'post',
+    data
+  })
+}
+
+export function getFlow() {
+  return request({
+    url: `/manage/pipeline/list/flow`,
+    method: 'get'
+  })
+}

src/icons/svg/pipeline.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1552544709119" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2481" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M657.198519 878.801481c0 12.633805-10.287527 22.921332-22.921332 22.921332h-99.205452v76.404442h443.0856v-76.404442h-99.355854a22.921332 22.921332 0 0 1-22.921333-22.921332V512c0-22.470125-13.415898-47.136126-32.787733-66.538041-19.401915-19.371835-44.067916-32.787733-66.568121-32.787733H389.722813a22.921332 22.921332 0 0 1-22.921332-22.951413v-244.554374c0-12.633805 10.287527-22.891252 22.921332-22.891252h99.205452v-76.404442H45.842665v76.404442h99.355854c12.633805 0 22.921332 10.257447 22.921333 22.921332V511.96992c0 22.470125 13.415898 47.166206 32.787733 66.538041 19.401915 19.401915 44.067916 32.787733 66.568121 32.787733h366.801481c12.633805 0 22.921332 10.287527 22.921332 22.951413v244.554374z m-145.048117-22.921333h99.175372v-198.681629H267.475706c-35.164091 0-71.651724-18.920627-98.964808-46.233711-27.343164-27.343164-46.233711-63.830797-46.233711-98.964808V168.119852H22.921332A22.921332 22.921332 0 0 1 0 145.198519V22.921332C0 10.287527 10.257447 0 22.921332 0h488.928266c12.633805 0 22.921332 10.287527 22.921332 22.921332v122.277187c0 12.633805-10.257447 22.921332-22.921332 22.921333h-99.205453v198.681629H756.524294c35.134011 0 71.651724 18.920627 98.964808 46.233711 27.343164 27.343164 46.233711 63.830797 46.233711 98.964808v343.880148h99.355855c12.633805 0 22.921332 10.257447 22.921332 22.921333v122.277187c0 12.633805-10.287527 22.921332-22.921332 22.921332H512.150402a22.921332 22.921332 0 0 1-22.921332-22.921332v-122.277187c0-12.633805 10.257447-22.921332 22.921332-22.921333z" fill="" p-id="2482"></path></svg>
\ No newline at end of file

src/router/index.js

@@ -126,6 +126,7 @@ export default new Router({
 })
 
 export const asyncRouterMap = [
+
   dockersRouter,
   {
     path: '/dbsync',
@@ -134,7 +135,7 @@ export const asyncRouterMap = [
     children: [
       {
         path: '',
-        component: () => import('@/views/dbconfig/sync/index'),
+        component: () => import('@/views/dbconfig/sync'),
         name: 'DB同步',
         meta: { title: '执行DB同步', icon: 'database' }
       }
@@ -148,7 +149,7 @@ export const asyncRouterMap = [
     children: [
       {
         path: 'manager',
-        component: () => import('@/views/dbconfig/manager/index'),
+        component: () => import('@/views/dbconfig/manager'),
         name: 'DB同步信息管理',
         meta: { title: 'DB同步信息管理', icon: 'mysql' }
       }
@@ -204,20 +205,26 @@ export const asyncRouterMap = [
     name: 'Pipeline',
     meta: {
       title: 'Pipeline',
-      icon: 'nested'
+      icon: 'pipeline'
     },
     children: [
       {
         path: 'application',
-        component: () => import('@/views/pipeline/application/index'),
+        component: () => import('@/views/pipeline/application'),
         name: 'application',
-        meta: { title: '应用管理', icon: 'example' }
+        meta: { title: '应用管理', icon: '' }
       },
       {
         path: 'quali',
-        component: () => import('@/views/testdata/index'),
+        component: () => import('@/views/pipeline/quali'),
         name: 'quali',
-        meta: { title: '质效管理', icon: 'tab' }
+        meta: { title: '质效管理', icon: '' }
+      },
+      {
+        path: 'manager',
+        component: () => import('@/views/pipeline/manager'),
+        name: 'manager',
+        meta: { title: '流水线管理', icon: '' }
       }
     ]
   },
@@ -267,12 +274,6 @@ export const asyncRouterMap = [
   //   ]
   // },
 
-  /** When your routing table is too long, you can split it into small modules**/
-  // componentsRouter,
-  // chartsRouter,
-  // nestedRouter,
-  // tableRouter,
-
   // {
   //   path: '/example',
   //   component: Layout,
@@ -476,5 +477,11 @@ export const asyncRouterMap = [
   //   ]
   // },
 
+  /** When your routing table is too long, you can split it into small modules**/
+  // componentsRouter,
+  // chartsRouter,
+  // nestedRouter,
+  // tableRouter,
+
   { path: '*', redirect: '/404', hidden: true }
 ]

src/views/dbconfig/manager/index.vue → src/views/dbconfig/manager.vue

@@ -7,44 +7,24 @@
     <el-table
       v-loading="listLoading"
       :data="configs"
+      :header-cell-style="{background:'#F3F4F7',color:'#555'}"
       border
-      fit
       highlight-current-row
       style="width: 100%;">
-      <el-table-column :label="$t('table.id')" prop="id" align="center" width="65">
-        <template slot-scope="scope">
-          <span>{{ scope.$index + 1 }}</span>
-        </template>
-      </el-table-column>
+      <el-table-column label="ID" type="index" align="center" width="65"/>
 
-      <el-table-column label="Database" prop="tag" align="center">
-        <template slot-scope="scope">
-          <span >{{ scope.row.dbname }}</span>
-        </template>
-      </el-table-column>
+      <el-table-column label="Database" prop="dbname" align="center"/>
 
-      <el-table-column label="Host" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.ip }}</span>
-        </template>
-      </el-table-column>
+      <el-table-column label="Host" prop="ip" align="center"/>
 
-      <el-table-column label="Port" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.port }}</span>
-        </template>
-      </el-table-column>
+      <el-table-column label="Port" prop="port" align="center"/>
 
-      <el-table-column label="Tables" align="center" min-width="300">
-        <template slot-scope="scope">
-          <span>{{ scope.row.table_list }}</span>
-        </template>
-      </el-table-column>
+      <el-table-column label="Tables" prop="table_list" align="center" min-width="300"/>
 
       <el-table-column :label="$t('table.actions')" align="center" width="180" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
-          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
+          <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
+          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
           </el-button>
         </template>
       </el-table-column>
@@ -103,7 +83,6 @@ import { getConfig, saveConfig, deleteConfig } from '@/api/dbconfig'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
 
 export default {
-  name: 'DBConfig',
   components: { Pagination },
   filters: {
   },

src/views/pipeline/manager.vue

+<template>
+  <div class="app-container">
+
+    <tree-table :data="pipes" :columns="pipesColunms" border/>
+
+  </div>
+</template>
+
+<script>
+/**
+  Auth: Lei.j1ang
+  Created: 2018/1/19-14:54
+*/
+import treeTable from '@/components/TreeTable'
+import { getFlow } from '@/api/pipeline'
+
+export default {
+  components: { treeTable },
+  data() {
+    return {
+      pipes: [],
+      pipesColunms: [
+        {
+          text: 'Name',
+          value: 'name',
+          width: 200
+        },
+        {
+          text: 'ID',
+          value: 'id',
+          width: 400
+        },
+        {
+          text: 'Type',
+          value: 'type',
+          width: 200
+        },
+        {
+          text: 'Update User',
+          value: 'user',
+          width: 200
+        },
+        {
+          text: 'Create Date',
+          value: 'updateTime',
+          width: 200
+        }
+      ]
+    }
+  },
+  created() {
+    this.getFlow()
+  },
+  methods: {
+    getFlow() {
+      getFlow().then(res => {
+        this.pipes = res.data.data
+        this.pipes.map(item => {
+          item.stages.map(item => {
+            item.tasks.map(item => {
+              item.type = `task ${item.type}`
+              return item
+            })
+            item.type = 'stage'
+            item.children = item.tasks
+            return item
+          })
+          item.children = item.stages
+          return item
+        })
+
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>

src/views/pipeline/quali.vue

+<template>
+  <div class="app-container">
+    <div style="margin-bottom:20px">
+      <el-input v-model="listQuery.repository" placeholder="项目名称" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+
+      <el-date-picker
+        v-model="dateRange"
+        :picker-options="pickerOptions2"
+        style="width:280px"
+        type="daterange"
+        align="right"
+        unlink-panels
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"/>
+
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="qualis"
+      :header-cell-style="{background:'#F3F4F7',color:'#555'}"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;">
+
+      <el-table-column label="ID" type="index" align="center" width="65"/>
+
+      <el-table-column label="项目" prop="repository" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.repository }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Task sum" prop="run" align="center"/>
+
+      <el-table-column label="Task success" prop="success" align="center"/>
+
+      <el-table-column label="Task fail" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.fail + scope.row.exception }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="成功率" align="center">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.success/scope.row.run | statusFilter">{{ scope.row.success/scope.row.run*100 | decimalsFilter }}%</el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Sonar" align="center" width="180" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" @click="handleInfo(scope.row)">详情</el-button>
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->
+
+  </div>
+</template>
+
+<script>
+import { getQuali } from '@/api/pipeline'
+import waves from '@/directive/waves' // Waves directive
+
+export default {
+  directives: { waves },
+  filters: {
+    decimalsFilter(num) {
+      return num.toFixed(2)
+    },
+    statusFilter(num) {
+      let status = 'success'
+      if (num >= 0.7 && num <= 0.9) {
+        status = 'info'
+      }
+      if (num >= 0.4 && num <= 0.7) {
+        status = 'warning'
+      }
+      if (num >= 0 && num <= 0.4) {
+        status = 'danger'
+      }
+      return status
+    }
+  },
+  data() {
+    return {
+      pickerOptions2: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      qualis: [],
+      dateRange: [],
+      listLoading: true,
+      listQuery: {}
+    }
+  },
+
+  computed: {
+
+    // dateRange: {
+    //   get: function() {
+    //     const end = new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
+    //     const start = new Date(end.getTime() - 5 * 24 * 60 * 60 * 1000)
+    //     return [start, end]
+    //   },
+    //   set: function(dates) {
+    //     this.dateRange = this.dates
+    //   }
+    // }
+  },
+  created() {
+    this.getQuali()
+  },
+
+  methods: {
+    getQuali() {
+      for (const prop in this.listQuery) {
+        if (this.listQuery[prop] === '') {
+          delete this.listQuery[prop]
+        }
+      }
+
+      this.listLoading = true
+
+      if (!this.dateRange || this.dateRange[1] === undefined) {
+        this.dateRange = []
+        this.dateRange[1] = new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
+      }
+
+      if (!this.dateRange || this.dateRange[0] === undefined) {
+        this.dateRange[0] = new Date(this.dateRange[1].getTime() - 5 * 24 * 60 * 60 * 1000)
+      }
+
+      this.listQuery.startDate = this.formartTime(this.dateRange[0])
+      this.listQuery.endDate = this.formartTime(this.dateRange[1])
+
+      getQuali(this.listQuery).then(res => {
+        this.qualis = res.data.data.sort((s1, s2) => {
+          return s1.repository.localeCompare(s2.repository)
+        })
+        this.listLoading = false
+      })
+    },
+
+    formartTime(date) {
+      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+    },
+
+    handleFilter() {
+      this.getQuali()
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>