diff --git a/spug_api/apps/app/models.py b/spug_api/apps/app/models.py index a32e97c2..1ad29016 100644 --- a/spug_api/apps/app/models.py +++ b/spug_api/apps/app/models.py @@ -59,6 +59,7 @@ def extend_obj(self): def to_dict(self, *args, **kwargs): deploy = super().to_dict(*args, **kwargs) + deploy['app_key'] = self.app_key if hasattr(self, 'app_key') else None deploy['app_name'] = self.app_name if hasattr(self, 'app_name') else None deploy['host_ids'] = json.loads(self.host_ids) deploy['rst_notify'] = json.loads(self.rst_notify) diff --git a/spug_api/apps/app/views.py b/spug_api/apps/app/views.py index a6e83757..38744046 100644 --- a/spug_api/apps/app/views.py +++ b/spug_api/apps/app/views.py @@ -90,7 +90,9 @@ def get(self, request): perms = request.user.deploy_perms form.app_id__in = perms['apps'] form.env_id__in = perms['envs'] - deploys = Deploy.objects.filter(**form).annotate(app_name=F('app__name')).order_by('-app__sort_id') + deploys = Deploy.objects.filter(**form) \ + .annotate(app_name=F('app__name'), app_key=F('app__key')) \ + .order_by('-app__sort_id') return json_response(deploys) def post(self, request): diff --git a/spug_web/src/components/AppSelector.js b/spug_web/src/components/AppSelector.js index 7ebc9513..41f1ad20 100644 --- a/spug_web/src/components/AppSelector.js +++ b/spug_web/src/components/AppSelector.js @@ -6,8 +6,8 @@ import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; import { observer } from 'mobx-react'; -import { Modal, Button, Menu, Spin, Input, Tooltip } from 'antd'; -import { OrderedListOutlined, BuildOutlined } from '@ant-design/icons'; +import { Modal, Menu, Spin, Input } from 'antd'; +import { OrderedListOutlined, BuildOutlined, SearchOutlined } from '@ant-design/icons'; import { includes, http } from 'libs'; import styles from './index.module.less'; import envStore from 'pages/config/environment/store'; @@ -15,7 +15,6 @@ import lds from 'lodash'; export default observer(function AppSelector(props) { const [fetching, setFetching] = useState(false); - const [refs, setRefs] = useState({}); const [env_id, setEnvId] = useState(); const [search, setSearch] = useState(); const [deploys, setDeploys] = useState([]); @@ -38,17 +37,8 @@ export default observer(function AppSelector(props) { } } - function handleRef(el, id) { - if (el && !refs.hasOwnProperty(id)) { - setTimeout(() => { - refs[id] = el.scrollWidth > el.clientWidth; - setRefs({...refs}) - }, 200) - } - } - let records = deploys.filter(x => x.env_id === Number(env_id)); - if (search) records = records.filter(x => includes(x['app_name'], search)); + if (search) records = records.filter(x => includes(x['app_name'], search) || includes(x['app_key'], search)); if (props.filter) records = records.filter(x => props.filter(x)); return (
{lds.get(envStore.idMap, `${env_id}.name`)}
- } onChange={e => setSearch(e.target.value)}/>
- {records.map(item => ( - - - - ))} - {records.length === 0 && -
该环境下还没有可发布或构建的应用哦,快去应用管理创建应用发布配置吧。
} +
+ {records.map(item => ( +
props.onSelect(item)}> + {item.extend === '1' ? : } +
{item.app_name}
+
{item.app_key}
+
+ ))} + {records.length === 0 && +
该环境下还没有可发布或构建的应用哦,快去应用管理创建应用发布配置吧。
} +
diff --git a/spug_web/src/components/index.module.less b/spug_web/src/components/index.module.less index 16442a74..e30f55e7 100644 --- a/spug_web/src/components/index.module.less +++ b/spug_web/src/components/index.module.less @@ -173,19 +173,38 @@ display: flex; justify-content: space-between; align-items: center; - margin-bottom: 12px; + margin-bottom: 24px; color: rgba(0, 0, 0, .85); font-weight: 500; font-size: 20px; line-height: 28px; } - .appBlock { - margin-top: 20px; - width: 165px; - height: 60px; - font-size: 18px; - margin-right: 20px; + .appItem { + width: 560px; + display: flex; + align-items: center; + padding: 12px 16px; + margin-bottom: 8px; + background: #fafafa; + border-radius: 2px; + + :global(.anticon) { + color: #1890ff; + margin-right: 16px; + } + + .body { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .appItem:hover { + cursor: pointer; + background: #e6f7ff; } .tips {