feat: Add Cluster Details(Helm) page (#347) (#424)

openpitrix · Sep 28, 2018 · a82c2c3 · a82c2c3
1 parent 1457f90
commit a82c2c3
Show file tree

Hide file tree

Showing 26 changed files with 931 additions and 219 deletions.
diff --git a/.gitignore b/.gitignore
@@ -29,4 +29,9 @@ reports/
 
 .cache/
 
-*.tgz
+*.tgz
+
+\#*\#
+/.emacs.desktop
+/.emacs.desktop.lock
+.\#*
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "i18next-browser-languagedetector": "^2.2.3",
     "js-base64": "^2.4.5",
     "js-yaml": "^3.10.0",
+    "json2yaml": "^1.1.0",
     "koa": "^2.4.1",
     "koa-bodyparser": "^4.2.0",
     "koa-favicon": "^2.0.0",

diff --git a/src/components/Base/Checkbox/checkbox.jsx b/src/components/Base/Checkbox/checkbox.jsx
@@ -45,18 +45,21 @@ export default class Checkbox extends Component {
   }
 
   render() {
-    const { style, className, disabled, children, value } = this.props;
+    const { style, className, disabled, children, isFold, fold, value } = this.props;
     const isChecked = this.state.isChecked;
+    const labelClass = isFold ? styles.foldCheckbox : styles.checkbox;
 
     return (
       <label
-        className={classNames(styles.checkbox, className, {
+        className={classNames(labelClass, className, {
           [styles.checked]: isChecked
         })}
         disabled={disabled}
         style={style}
       >
         {isChecked && <Icon name="check" />}
+        {isFold && fold && <Icon name="check-fold" size={28} />}
+        {isFold && !fold && <Icon name="check-unfold" size={28} />}
         <input
           type="checkbox"
           value={value}

diff --git a/src/components/Base/Checkbox/index.scss b/src/components/Base/Checkbox/index.scss
@@ -123,3 +123,40 @@
     }
   }
 }
+
+.foldCheckbox {
+  position: relative;
+  display: inline-block;
+  margin-right: 8px;
+  padding-left: 22px;
+  color: $N300;
+  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+
+  input[type="checkbox"] {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    user-select: none;
+    outline: none;
+  }
+  :global {
+    .icon {
+      display: block;
+      z-index: 3;
+      width: 30px;
+      height: 30px;
+      position: absolute;
+      margin: 0 !important;
+      left: 0;
+      top: 50%;
+      font-size: $size-small;
+      color: #fff;
+      transform: translate(0 ,-50%) scale(0.7);
+      cursor: pointer;
+      svg {
+        --primary-color: #{$N0};
+        --secondary-color: #{$N0};
+      }
+    }
+  }
+}
diff --git a/src/components/Base/CodeMirror/index.jsx b/src/components/Base/CodeMirror/index.jsx
@@ -4,22 +4,25 @@ import CodeMirror from 'react-codemirror';
 
 if (process.browser) {
   require('codemirror/mode/yaml/yaml');
+  require('codemirror/mode/javascript/javascript');
   require('codemirror/lib/codemirror.css');
 }
 
 export default class CodeMirrorX extends React.Component {
   static propTypes = {
     code: PropTypes.string,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    mode: PropTypes.string
   };
   static defaultProps = {
     code: '',
-    onChange: () => {}
+    onChange: () => {},
+    mode: 'yaml'
   };
 
   render() {
-    const { onChange, code } = this.props;
+    const { onChange, code, mode } = this.props;
 
-    return <CodeMirror value={code} onChange={onChange} options={{ mode: 'yaml' }} />;
+    return <CodeMirror value={code} onChange={onChange} options={{ mode }} />;
   }
 }
diff --git a/src/components/Base/Table/table.jsx b/src/components/Base/Table/table.jsx
@@ -103,6 +103,10 @@ export default class Table extends React.Component {
     }
   };
 
+  setExtendRowKeys = (selectedRowKeys, { selectType, item, checked, changeRowKeys }) => {
+    const { extendRowSelection } = this.props;
+  };
+
   handleCheckboxSelect = (value, index, e) => {
     const { rowKey } = this.props;
     const checked = e.target.checked;
@@ -208,6 +212,7 @@ export default class Table extends React.Component {
       const data = this.getTableData();
       const selectionColumn = {
         key: 'selection-column',
+        width: '20px',
         render: this.renderSelectionBox(rowSelection.type),
         className: styles.selectionColumn,
         fixed: rowSelection.fixed

diff --git a/src/components/Status/index.jsx b/src/components/Status/index.jsx
@@ -12,24 +12,25 @@ export default class Status extends PureComponent {
     style: PropTypes.string,
     className: PropTypes.string,
     name: PropTypes.string,
-    type: PropTypes.oneOf([
-      'draft',
-      'running',
-      'active',
-      'stopped',
-      'ceased',
-      'pending',
-      'suspended',
-      'successful',
-      'failed',
-      'deleted',
-      'working', // job status
+    type: PropTypes.string,
+    /* type: PropTypes.oneOf([
+     *   'draft',
+     *   'running',
+     *   'active',
+     *   'stopped',
+     *   'ceased',
+     *   'pending',
+     *   'suspended',
+     *   'successful',
+     *   'failed',
+     *   'deleted',
+     *   'working', // job status
 
-      'enabled',
-      'disabled',
+     *   'enabled',
+     *   'disabled',
 
-      'published'
-    ]),
+     *   'published'
+     * ]), */
     transition: PropTypes.oneOf([
       '',
       'starting',
@@ -53,7 +54,7 @@ export default class Status extends PureComponent {
 
   render() {
     const { style, className, name, type, transition, t } = this.props;
-    let status = String(transition || type).toLowerCase();
+    const status = String(transition || type).toLowerCase();
 
     const normalizeName = t(capitalize(name || status));
 

diff --git a/src/components/Status/index.scss b/src/components/Status/index.scss
@@ -2,6 +2,10 @@
 
 .status {
   text-transform: capitalize;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  align-items: center;
 }
 
 

diff --git a/src/components/TagNav/index.jsx b/src/components/TagNav/index.jsx
@@ -34,7 +34,7 @@ export default class TagNav extends Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    return nextState.curTag !== this.state.curTag;
+    return nextState.curTag !== this.state.curTag || nextProps.tags !== this.props.tags;
   }
 
   handleChange = tag => {

diff --git a/src/components/TdName/index.jsx b/src/components/TdName/index.jsx
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { observer, inject } from 'mobx-react';
 import { translate } from 'react-i18next';
 
-import { Icon, Image } from 'components/Base';
+import { Checkbox, Icon, Image } from 'components/Base';
 import styles from './index.scss';
 
 @translate()
@@ -21,10 +21,13 @@ export default class TdName extends React.Component {
     linkUrl: PropTypes.string,
     noCopy: PropTypes.bool,
     className: PropTypes.string,
+    onExtendedChange: PropTypes.func,
+    hasChild: PropTypes.bool,
     noIcon: PropTypes.bool
   };
 
   static defaultProps = {
+    onExtendedChange: () => {},
     noIcon: false,
     noCopy: false
   };
@@ -73,25 +76,42 @@ export default class TdName extends React.Component {
   }
 
   render() {
-    const { name, description, linkUrl, noCopy, className } = this.props;
+    const {
+      name,
+      description,
+      linkUrl,
+      noCopy,
+      noDescription,
+      className,
+      rowKey,
+      isFold,
+      fold,
+      onExtendedChange
+    } = this.props;
+    const nameClass = isFold ? styles.foldName : styles.name;
 
     return (
       <span className={classnames(styles.tdName, className)}>
         {this.renderIcon()}
+        {isFold && (
+          <Checkbox isFold={true} fold={fold} value={rowKey} onChange={onExtendedChange} />
+        )}
         <span className={styles.info}>
           {linkUrl && (
-            <Link className={styles.name} to={linkUrl} title={name}>
+            <Link className={nameClass} to={linkUrl} title={name}>
               {name}&nbsp;
             </Link>
           )}
           {!linkUrl && (
-            <span className={styles.name} title={name}>
+            <span className={nameClass} title={name}>
               {name}&nbsp;
             </span>
           )}
-          <span className={styles.description} title={description}>
-            {description}&nbsp;
-          </span>
+          {!noDescription && (
+            <span className={styles.description} title={description}>
+              {description}&nbsp;
+            </span>
+          )}
           {!noCopy && (
             <span className="copy" data-clipboard-text={description} ref="copyBtn">
               <Icon name="copy" type="dark" />

diff --git a/src/components/TdName/index.scss b/src/components/TdName/index.scss
@@ -1,7 +1,7 @@
 @import "~scss/vars";
 
 .tdName {
-  display: inline-block;
+  display: flex;
   :global{
    .icon{
       float: left;
@@ -24,7 +24,7 @@
       vertical-align: middle;
     }
   }
-  .info{
+  .info {
     display: inline-block;
     &:hover {
       :global {
@@ -33,7 +33,7 @@
         }
       }
     }
-    .name{
+    .name {
       display: block;
       line-height: 20px;
       font-weight: 500;
@@ -45,6 +45,18 @@
         color: $link-hover;
       }
     }
+    .foldName {
+      display: block;
+      line-height: 20px;
+      font-weight: 500;
+      text-align: left;
+      color: $N500;
+      width: 180px;
+      @include textCut;
+      &:hover{
+        color: $link-hover;
+      }
+    }
     .description{
       display: inline-block;
       width: 100px;

diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json
@@ -334,7 +334,15 @@
 
   "search_results": "搜索结果",
 
-  "None": "无",
-
-  "Choose category": "选择分类"
+  "Choose category": "选择分类",
+  "Deployment Name": "部署名称",
+  "Deployment Node": "部署节点",
+  "StatefulSet Node": "状态节点",
+  "DaemonSet Node": "守护节点",
+  "Rollback cluster": "回滚集群",
+  "Update_env cluster": "修改集群环境",
+  "Update cluster env": "修改集群环境",
+  "Upgrade cluster": "升级集群版本",
+
+  "None": "无"
 }
diff --git a/src/pages/Admin/Clusters/Detail/ExtendedRow.jsx b/src/pages/Admin/Clusters/Detail/ExtendedRow.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './index.scss';
+import Status from 'components/Status';
+import { Icon } from 'components/Base';
+
+export default function ExtendedRow({ name, status, host_id, host_ip, private_ip }) {
+  return (
+    <div className={styles.extendedTr}>
+      <div className={styles.extendedFirstChild} />
+      <div className={styles.extendedIcon}>
+        <Icon name="pods-icon" />
+      </div>
+      <div>
+        <div>Pods:</div>
+        <div className={styles.extendedTdName}>{name}</div>
+      </div>
+      <div className={styles.extendedTdStatus}>
+        <Status type={status} name={status} />
+      </div>
+      <div className={styles.extendedFlex}>
+        <div>Instance:</div>
+        <div>{`${host_id} ${host_ip}`}</div>
+      </div>
+      <div className={styles.extendedFlex}>
+        <div>IP:</div>
+        <div>{private_ip}</div>
+      </div>
+    </div>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,4 +29,9 @@ reports/ @@
     .cache/
-    *.tgz
+    *.tgz
+    \#*\#
+    /.emacs.desktop
+    /.emacs.desktop.lock
+    .\#*