Merge branch 'master' of github.com:veops/cmdb

Makefile

@@ -1,37 +1,52 @@
-.PHONY: env clean api ui worker
+MYSQL_ROOT_PASSWORD ?= root
+MYSQL_PORT ?= 3306
+REDIS_PORT ?= 6379
 
-help:
+default: help
-	@echo "  env         create a development environment using pipenv"
+help:  ## display this help
-	@echo "  deps        install dependencies using pip"
+	@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n  make \033[36m<target>\033[0m\n"} /^[a-zA-Z0-9_-]+:.*?##/ { printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2 } /^##@/ { printf "\n\033[1m%s\033[0m\n", substr($$0, 5) } ' $(MAKEFILE_LIST)
-	@echo "  clean       remove unwanted files like .pyc's"
+.PHONY: help
-	@echo "  lint        check style with flake8"
-	@echo "  api         start api server"
-	@echo "  ui          start ui  server"
-	@echo "  worker      start async tasks worker"
 
-env:
+env: ## create a development environment using pipenv
 	sudo easy_install pip && \
 	pip install pipenv -i https://pypi.douban.com/simple && \
 	npm install yarn && \
 	make deps
+.PHONY: env
 
-deps:
+docker-mysql: ## deploy MySQL use docker
+	@docker run --name mysql -p ${MYSQL_PORT}:3306 -e MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD} -d mysql:latest
+.PHONY: docker-mysql
+
+docker-redis: ## deploy Redis use docker
+	@docker run --name redis -p ${REDIS_PORT}:6379 -d redis:latest
+.PHONY: docker-redis
+
+deps: ## install dependencies using pip
+	cd cmdb-api && \
 	pipenv install --dev && \
 	pipenv run flask db-setup && \
 	pipenv run flask cmdb-init-cache && \
+	cd .. && \
     cd cmdb-ui && yarn install && cd ..
+.PHONY: deps
 
-api:
+api: ## start api server
 	cd cmdb-api && pipenv run flask run -h 0.0.0.0
+.PHONY: api
 
-worker:
+worker: ## start async tasks worker
 	cd cmdb-api && pipenv run celery -A celery_worker.celery worker -E -Q one_cmdb_async --concurrency=1 -D && pipenv run celery -A celery_worker.celery worker -E -Q acl_async --concurrency=1 -D
+.PHONY: worker
 
-ui:
+ui: ## start ui server
 	cd cmdb-ui && yarn run serve
+.PHONY: ui
 
-clean:
+clean: ## remove unwanted files like .pyc's
 	pipenv run flask clean
+.PHONY: clean
 
-lint:
+lint: ## check style with flake8
 	flake8 --exclude=env .
+.PHONY: lint

README.md

@@ -5,7 +5,7 @@
 [![API](https://img.shields.io/badge/API-Flask-brightgreen)](https://github.com/pallets/flask)
 
 [English](docs/README_en.md) / [中文](README.md)
-
+- 产品文档：https://veops.cn/docs/
 - 在线体验: <a href="https://cmdb.veops.cn" target="_blank">CMDB</a>
   - username: demo 或者 admin
   - password: 123456

cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue

@@ -18,18 +18,30 @@
       keep-source
       :max-height="windowHeight - 180"
       class="ops-stripe-table"
+      :row-class-name="rowClass"
     >
       <vxe-column field="source_ci_type_name" title="源模型英文名"></vxe-column>
-      <vxe-column field="relation_type" title="关联类型"></vxe-column>
+      <vxe-column field="relation_type" title="关联类型">
+        <template #default="{row}">
+          <span style="color:#2f54eb" v-if="row.isParent">被</span>
+          {{ row.relation_type }}
+        </template>
+      </vxe-column>
       <vxe-column field="alias" title="目标模型名"></vxe-column>
       <vxe-column field="constraint" title="关系约束">
         <template #default="{row}">
-          <span>{{ constraintMap[row.constraint] }}</span>
+          <span v-if="row.isParent && constraintMap[row.constraint]">{{
+            constraintMap[row.constraint]
+              .split('')
+              .reverse()
+              .join('')
+          }}</span>
+          <span v-else>{{ constraintMap[row.constraint] }}</span>
         </template>
       </vxe-column>
       <vxe-column field="operation" title="操作" width="100">
         <template #default="{row}">
-          <a-space>
+          <a-space v-if="!row.isParent && row.source_ci_type_id">
             <a @click="handleOpenGrant(row)"><a-icon type="user-add"/></a>
             <a-popconfirm title="确认删除？" @confirm="handleDelete(row)">
               <a style="color: red;"><a-icon type="delete"/></a>
@@ -37,6 +49,12 @@
           </a-space>
         </template>
       </vxe-column>
+      <template #empty>
+        <div>
+          <img :style="{ width: '100px' }" :src="require('@/assets/data_empty.png')" />
+          <div>暂无数据</div>
+        </div>
+      </template>
     </vxe-table>
     <a-modal
       :closable="false"
@@ -95,7 +113,13 @@
 </template>
 
 <script>
-import { createRelation, deleteRelation, getCITypeChildren, getRelationTypes } from '@/modules/cmdb/api/CITypeRelation'
+import {
+  createRelation,
+  deleteRelation,
+  getCITypeChildren,
+  getCITypeParent,
+  getRelationTypes,
+} from '@/modules/cmdb/api/CITypeRelation'
 import { getCITypes } from '@/modules/cmdb/api/CIType'
 import CMDBGrant from '../../components/cmdbGrant'
 
@@ -127,6 +151,7 @@ export default {
         '2': '多对多',
       },
       tableData: [],
+      parentTableData: [],
     }
   },
   computed: {
@@ -137,12 +162,25 @@ export default {
       return this.$store.state.windowHeight
     },
   },
-  mounted() {
+  async mounted() {
     this.getCITypes()
     this.getRelationTypes()
+    await this.getCITypeParent()
     this.getData()
   },
   methods: {
+    async getCITypeParent() {
+      await getCITypeParent(this.CITypeId).then((res) => {
+        this.parentTableData = res.parents.map((item) => {
+          return {
+            ...item,
+            source_ci_type_name: this.CITypeName,
+            source_ci_type_id: this.CITypeId,
+            isParent: true,
+          }
+        })
+      })
+    },
     getData() {
       getCITypeChildren(this.CITypeId).then((res) => {
         const data = res.children.map((obj) => {
@@ -152,7 +190,11 @@ export default {
             source_ci_type_id: this.CITypeId,
           }
         })
-        this.tableData = data
+        if (this.parentTableData && this.parentTableData.length) {
+          this.tableData = [...data, { isDivider: true }, ...this.parentTableData]
+        } else {
+          this.tableData = data
+        }
       })
     },
     getCITypes() {
@@ -217,8 +259,25 @@ export default {
     filterOption(input, option) {
       return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     },
+    rowClass({ row }) {
+      if (row.isDivider) return 'relation-table-divider'
+      if (row.isParent) return 'relation-table-parent'
+    },
   },
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less">
+.ops-stripe-table .vxe-body--row.row--stripe.relation-table-divider {
+  background-color: #b1b8d3 !important;
+}
+.ops-stripe-table .vxe-body--row.relation-table-parent {
+  background-color: #f5f8ff !important;
+}
+.relation-table-divider {
+  td {
+    height: 1px !important;
+    line-height: 1px !important;
+  }
+}
+</style>

docs/README_en.md

@@ -7,7 +7,7 @@
 [English](README_en.md) / [中文](../README.md)
 
 ## DEMO ONLINE
-
+- Product document：https://veops.cn/docs/
 - Preview online: <a href="https://cmdb.veops.cn" target="_blank">CMDB</a>
   - username: demo
   - password: 123456