From d3ba3aafaf9fe7a01c971db2e82c993e877b4922 Mon Sep 17 00:00:00 2001 From: lizhi Date: Tue, 19 Feb 2019 15:09:16 +0800 Subject: [PATCH 1/3] feat: Change runtime page --- src/config/runtimes.js | 5 + src/locales/zh/cluster.json | 1 + src/locales/zh/runtime.json | 5 +- src/pages/Dashboard/Runtimes/Card/index.jsx | 134 +++++++++++ src/pages/Dashboard/Runtimes/Create/index.jsx | 2 +- .../Dashboard/Runtimes/Create/index.scss | 13 +- src/pages/Dashboard/Runtimes/Detail/index.jsx | 76 +++++++ .../Dashboard/Runtimes/Detail/index.scss | 35 +++ .../Runtimes/InstanceList/columns.js | 53 ++++- .../Dashboard/Runtimes/InstanceList/index.jsx | 69 ++---- .../Runtimes/InstanceList/index.scss | 30 +-- src/pages/Dashboard/Runtimes/Modals/index.jsx | 117 ++++++++++ .../Dashboard/Runtimes/Runtime/index.jsx | 213 +----------------- src/pages/Dashboard/Runtimes/index.jsx | 6 +- src/pages/Dashboard/Runtimes/index.scss | 80 +++---- src/stores/RootStore.js | 6 +- src/stores/runtime/cluster.js | 56 +++++ src/stores/runtime/index.js | 9 + 18 files changed, 589 insertions(+), 321 deletions(-) create mode 100644 src/pages/Dashboard/Runtimes/Card/index.jsx create mode 100644 src/pages/Dashboard/Runtimes/Detail/index.jsx create mode 100644 src/pages/Dashboard/Runtimes/Detail/index.scss create mode 100644 src/pages/Dashboard/Runtimes/Modals/index.jsx create mode 100644 src/stores/runtime/cluster.js diff --git a/src/config/runtimes.js b/src/config/runtimes.js index d55df0b5..a7f81f93 100644 --- a/src/config/runtimes.js +++ b/src/config/runtimes.js @@ -32,3 +32,8 @@ export const nonUserTabs = [ { name: 'Testing env', value: 'runtime' }, { name: 'Authorization info', value: 'runtime_credential' } ]; + +export const runtimeTabs = [ + { name: 'Instance', value: '0' }, + { name: 'Agent', value: '1' } +]; diff --git a/src/locales/zh/cluster.json b/src/locales/zh/cluster.json index 5d805eef..d1e73373 100644 --- a/src/locales/zh/cluster.json +++ b/src/locales/zh/cluster.json @@ -1,5 +1,6 @@ { "Instances": "实例", + "Agent": "代理", "Instance ID": "实例 ID", "Deploy Runtime": "部署环境", "Deploy Instance": "部署实例", diff --git a/src/locales/zh/runtime.json b/src/locales/zh/runtime.json index ded73db5..e8abb9f8 100644 --- a/src/locales/zh/runtime.json +++ b/src/locales/zh/runtime.json @@ -1,4 +1,7 @@ { + "IP address": "IP 地址", + "Instance count": "实例数", + "Agent Instance count": "代理数", "Modify runtime successfully": "修改环境成功", "Switch runtime credential successfully": "切换授权信息成功", "Delete runtime successfully": "删除环境成功", @@ -8,4 +11,4 @@ "TIPS_ADD_CREDENTIAL_1": "进入API密钥管理界面", "TIPS_ADD_CREDENTIAL_2": "点击创建，并下载密钥文件", "User runtime": "运行环境" -} \ No newline at end of file +} diff --git a/src/pages/Dashboard/Runtimes/Card/index.jsx b/src/pages/Dashboard/Runtimes/Card/index.jsx new file mode 100644 index 00000000..0f0a67b0 --- /dev/null +++ b/src/pages/Dashboard/Runtimes/Card/index.jsx @@ -0,0 +1,134 @@ +import React, { Component } from 'react'; +import { inject, observer } from 'mobx-react'; +import { translate } from 'react-i18next'; +import classnames from 'classnames'; +import _ from 'lodash'; + +import { Icon, Popover } from 'components/Base'; +import { Card } from 'components/Layout'; + +import styles from '../index.scss'; + +@translate() +@inject(({ rootStore }) => ({ + runtimeStore: rootStore.runtimeStore, + clusterStore: rootStore.clusterStore, + envStore: rootStore.testingEnvStore, + credentialStore: rootStore.runtimeCredentialStore +})) +@observer +export default class RuntimeCard extends Component { + get isDetialCard() { + const { envStore } = this.props; + return !!_.get(envStore, 'runtimeToShowInstances.runtime_id'); + } + + handleClickAction = (type, id, e) => { + e.stopPropagation(); + e.preventDefault(); + const { showModal, setCurrentId } = this.props.envStore; + showModal(type); + setCurrentId(id); + }; + + renderMenu(runtime_id) { + const { t } = this.props; + return ( +
+ this.handleClickAction('modify_runtime', runtime_id, e)} + > + + {t('Modify')} + + this.handleClickAction('switch_auth', runtime_id, e)} + > + + {t('Switch authorization info')} + + this.handleClickAction('delete_runtime', runtime_id, e)} + > + + {t('Delete')} + +
+ ); + } + + render() { + const { + clusterStore, + credentialStore, + name, + description, + runtime_id, + runtime_credential_id, + zone, + onClick, + t + } = this.props; + const cntCluster = _.filter( + clusterStore.clusters, + cl => cl.cluster_type === 0 && cl.runtime_id === runtime_id + ).length; + const { credentials } = credentialStore; + const credentialName = _.get( + _.find(credentials, { runtime_credential_id }) || {}, + 'name' + ); + const agentCluster = this.isDetialCard + ? _.filter( + clusterStore.clusters, + cl => cl.cluster_type === 0 && cl.runtime_id === runtime_id + ).length + : 0; + + return ( + +
+ {name} + + + +
+
{description || ''}
+
+
+

{t('Zone')}

+

{zone}

+
+
+

{t('Instance count')}

+

+ {cntCluster} +

+
+ {this.isDetialCard && ( +
+

{t('Agent Instance count')}

+

+ {agentCluster} +

+
+ )} + +
+

{t('Authorization info')}

+

{credentialName || t('None')}

+
+
+ + ); + } +} diff --git a/src/pages/Dashboard/Runtimes/Create/index.jsx b/src/pages/Dashboard/Runtimes/Create/index.jsx index 97b5dd18..2f4ab827 100644 --- a/src/pages/Dashboard/Runtimes/Create/index.jsx +++ b/src/pages/Dashboard/Runtimes/Create/index.jsx @@ -135,7 +135,7 @@ export default class CreateTestingEnv extends React.Component { {name} {description} - {checked && } + {checked && } ); diff --git a/src/pages/Dashboard/Runtimes/Create/index.scss b/src/pages/Dashboard/Runtimes/Create/index.scss index ca990bcb..b7f3877a 100644 --- a/src/pages/Dashboard/Runtimes/Create/index.scss +++ b/src/pages/Dashboard/Runtimes/Create/index.scss @@ -66,6 +66,7 @@ $form-item-width: 389px; text-align: center; padding: 9px 12px; cursor: pointer; + border: 1px solid transparent; &:hover, &.activeZone { color: $P75; border: 1px solid $P75; @@ -163,12 +164,22 @@ $form-item-width: 389px; box-shadow: 0 1px 4px 0 rgba(73, 33, 173, 0.06), 0 4px 8px 0 rgba(35, 35, 36, 0.04); background-color: $N0; cursor: pointer; + border: 1px solid transparent; + @include normal-font; &:hover, &.checked { border: 1px solid $P75; } + .name { + margin-right: 20px; + font-weight: 500; + } + .desc { + color: $N75; + } .icon { float: right; + margin-top: -3px; } } } @@ -212,4 +223,4 @@ $form-item-width: 389px; } .fixWrap { display: block; -} \ No newline at end of file +} diff --git a/src/pages/Dashboard/Runtimes/Detail/index.jsx b/src/pages/Dashboard/Runtimes/Detail/index.jsx new file mode 100644 index 00000000..d568e245 --- /dev/null +++ b/src/pages/Dashboard/Runtimes/Detail/index.jsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { translate } from 'react-i18next'; +import { inject, observer } from 'mobx-react'; + +import { Icon } from 'components/Base'; +import Tabs from 'components/DetailTabs'; +import { runtimeTabs } from 'config/runtimes'; +import Card from '../Card'; +import InstallList from '../InstanceList'; + +import styles from './index.scss'; + +@translate() +@inject(({ rootStore }) => ({ + user: rootStore.user, + envStore: rootStore.testingEnvStore, + runtimeStore: rootStore.runtimeStore, + runtimeClusterStore: rootStore.runtimeClusterStore, + clusterStore: rootStore.clusterStore, + appStore: rootStore.appStore +})) +@observer +export default class RuntimeInstances extends React.Component { + /* componentDidMount() { + * this.fetchInstance(); + * } */ + componentWillUnmount() { + this.props.clusterStore.reset(); + } + + fetchInstance() { + const { + runtime, runtimeStore, runtimeClusterStore, user + } = this.props; + const { runtime_id } = runtime; + + runtimeClusterStore.runtimeId = runtime_id; + + runtimeClusterStore.fetchAll({ + attachApps: true, + runtime_id: runtime.runtime_id, + cluster_type: runtimeStore.runtimeTab, + owner: user.user_id + }); + } + + goBack = () => { + this.props.envStore.changeRuntimeToShowInstances(); + }; + + handleChangeTab = value => { + this.props.runtimeStore.changeRuntimeTab(value); + this.fetchInstance(); + }; + + render() { + const { runtime, t } = this.props; + + return ( +
+
+ + {t('Back')} +
+ + + + +
+ ); + } +} diff --git a/src/pages/Dashboard/Runtimes/Detail/index.scss b/src/pages/Dashboard/Runtimes/Detail/index.scss new file mode 100644 index 00000000..dff66934 --- /dev/null +++ b/src/pages/Dashboard/Runtimes/Detail/index.scss @@ -0,0 +1,35 @@ +@import "~scss/vars"; + +.toolbar { + display: inline-block; + position: relative; + margin-top: -20px; + cursor: pointer; + + .backTxt { + display: inline-block; + font-size: 12px; + color: #576075; + position: relative; + top: -8px; + margin-left: 8px; + } +} + +.title { + .tip{ + color: $N75; + } + .txt { + font-size: $size-normal; + font-weight: 500; + line-height: 2; + color: $N500; + } +} + +.tabs { + background: none; + border: none; + margin-bottom: 16px; +} diff --git a/src/pages/Dashboard/Runtimes/InstanceList/columns.js b/src/pages/Dashboard/Runtimes/InstanceList/columns.js index 412bb0f5..227aa63d 100644 --- a/src/pages/Dashboard/Runtimes/InstanceList/columns.js +++ b/src/pages/Dashboard/Runtimes/InstanceList/columns.js @@ -23,7 +23,7 @@ const columns = (t, apps, isDev) => [ { title: t('Instance Name ID'), key: 'name', - width: '155px', + width: '220px', render: cl => ( [ ]; export default columns; + +export const frontgateCols = t => [ + { + title: t('Status'), + key: 'status', + width: '100px', + render: cl => + }, + { + title: t('Instance Name ID'), + key: 'name', + width: '155px', + render: cl => + }, + { + title: t('Subnet'), + key: 'Subnet', + width: '155px', + render: cl => cl.subnet_id + }, + { + title: t('IP address'), + key: 'ip_address', + width: '155px', + render: cl => { + const nodeSet = _.get(cl, 'cluster_node_set[0]'); + if (!nodeSet) return null; + + return _.get(nodeSet, 'public_ip') || _.get(nodeSet, 'private_ip'); + } + }, + { + title: t('Configuration'), + key: 'Configuration', + width: '155px', + render: cl => { + const roleSet = _.get(cl, 'cluster_role_set[0]'); + if (!roleSet) return null; + const text = `${roleSet.cpu}-Core${roleSet.memory / 1024}GB${ + roleSet.storage_size + }GB`; + return
{text}
; + } + }, + { + title: t('Created At'), + key: 'create_time', + width: '180px', + render: cl => + } +]; diff --git a/src/pages/Dashboard/Runtimes/InstanceList/index.jsx b/src/pages/Dashboard/Runtimes/InstanceList/index.jsx index a73dbddc..3fd821db 100644 --- a/src/pages/Dashboard/Runtimes/InstanceList/index.jsx +++ b/src/pages/Dashboard/Runtimes/InstanceList/index.jsx @@ -6,15 +6,13 @@ import { inject, observer } from 'mobx-react'; import { Icon, Button } from 'components/Base'; import Toolbar from 'components/Toolbar'; import EnhanceTable from 'components/EnhanceTable'; -import columns from './columns'; - -import styles from './index.scss'; +import instanceCols, { frontgateCols } from './columns'; @translate() @inject(({ rootStore }) => ({ user: rootStore.user, envStore: rootStore.testingEnvStore, - clusterStore: rootStore.clusterStore, + runtimeClusterStore: rootStore.runtimeClusterStore, appStore: rootStore.appStore })) @observer @@ -26,32 +24,30 @@ export default class RuntimeInstances extends React.Component { }) }; - async componentDidMount() { - const { clusterStore, runtime, user } = this.props; - const { runtime_id } = runtime; - - clusterStore.runtimeId = runtime_id; + get columns() { + const { + appStore, runtimeStore, user, t + } = this.props; + const { apps } = appStore; - await clusterStore.fetchAll({ - attachApps: true, - runtime_id: runtime.runtime_id, - owner: user.user_id - }); + return runtimeStore.runtimeTab === '0' + ? instanceCols(t, apps, user.isDev) + : frontgateCols(t); } - componentWillUnmount() { - this.props.clusterStore.reset(); + get isAgent() { + return this.props.runtimeStore.runtimeTab === '1'; } - goBack = () => { - this.props.envStore.changeRuntimeToShowInstances(); - }; - handleClickToolbar = () => { // todo }; renderToolbar() { + if (this.isAgent) { + return null; + } + const { t } = this.props; const { searchWord, @@ -59,7 +55,7 @@ export default class RuntimeInstances extends React.Component { onClearSearch, onRefresh, clusterIds - } = this.props.clusterStore; + } = this.props.runtimeClusterStore; if (clusterIds.length) { return ( @@ -92,19 +88,15 @@ export default class RuntimeInstances extends React.Component { } renderTable() { - const { - clusterStore, appStore, user, t - } = this.props; - const { clusters } = clusterStore; - const { apps } = appStore; + const { runtimeClusterStore } = this.props; return ( -
- - {t('Back')} -
-
- {t('Selected runtime')}: - {runtime.name} -
- -
- {this.renderToolbar()} - {this.renderTable()} -
+ {this.renderToolbar()} + {this.renderTable()} ); } diff --git a/src/pages/Dashboard/Runtimes/InstanceList/index.scss b/src/pages/Dashboard/Runtimes/InstanceList/index.scss index 768ebfd5..d9ad97f6 100644 --- a/src/pages/Dashboard/Runtimes/InstanceList/index.scss +++ b/src/pages/Dashboard/Runtimes/InstanceList/index.scss @@ -1,33 +1,5 @@ @import "~scss/vars"; -.toolbar { - display: inline-block; - position: relative; - margin-top: -20px; - cursor: pointer; - - .backTxt { - display: inline-block; - font-size: 12px; - color: #576075; - position: relative; - top: -8px; - margin-left: 8px; - } -} - -.title { - .tip{ - color: $N75; - } - .txt { - font-size: $size-normal; - font-weight: 500; - line-height: 2; - color: $N500; - } -} - .colItems { font-size: $size-small; .icon { @@ -45,4 +17,4 @@ .version { color: $N75; } -} \ No newline at end of file +} diff --git a/src/pages/Dashboard/Runtimes/Modals/index.jsx b/src/pages/Dashboard/Runtimes/Modals/index.jsx new file mode 100644 index 00000000..81f163f7 --- /dev/null +++ b/src/pages/Dashboard/Runtimes/Modals/index.jsx @@ -0,0 +1,117 @@ +import React, { Component } from 'react'; +import classnames from 'classnames'; +import { translate } from 'react-i18next'; +import { inject, observer } from 'mobx-react'; +import _ from 'lodash'; + +import { Icon, Input } from 'components/Base'; +import { Card, Dialog } from 'components/Layout'; + +import styles from '../index.scss'; + +@translate() +@inject(({ rootStore }) => ({ + runtimeStore: rootStore.runtimeStore, + clusterStore: rootStore.clusterStore, + envStore: rootStore.testingEnvStore, + credentialStore: rootStore.runtimeCredentialStore, + user: rootStore.user +})) +@observer +export default class RuntimeModal extends Component { + render() { + const { + envStore, runtimeStore, credentialStore, t + } = this.props; + const { + isModalOpen, + modalType, + hideModal, + selectId, + handleOperation + } = envStore; + const { runtimes } = runtimeStore; + const rt = _.find(runtimes, { runtime_id: selectId }); + + if (modalType === 'modify_runtime') { + return ( + +
+ + +
+
+ + +
+ + ); + } + if (modalType === 'switch_auth') { + const { credentials } = credentialStore; + const { selectCredentialId, setCredentialId } = envStore; + + return ( + + {_.map( + credentials, + ({ name, description, runtime_credential_id }, idx) => { + const checked = !selectCredentialId + ? rt.runtime_credential_id === runtime_credential_id + : selectCredentialId === runtime_credential_id; + + return ( + setCredentialId(runtime_credential_id)} + > + {name} + {description} + + {checked && } + + + ); + } + )} + + ); + } + if (modalType === 'delete_runtime') { + return ( + +

{t('DELETE_RUNTIME_CONFIRM')}

+ + ); + } + + return null; + } +} diff --git a/src/pages/Dashboard/Runtimes/Runtime/index.jsx b/src/pages/Dashboard/Runtimes/Runtime/index.jsx index fb64a667..984cd104 100644 --- a/src/pages/Dashboard/Runtimes/Runtime/index.jsx +++ b/src/pages/Dashboard/Runtimes/Runtime/index.jsx @@ -1,7 +1,6 @@ import React from 'react'; import { withRouter } from 'react-router-dom'; import PropTypes from 'prop-types'; -import classnames from 'classnames'; import { translate } from 'react-i18next'; import { inject, observer } from 'mobx-react'; import _ from 'lodash'; @@ -9,13 +8,10 @@ import _ from 'lodash'; import { providers } from 'config/runtimes'; import routes, { toRoute } from 'routes'; -import { - Icon, Button, Popover, Input, Notification -} from 'components/Base'; -import { - Grid, Section, Card, Dialog -} from 'components/Layout'; +import { Icon, Button, Notification } from 'components/Base'; +import { Grid, Section } from 'components/Layout'; import Loading from 'components/Loading'; +import Card from '../Card'; import styles from '../index.scss'; @@ -48,12 +44,6 @@ export class Runtime extends React.Component { } } - handleClickAction = (type, id) => { - const { showModal, setCurrentId } = this.props.envStore; - showModal(type); - setCurrentId(id); - }; - handleClickClusterCnt = rt => { this.props.envStore.changeRuntimeToShowInstances(rt); }; @@ -64,124 +54,6 @@ export class Runtime extends React.Component { this.props.history.push(`${page}?provider=${platform}`); }; - renderMenu(runtime_id) { - const { t } = this.props; - return ( -
- this.handleClickAction('modify_runtime', runtime_id)} - > - - {t('Modify')} - - this.handleClickAction('switch_auth', runtime_id)}> - - {t('Switch authorization info')} - - this.handleClickAction('delete_runtime', runtime_id)} - > - - {t('Delete')} - -
- ); - } - - renderModals() { - const { - envStore, runtimeStore, credentialStore, t - } = this.props; - const { - isModalOpen, - modalType, - hideModal, - selectId, - handleOperation - } = envStore; - const { runtimes } = runtimeStore; - const rt = _.find(runtimes, { runtime_id: selectId }); - - if (modalType === 'modify_runtime') { - return ( - -
- - -
-
- - -
- - ); - } - if (modalType === 'switch_auth') { - const { credentials } = credentialStore; - const { selectCredentialId, setCredentialId } = envStore; - - return ( - - {_.map( - credentials, - ({ name, description, runtime_credential_id }, idx) => { - const checked = !selectCredentialId - ? rt.runtime_credential_id === runtime_credential_id - : selectCredentialId === runtime_credential_id; - - return ( - setCredentialId(runtime_credential_id)} - > - {name} - {description} - - {checked && } - - - ); - } - )} - - ); - } - if (modalType === 'delete_runtime') { - return ( - -

{t('DELETE_RUNTIME_CONFIRM')}

- - ); - } - } - renderEmpty() { const { envStore, t } = this.props; const platformName = _.get( @@ -207,85 +79,25 @@ export class Runtime extends React.Component { } renderContent() { - const { - envStore, - runtimeStore, - credentialStore, - clusterStore, - t - } = this.props; + const { envStore, runtimeStore, t } = this.props; const { platform } = envStore; const { runtimes } = runtimeStore; - const { credentials } = credentialStore; const validRts = _.filter(runtimes, rt => rt.provider === platform); if (_.isEmpty(validRts)) { return this.renderEmpty(); } - const clusterRtMap = _.groupBy(clusterStore.clusters, 'runtime_id'); - return ( - {_.map( - validRts, - ({ - name, description, runtime_id, runtime_credential_id, zone - }) => { - const cntCluster = clusterRtMap[runtime_id] - ? clusterRtMap[runtime_id].length - : 0; - const credentialName = _.get( - _.find(credentials, { runtime_credential_id }) || {}, - 'name' - ); - - return ( -
- -
- {name} - - - -
-
{description || ''}
-
-
-

区域

-

{zone}

-
-
-

实例数

-

this.handleClickClusterCnt({ name, runtime_id }) - } - > - {cntCluster} -

-
-
-

授权信息

-

- {credentialName || t('None')} -

-
-
- -
- ); - } - )} + {_.map(validRts, props => ( +
+ this.handleClickClusterCnt(props)} + /> +
+ ))}
+ ); } diff --git a/src/pages/Dashboard/Runtimes/index.scss b/src/pages/Dashboard/Runtimes/index.scss index 492c8000..68b481fb 100644 --- a/src/pages/Dashboard/Runtimes/index.scss +++ b/src/pages/Dashboard/Runtimes/index.scss @@ -159,45 +159,6 @@ $card-height: 188px; .envs { flex-flow: wrap; - .envItem { - height: $card-height; - .name { - display: inline-block; - font-size: $size-normal; - font-weight: 500; - line-height: 2; - color: $N500; - } - .desc { - display: block; - height: 40px; - @include note-font; - } - - .bottomInfo { - display: flex; - margin-top: 20px; - - .info { - flex: 1; - display: inline-block; - margin-right: 20px; - - .label { - font-size: $size-small; - line-height: 1.67; - color: $N75; - } - .val { - font-size: $size-small; - font-weight: 500; - line-height: 1.67; - color: $N500; - } - } - } - } - .cardAddEnv { height: $card-height; background: $N10; @@ -256,6 +217,47 @@ $card-height: 188px; } } } +.envItem { + height: $card-height; + .name { + display: inline-block; + font-size: $size-normal; + font-weight: 500; + line-height: 2; + color: $N500; + } + .desc { + display: block; + height: 40px; + @include note-font; + } + + .bottomInfo { + display: flex; + margin-top: 20px; + + .info { + width: 84px; + display: inline-block; + margin-right: 20px; + + .label { + font-size: $size-small; + line-height: 1.67; + color: $N75; + } + .val { + font-size: $size-small; + font-weight: 500; + line-height: 1.67; + color: $N500; + } + } + } +} +.clickable { + cursor: pointer; +} // modify runtime and credential .fmCtrl { diff --git a/src/stores/RootStore.js b/src/stores/RootStore.js index b95b7878..f8cd3543 100644 --- a/src/stores/RootStore.js +++ b/src/stores/RootStore.js @@ -12,7 +12,10 @@ import App, { import Category from './category'; import Cluster, { Detail as ClusterDetail } from './cluster'; import Repo, { Create as RepoCreate } from './repo'; -import Runtime, { Credential as RuntimeCredential } from './runtime'; +import Runtime, { + Credential as RuntimeCredential, + RuntimeCluster +} from './runtime'; import User, { Role, Group } from './user'; import sshKey from './key_pair'; import TestingEnv, { Create as TestingEnvCreate } from './testing_env'; @@ -153,6 +156,7 @@ export default class RootStore extends Store { // runtime this.register('runtime', Runtime); this.register('runtimeCredential', RuntimeCredential); + this.register('runtimeCluster', RuntimeCluster); // fixme: testing env contains runtime logic // testing env, authorization diff --git a/src/stores/runtime/cluster.js b/src/stores/runtime/cluster.js new file mode 100644 index 00000000..532ed1f3 --- /dev/null +++ b/src/stores/runtime/cluster.js @@ -0,0 +1,56 @@ +import { action, observable } from 'mobx'; +import _ from 'lodash'; + +import { useTableActions } from 'mixins'; + +import Store from '../Store'; + +@useTableActions +export default class RuntimeClusterStore extends Store { + idKey = 'cluster_id'; + + @observable clusters = []; + + @observable isLoading = false; + + get clusterIds() { + return this.selectIds; + } + + get describeActionName() { + return this.getStore('cluster').describeActionName; + } + + get clusterType() { + return this.getStore('runtime').runtimeTab; + } + + @action + fetchAll = async (params = {}) => { + params = this.normalizeParams(_.omit(params, ['attachApps'])); + if (this.searchWord) { + params.search_word = this.searchWord; + } + if (this.appId) { + params.app_id = this.appId; + } + if (this.runtimeId) { + params.runtime_id = this.runtimeId; + } + if (this.userId) { + params.owner = this.userId; + } + if (this.userId) { + params.owner = this.userId; + } + if (this.clusterType) { + params.cluster_type = this.clusterType; + } + + this.isLoading = true; + const result = await this.request.get(this.describeActionName, params); + this.clusters = _.get(result, 'cluster_set', []); + this.totalCount = _.get(result, 'total_count', 0); + this.isLoading = false; + }; +} diff --git a/src/stores/runtime/index.js b/src/stores/runtime/index.js index 544e1e8d..86f2601b 100644 --- a/src/stores/runtime/index.js +++ b/src/stores/runtime/index.js @@ -40,6 +40,8 @@ export default class RuntimeStore extends Store { @observable runtimeDeleted = null; + @observable runtimeTab = '0'; + get clusterStore() { return this.getStore('cluster'); } @@ -110,6 +112,13 @@ export default class RuntimeStore extends Store { this.runtimes = []; this.runtimeDetail = {}; }; + + @action + changeRuntimeTab = value => { + this.runtimeTab = value; + }; } export Credential from './credential'; + +export RuntimeCluster from './cluster'; From f2bfe1ebec8bd09e040909c25c0cf4c00a774ad2 Mon Sep 17 00:00:00 2001 From: lizhi Date: Tue, 19 Feb 2019 15:45:56 +0800 Subject: [PATCH 2/3] fix: Empty runtime --- src/pages/Dashboard/Runtimes/Runtime/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/Dashboard/Runtimes/Runtime/index.jsx b/src/pages/Dashboard/Runtimes/Runtime/index.jsx index 984cd104..90efd54a 100644 --- a/src/pages/Dashboard/Runtimes/Runtime/index.jsx +++ b/src/pages/Dashboard/Runtimes/Runtime/index.jsx @@ -9,9 +9,9 @@ import { providers } from 'config/runtimes'; import routes, { toRoute } from 'routes'; import { Icon, Button, Notification } from 'components/Base'; -import { Grid, Section } from 'components/Layout'; +import { Card, Grid, Section } from 'components/Layout'; import Loading from 'components/Loading'; -import Card from '../Card'; +import RuntimeCard from '../Card'; import styles from '../index.scss'; @@ -92,7 +92,7 @@ export class Runtime extends React.Component { {_.map(validRts, props => (
- this.handleClickClusterCnt(props)} /> From 16c1d119fe8fbb3a928c52339afd242edb8ea3c4 Mon Sep 17 00:00:00 2001 From: lizhi Date: Tue, 19 Feb 2019 16:27:17 +0800 Subject: [PATCH 3/3] style: Tooltip --- src/pages/Dashboard/Runtimes/Detail/index.jsx | 2 +- src/pages/Dashboard/Runtimes/Detail/index.scss | 4 ++-- src/pages/Dashboard/Runtimes/index.jsx | 2 ++ src/pages/Dashboard/Runtimes/index.scss | 2 ++ 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/Dashboard/Runtimes/Detail/index.jsx b/src/pages/Dashboard/Runtimes/Detail/index.jsx index d568e245..f4163dfb 100644 --- a/src/pages/Dashboard/Runtimes/Detail/index.jsx +++ b/src/pages/Dashboard/Runtimes/Detail/index.jsx @@ -59,7 +59,7 @@ export default class RuntimeInstances extends React.Component { return (
- + {t('Back')}
diff --git a/src/pages/Dashboard/Runtimes/Detail/index.scss b/src/pages/Dashboard/Runtimes/Detail/index.scss index dff66934..73a4c0e0 100644 --- a/src/pages/Dashboard/Runtimes/Detail/index.scss +++ b/src/pages/Dashboard/Runtimes/Detail/index.scss @@ -2,8 +2,8 @@ .toolbar { display: inline-block; - position: relative; - margin-top: -20px; + position: absolute; + margin-top: -33px; cursor: pointer; .backTxt { diff --git a/src/pages/Dashboard/Runtimes/index.jsx b/src/pages/Dashboard/Runtimes/index.jsx index 5e8bafe1..f417db2a 100644 --- a/src/pages/Dashboard/Runtimes/index.jsx +++ b/src/pages/Dashboard/Runtimes/index.jsx @@ -84,6 +84,8 @@ export default class Runtimes extends React.Component { > {disabled ? (