openpitrix · liiil825 · Feb 19, 2019 · Feb 19, 2019 · Feb 19, 2019 · Feb 19, 2019
diff --git 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
@@ -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
@@ -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": "运行环境"
-}
+}
diff --git a/src/pages/Dashboard/Runtimes/Card/index.jsx 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 (
+      <div className="operate-menu">
+        <span
+          onClick={e => this.handleClickAction('modify_runtime', runtime_id, e)}
+        >
+          <Icon name="pen" type="dark" />
+          {t('Modify')}
+        </span>
+        <span
+          onClick={e => this.handleClickAction('switch_auth', runtime_id, e)}
+        >
+          <Icon name="refresh" type="dark" />
+          {t('Switch authorization info')}
+        </span>
+        <span
+          onClick={e => this.handleClickAction('delete_runtime', runtime_id, e)}
+        >
+          <Icon name="trash" type="dark" />
+          {t('Delete')}
+        </span>
+      </div>
+    );
+  }
+
+  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 (
+      <Card
+        className={classnames(styles.envItem, {
+          [styles.clickable]: !this.isDetialCard
+        })}
+        onClick={onClick}
+      >
+        <div>
+          <span className={styles.name}>{name}</span>
+          <Popover
+            showBorder
+            className={classnames('operation', styles.actionPop)}
+            content={this.renderMenu(runtime_id)}
+          >
+            <Icon name="more" type="dark" className={styles.actionBar} />
+          </Popover>
+        </div>
+        <div className={styles.desc}>{description || ''}</div>
+        <div className={styles.bottomInfo}>
+          <div className={styles.info}>
+            <p className={styles.label}>{t('Zone')}</p>
+            <p className={styles.val}>{zone}</p>
+          </div>
+          <div className={styles.info}>
+            <p className={styles.label}>{t('Instance count')}</p>
+            <p className={styles.val} style={{ cursor: 'pointer' }}>
+              {cntCluster}
+            </p>
+          </div>
+          {this.isDetialCard && (
+            <div className={styles.info}>
+              <p className={styles.label}>{t('Agent Instance count')}</p>
+              <p className={styles.val} style={{ cursor: 'pointer' }}>
+                {agentCluster}
+              </p>
+            </div>
+          )}
+
+          <div className={styles.info}>
+            <p className={styles.label}>{t('Authorization info')}</p>
+            <p className={styles.val}>{credentialName || t('None')}</p>
+          </div>
+        </div>
+      </Card>
+    );
+  }
+}
diff --git 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 {
                   <span className={styles.name}>{name}</span>
                   <span className={styles.desc}>{description}</span>
                   <span className={styles.icon}>
-                    {checked && <Icon name="check" />}
+                    {checked && <Icon name="check" size={24} />}
                   </span>
                 </Card>
               );

diff --git 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;
-}
+}
diff --git a/src/pages/Dashboard/Runtimes/Detail/index.jsx 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 (
+      <div>
+        <div className={styles.toolbar} onClick={this.goBack}>
+          <Icon name="previous" size={24} type="dark" />
+          <span className={styles.backTxt}>{t('Back')}</span>
+        </div>
+
+        <Card {...runtime} />
+        <Tabs
+          className={styles.tabs}
+          tabs={runtimeTabs}
+          changeTab={this.handleChangeTab}
+        />
+        <InstallList {...this.props} />
+      </div>
+    );
+  }
+}
diff --git a/src/pages/Dashboard/Runtimes/Detail/index.scss b/src/pages/Dashboard/Runtimes/Detail/index.scss
@@ -0,0 +1,35 @@
+@import "~scss/vars";
+
+.toolbar {
+  display: inline-block;
+  position: absolute;
+  margin-top: -33px;
+  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
@@ -23,7 +23,7 @@ const columns = (t, apps, isDev) => [
   {
     title: t('Instance Name ID'),
     key: 'name',
-    width: '155px',
+    width: '220px',
     render: cl => (
       <TdName
         name={cl.name}
@@ -81,3 +81,54 @@ const columns = (t, apps, isDev) => [
 ];
 
 export default columns;
+
+export const frontgateCols = t => [
+  {
+    title: t('Status'),
+    key: 'status',
+    width: '100px',
+    render: cl => <Status type={cl.status} transition={cl.transition_status} />
+  },
+  {
+    title: t('Instance Name ID'),
+    key: 'name',
+    width: '155px',
+    render: cl => <TdName name={cl.name} description={cl.cluster_id} noIcon />
+  },
+  {
+    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 <div>{text}</div>;
+    }
+  },
+  {
+    title: t('Created At'),
+    key: 'create_time',
+    width: '180px',
+    render: cl => <TimeShow time={cl.create_time} />
+  }
+];