kafka-manager 2.0

kafka-manager-console/src/component/expand-card/index.less

@@ -0,0 +1,39 @@
+.card-wrapper {
+  margin: 24px 0 32px;
+}
+.card-title {
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  color: #333333;
+  height: 22px;
+  line-height: 22px;
+  margin: 15px 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  i {
+    font-size: 15px;
+    margin-right: 8px;
+  }
+}
+.card-content {
+  background-color: #FAFAFA;
+  padding: 16px;
+  overflow: auto;
+  .chart-row {
+    overflow: hidden;
+    width: 100%;
+  }
+  .chart-row:not(:first-child) {
+    margin-top: 16px;
+  }
+  .chart-wrapper {
+    background-color: #FFFFFF;
+    width: calc(50% - 8px);
+    float: left;
+    padding: 16px;
+  }
+  .chart-wrapper:nth-child(2n) {
+    margin-left: 16px;
+  }
+}

kafka-manager-console/src/component/expand-card/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './index.less';
+import { Icon } from 'component/antd';
+
+interface ICardProps {
+  title: string;
+  expand?: boolean;
+  charts?: JSX.Element[];
+}
+
+export class ExpandCard extends React.Component<ICardProps> {
+  public state = {
+    innerExpand: true,
+  };
+
+  public handleClick = () => {
+    this.setState({ innerExpand: !this.state.innerExpand });
+  }
+
+  public render() {
+    let { expand } = this.props;
+    if (expand === undefined) expand = this.state.innerExpand;
+    const { charts } = this.props;
+    return (
+      <div className="card-wrapper">
+        {/* <div className="card-title" onClick={this.handleClick}>
+          <Icon
+            type={expand ? 'down' : 'up'}
+            className={expand ? 'dsui-icon-jiantouxiangxia' : 'dsui-icon-jiantouxiangshang'}
+          />
+          {this.props.title}
+        </div> */}
+        {expand ?
+          <div className="card-content">
+            {(charts || []).map((c, index) => {
+              if (index % 2 !== 0) return null;
+              return (
+                <div className="chart-row" key={index}>
+                  <div className="chart-wrapper">{c}</div>
+                  {(index + 1 < charts.length) ? <div className="chart-wrapper">{charts[index + 1]}</div> : null}
+                </div>
+              );
+            })}
+          </div> : null}
+      </div>
+    );
+  }
+}