From dc5028ee3ab77a448422d82ca9e76cd9e17dcf5b Mon Sep 17 00:00:00 2001 From: vapao Date: Sun, 7 Mar 2021 18:50:57 +0800 Subject: [PATCH] add component AppSelector --- spug_web/src/components/AppSelector.js | 103 +++++++++++++++ spug_web/src/components/index.js | 2 + spug_web/src/components/index.module.less | 41 ++++++ spug_web/src/libs/functools.js | 9 ++ .../src/pages/deploy/request/SelectApp.js | 120 ------------------ spug_web/src/pages/deploy/request/index.js | 8 +- .../src/pages/deploy/request/index.module.css | 38 ------ spug_web/src/pages/deploy/request/store.js | 14 +- 8 files changed, 170 insertions(+), 165 deletions(-) create mode 100644 spug_web/src/components/AppSelector.js delete mode 100644 spug_web/src/pages/deploy/request/SelectApp.js delete mode 100644 spug_web/src/pages/deploy/request/index.module.css diff --git a/spug_web/src/components/AppSelector.js b/spug_web/src/components/AppSelector.js new file mode 100644 index 0000000..7ebc951 --- /dev/null +++ b/spug_web/src/components/AppSelector.js @@ -0,0 +1,103 @@ +/** + * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug + * Copyright (c) + * Released under the AGPL-3.0 License. + */ +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 { includes, http } from 'libs'; +import styles from './index.module.less'; +import envStore from 'pages/config/environment/store'; +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([]); + + useEffect(() => { + setFetching(true); + http.get('/api/app/deploy/') + .then(res => setDeploys(res)) + .finally(() => setFetching(false)) + if (!envStore.records.length) { + envStore.fetchRecords().then(_initEnv) + } else { + _initEnv() + } + }, []) + + function _initEnv() { + if (envStore.records.length) { + setEnvId(envStore.records[0].id) + } + } + + 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 (props.filter) records = records.filter(x => props.filter(x)); + return ( + +
+
+ + setEnvId(selectedKeys[0])}> + {envStore.records.map(item => {item.name})} + + +
+ +
+ +
+
{lds.get(envStore.idMap, `${env_id}.name`)}
+ setSearch(e.target.value)}/> +
+ {records.map(item => ( + + + + ))} + {records.length === 0 && +
该环境下还没有可发布或构建的应用哦，快去应用管理创建应用发布配置吧。
} + +
+
+ + ) +}) diff --git a/spug_web/src/components/index.js b/spug_web/src/components/index.js index 0d38fb5..02ab8d0 100644 --- a/spug_web/src/components/index.js +++ b/spug_web/src/components/index.js @@ -14,6 +14,7 @@ import ACEditor from './ACEditor'; import Action from './Action'; import TableCard from './TableCard'; import Breadcrumb from './Breadcrumb'; +import AppSelector from './AppSelector'; export { StatisticsCard, @@ -27,4 +28,5 @@ export { Action, TableCard, Breadcrumb, + AppSelector, } diff --git a/spug_web/src/components/index.module.less b/spug_web/src/components/index.module.less index c5ca352..8a98153 100644 --- a/spug_web/src/components/index.module.less +++ b/spug_web/src/components/index.module.less @@ -143,3 +143,44 @@ line-height: 50px; } } + +.appSelector { + display: flex; + background-color: #fff; + padding: 16px 0; + min-height: 500px; + + .left { + flex: 2; + border-right: 1px solid #e8e8e8; + } + + .right { + flex: 7; + padding: 8px 40px; + } + + .title { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; + 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; + } + + .tips { + margin-top: 32px; + color: #888; + } +} diff --git a/spug_web/src/libs/functools.js b/spug_web/src/libs/functools.js index b6f9771..fd01bea 100644 --- a/spug_web/src/libs/functools.js +++ b/spug_web/src/libs/functools.js @@ -36,6 +36,15 @@ export function hasHostPermission(id) { return isSuper || hostPerms.includes(id) } +export function includes(s, key) { + key = key.toLowerCase(); + if (s) { + return s.toLowerCase().includes(key) + } else { + return false + } +} + // 清理输入的命令中包含的\r符号 export function cleanCommand(text) { return text ? text.replace(/\r\n/g, '\n') : '' diff --git a/spug_web/src/pages/deploy/request/SelectApp.js b/spug_web/src/pages/deploy/request/SelectApp.js deleted file mode 100644 index dfa95d6..0000000 --- a/spug_web/src/pages/deploy/request/SelectApp.js +++ /dev/null @@ -1,120 +0,0 @@ -/** - * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug - * Copyright (c) - * Released under the AGPL-3.0 License. - */ -import React 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 store from './store'; -import styles from './index.module.css'; -import envStore from 'pages/config/environment/store'; -import lds from 'lodash'; - -@observer -class SelectApp extends React.Component { - constructor(props) { - super(props); - this.state = { - env_id: 0, - search: '' - } - } - - componentDidMount() { - store.loadDeploys(); - if (envStore.records.length === 0) { - envStore.fetchRecords().then(this._initEnv) - } else { - this._initEnv() - } - } - - componentWillUnmount() { - store.refs = {} - } - - _initEnv = () => { - if (envStore.records.length) { - this.setState({env_id: envStore.records[0].id}) - } - }; - - handleClick = (deploy) => { - store.record = {deploy_id: deploy.id, app_host_ids: deploy.host_ids}; - if (deploy.extend === '1') { - store.ext1Visible = true - } else { - store.ext2Visible = true - } - store.addVisible = false - }; - - handleRef = (el, id) => { - if (el && !store.refs.hasOwnProperty(id)) { - setTimeout(() => store.refs[id] = el.scrollWidth > el.clientWidth, 200) - } - }; - - render() { - const {env_id} = this.state; - let records = store.deploys.filter(x => x.env_id === Number(env_id)); - if (this.state.search) { - records = records.filter(x => x['app_name'].toLowerCase().includes(this.state.search.toLowerCase())) - } - return ( - store.addVisible = false} - footer={null}> -
-
- - this.setState({env_id: selectedKeys[0]})}> - {envStore.records.map(item => {item.name})} - - -
- -
- -
-
{lds.get(envStore.idMap, `${env_id}.name`)}
- this.setState({search: e.target.value})}/> -
- {records.map(item => ( - - - - ))} - {records.length === 0 && -
该环境下还没有可发布的应用哦，快去应用管理创建应用发布配置吧。
} - -
-
- - ) - } -} - -export default SelectApp diff --git a/spug_web/src/pages/deploy/request/index.js b/spug_web/src/pages/deploy/request/index.js index 75d46ae..4137f3d 100644 --- a/spug_web/src/pages/deploy/request/index.js +++ b/spug_web/src/pages/deploy/request/index.js @@ -7,8 +7,7 @@ import React from 'react'; import { observer } from 'mobx-react'; import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons'; import { Form, Select, DatePicker, Modal, Input, message } from 'antd'; -import { SearchForm, AuthDiv, AuthButton, Breadcrumb } from 'components'; -import SelectApp from './SelectApp'; +import { SearchForm, AuthDiv, AuthButton, Breadcrumb, AppSelector } from 'components'; import Ext1Form from './Ext1Form'; import Ext2Form from './Ext2Form'; import Approve from './Approve'; @@ -102,7 +101,10 @@ class Index extends React.Component { - {store.addVisible && } + store.addVisible = false} + onSelect={store.confirmAdd}/> {store.ext1Visible && } {store.ext2Visible && } {store.approveVisible && } diff --git a/spug_web/src/pages/deploy/request/index.module.css b/spug_web/src/pages/deploy/request/index.module.css deleted file mode 100644 index 3e47ec9..0000000 --- a/spug_web/src/pages/deploy/request/index.module.css +++ /dev/null @@ -1,38 +0,0 @@ -.container { - display: flex; - background-color: #fff; - padding: 16px 0; - min-height: 500px; -} -.left { - flex: 2; - border-right: 1px solid #e8e8e8; -} -.right { - flex: 7; - padding: 8px 40px; -} - -.title { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; - 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; -} - -.tips { - margin-top: 32px; - color: #888; -} \ No newline at end of file diff --git a/spug_web/src/pages/deploy/request/store.js b/spug_web/src/pages/deploy/request/store.js index d21c54b..2df3303 100644 --- a/spug_web/src/pages/deploy/request/store.js +++ b/spug_web/src/pages/deploy/request/store.js @@ -8,12 +8,8 @@ import http from 'libs/http'; class Store { @observable records = []; - @observable deploys = []; - @observable types = []; @observable record = {}; - @observable refs = {}; @observable counter = {}; - @observable isLoading = false; @observable isFetching = false; @observable addVisible = false; @observable ext1Visible = false; @@ -64,6 +60,16 @@ class Store { } }; + confirmAdd = (deploy) => { + this.record = {deploy_id: deploy.id, app_host_ids: deploy.host_ids}; + if (deploy.extend === '1') { + this.ext1Visible = true + } else { + this.ext2Visible = true + } + this.addVisible = false + }; + showForm = (info) => { this.record = info; if (info['app_extend'] === '1') {