-
-
-
- {iconName === 'appcenter' && t('Browse Apps')}
- {iconName === 'stateful-set' && t('Create Repo')}
- {iconName === 'cluster' && t('Manage Clusters')}
+
-
- {descMap[iconName]}
+
{t(titleMap[type])}
+
+ {t(descMap[type])}
-
-
+
+
);
diff --git a/src/pages/Admin/Overview/RepoList/index.jsx b/src/pages/Admin/Overview/RepoList/index.jsx
index a6b9e273..eb5aabd1 100644
--- a/src/pages/Admin/Overview/RepoList/index.jsx
+++ b/src/pages/Admin/Overview/RepoList/index.jsx
@@ -11,50 +11,52 @@ import styles from './index.scss';
@translate()
export default class RepoList extends PureComponent {
static propTypes = {
- repos: PropTypes.array,
type: PropTypes.oneOf(['public', 'private', 'runtime']),
+ repos: PropTypes.array,
+ runtimes: PropTypes.array,
+ clusters: PropTypes.array,
limit: PropTypes.number
};
static defaultProps = {
- limit: 2,
type: 'public',
- repos: []
+ repos: [],
+ runtimes: [],
+ clusters: [],
+ limit: 2
};
render() {
- const { repos, type, limit, t } = this.props;
- let filterRepos = repos,
+ const { repos, runtimes, clusters, type, limit, t } = this.props;
+ let filterItems = runtimes,
totalName = 'Clusters';
if (type !== 'runtime') {
- filterRepos = repos.slice(0, limit).filter(repo => repo.visibility === type);
+ filterItems = repos.slice(0, limit).filter(repo => repo.visibility === type);
totalName = 'Apps';
}
+ const isRepoList = type !== 'runtime' && filterItems.length > 0;
+
return (
- {type !== 'runtime' &&
- filterRepos.length > 0 && {t(ucfirst(type))}
}
-
- {filterRepos.map(item => {
- let link = `/dashboard/repo/${item.repo_id}`;
- let total = item.clusters && item.clusters.length;
+ {isRepoList && {t(ucfirst(type))}
}
+
+ {filterItems.map(item => {
+ let link = `/dashboard/runtime/${item.runtime_id}`;
+ let provider = item.provider;
+ let total = clusters.filter(cluster => item.runtime_id === cluster.runtime_id).length;
+
if (type !== 'runtime') {
link = `/dashboard/repo/${item.repo_id}`;
+ provider = item.providers && item.providers[0];
total = item.apps && item.apps.length;
}
+
return (
-
- {item.repo_id && (
-
- )}
+
{item.name}
{total || 0}
diff --git a/src/pages/Admin/Overview/RepoList/index.scss b/src/pages/Admin/Overview/RepoList/index.scss
index abf862d6..8f7ca41c 100644
--- a/src/pages/Admin/Overview/RepoList/index.scss
+++ b/src/pages/Admin/Overview/RepoList/index.scss
@@ -8,8 +8,8 @@
height: 60px;
line-height: 24px;
border-radius: 2px;
- background-color: $N10;
- border: solid 1px $N30;
+ background-color: $N0;
+ border: 1px solid $N10;
a{
display: block;
padding: 17px 16px;
@@ -49,7 +49,7 @@
}
.reposBg{
li {
- background-color: $N0;
- border-color: $N10;
+ background-color: $N10;
+ border-color: $N30;
}
}
diff --git a/src/pages/Admin/Overview/index.jsx b/src/pages/Admin/Overview/index.jsx
index d2c6b3c7..5076af8f 100644
--- a/src/pages/Admin/Overview/index.jsx
+++ b/src/pages/Admin/Overview/index.jsx
@@ -30,12 +30,29 @@ import styles from './index.scss';
}))
@observer
export default class Overview extends React.Component {
- static async onEnter({ appStore, clusterStore, repoStore, runtimeStore, categoryStore }) {
+ static async onEnter({
+ appStore,
+ clusterStore,
+ repoStore,
+ runtimeStore,
+ categoryStore,
+ userStore,
+ loginUser
+ }) {
await appStore.fetchAll({ noLimit: true });
await clusterStore.fetchAll();
- await repoStore.fetchAll();
- await categoryStore.fetchAll();
await runtimeStore.fetchAll();
+
+ //fixme developer user query public repos
+ if (loginUser.isDev || loginUser.isAdmin) {
+ const params = loginUser.isDev ? { visibility: ['private'] } : {};
+ await repoStore.fetchAll(params);
+ }
+
+ if (loginUser.isAdmin) {
+ await categoryStore.fetchAll();
+ await userStore.fetchAll();
+ }
}
constructor(props) {
@@ -107,10 +124,11 @@ export default class Overview extends React.Component {
@@ -119,10 +137,10 @@ export default class Overview extends React.Component {
@@ -131,10 +149,10 @@ export default class Overview extends React.Component {
@@ -146,13 +164,13 @@ export default class Overview extends React.Component {
};
normalView = () => {
- const { sessInfo, appStore, repoStore, clusterStore, t } = this.props;
+ const { sessInfo, appStore, runtimeStore, clusterStore, t } = this.props;
const countLimit = 5;
const { isLoading } = appStore;
const name = getSessInfo('user', sessInfo);
const appList = appStore.apps.slice(0, countLimit);
- const repoList = repoStore.getRepoApps(repoStore.repos, appStore.apps);
+ const runtimteList = runtimeStore.runtimes.slice(0, countLimit);
const clusterList = clusterStore.clusters.slice(0, countLimit);
return (
@@ -165,29 +183,29 @@ export default class Overview extends React.Component {
@@ -198,16 +216,7 @@ export default class Overview extends React.Component {
};
developerView = () => {
- const {
- appStore,
- clusterStore,
- repoStore,
- runtimeStore,
- categoryStore,
- userStore,
- sessInfo,
- t
- } = this.props;
+ const { appStore, clusterStore, repoStore, runtimeStore, t } = this.props;
const countLimit = 5;
const { isLoading } = appStore;
@@ -234,6 +243,7 @@ export default class Overview extends React.Component {
{
title: 'App',
key: 'app_id',
+ width: '100px',
render: item => (
{getObjName(appStore.apps, 'app_id', item.app_id, 'name')}
@@ -313,19 +323,15 @@ export default class Overview extends React.Component {
{
+ const { clusterId, clusterIds, modalType, operateType } = this.store;
+ let ids = operateType === 'multiple' ? clusterIds.toJSON() : [clusterId];
+ switch (modalType) {
+ case 'delete':
+ this.store.remove(ids);
+ break;
+ case 'start':
+ this.store.start(ids);
+ break;
+ case 'stop':
+ this.store.stop(ids);
+ break;
+ }
+ };
+
+ getAppTdShow = (appId, apps) => {
+ const app = apps.find(item => item.app_id === appId);
+
+ return app ? (
+
+ ) : null;
+ };
+
+ renderHandleMenu = item => {
+ const { clusterStore, runtimeStore, t } = this.props;
+ const { runtimes } = runtimeStore;
+ const { showOperateCluster } = clusterStore;
+ const { cluster_id, status, runtime_id } = item;
+ const provider = getObjName(runtimes, 'runtime_id', runtime_id, 'provider');
+
+ return (
+
+ {t('View detail')}
+ {provider !== 'kubernetes' &&
+ status === 'stopped' && (
+ showOperateCluster(cluster_id, 'start')}>
+ {t('Start cluster')}
+
+ )}
+ {provider !== 'kubernetes' &&
+ status === 'active' && (
+ showOperateCluster(cluster_id, 'stop')}>{t('Stop cluster')}
+ )}
+ {status !== 'deleted' && (
+ showOperateCluster(cluster_id, 'delete')}>{t('Delete')}
+ )}
+
+ );
+ };
+
+ renderDeleteModal = () => {
+ const { t } = this.props;
+ const { hideModal, isModalOpen, modalType } = this.store;
+
+ return (
+
+ );
+ };
+
renderApps() {
- const { apps } = this.props.appStore;
+ const { storeApps } = this.props.appStore;
const { appId } = this.props.clusterStore;
return (
- {apps.slice(0, 10).map(app => (
+ {storeApps.slice(0, 10).map(app => (
-
},
+ {
+ title: t('App'),
+ key: 'app_id',
+ width: '150px',
+ render: cl => this.getAppTdShow(cl.app_id, apps.toJSON())
+ },
{
title: t('Runtime'),
key: 'runtime_id',
@@ -176,6 +262,16 @@ export default class Purchased extends Component {
sorter: true,
onChangeSort: this.onChangeSort,
render: item => formatTime(item.create_time, 'YYYY/MM/DD HH:mm:ss')
+ },
+ {
+ title: t('Actions'),
+ key: 'actions',
+ width: '84px',
+ render: item => (
+
+
+
+ )
}
];
@@ -230,6 +326,8 @@ export default class Purchased extends Component {
+
+ {this.renderDeleteModal()}
);
}
diff --git a/src/stores/cluster/index.js b/src/stores/cluster/index.js
index a4e7fa58..b0115818 100644
--- a/src/stores/cluster/index.js
+++ b/src/stores/cluster/index.js
@@ -52,6 +52,7 @@ export default class ClusterStore extends Store {
jobs = {
// job_id=> cluster_id
};
+ store = {};
@action.bound
showModal = type => {
@@ -96,9 +97,17 @@ export default class ClusterStore extends Store {
const result = await this.request.get('clusters', assign(defaultParams, params));
this.clusters = get(result, 'cluster_set', []);
this.totalCount = get(result, 'total_count', 0);
+
if (!this.searchWord && !this.selectStatus) {
this.clusterCount = this.totalCount;
}
+
+ const appStore = this.store.app;
+ const appIds = this.clusters.map(cluster => cluster.app_id);
+ if (appStore && appIds.length > 1) {
+ appStore.fetchAll({ app_id: appIds });
+ }
+
this.isLoading = false;
};
@@ -319,6 +328,7 @@ export default class ClusterStore extends Store {
this.selectedRowKeys = [];
this.clusterIds = [];
this.pageInitMap = {};
+ this.store = {};
};
@action
@@ -459,6 +469,11 @@ export default class ClusterStore extends Store {
this.pub_key = '';
this.description = '';
};
+
+ @action
+ registerStore = (name, store) => {
+ this.store[name] = store;
+ };
}
export Detail from './detail';