finish demo-web

client/app.jsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, browserHistory } from 'react-router';
-import { ApolloProvider } from 'react-apollo';
+// import { ApolloProvider } from 'react-apollo';
+import { ApolloProvider } from '@apollo/client';
+
 import routes from './routes';
 import { client } from './graphql';
 
+import 'antd/dist/antd.less';
+// import 'snowy/dist/snowy.css';
+import 'snowy/dist/styles/index.less';
+
+
 function App() {
   return (
     <ApolloProvider client={client}>
@@ -16,4 +23,4 @@ function App() {
 const div = document.createElement('div');
 document.body.append(div);
 
-ReactDOM.render(<App/>, div);
+ReactDOM.render(<App />, div);

client/components/ClusterList/ClusterList.tsx

@@ -1,38 +1,36 @@
-import React from 'react';
-import { Query, withApollo } from 'react-apollo';
-import { Spin } from 'antd';
-import { Link } from 'react-router';
-import query from './query';
+import React from "react";
+// import { Query, withApollo } from 'react-apollo';
+
+import { useQuery, gql } from "@apollo/client";
+
+import { Spin } from "antd";
+import { Link } from "react-router";
+import query from "./query";
+import { client } from "../../graphql";
 
 export default function ClusterList({ children }) {
+  // return <p>...</p>
   if (children) {
     return children;
   }
 
-  return (
-    <Query
-      query={query}
-    >
-      {
-        ({ data, loading }) => {
-          if (loading) {
-            return <Spin />
-          }
+  const { loading, error, data } = useQuery(query, { client: client });
+  console.log(loading, error, data);
+  if (loading) {
+    return <Spin />;
+  }
+  if (error) return <p>Error :(</p>;
 
-          return (
-            <>
-              cluster list:
-            <ol>
-              {
-                data.clusterCollection.nodes.map(({ name, phase }) => (
-                  <li key={name}>{name}, status: {phase} <Link to={`/clusters/${name}`}>detail</Link></li>
-                ))
-              }
-            </ol>
-            </>
-          )
-        }
-      }
-    </Query>
+  return (
+    <>
+      cluster list:
+      <ol>
+        {data.clusterCollection.nodes.map(({ name, phase }) => (
+          <li key={name}>
+            {name}, status: {phase} <Link to={`/clusters/${name}`}>detail</Link>
+          </li>
+        ))}
+      </ol>
+    </>
   );
 }

client/components/ClusterList/query.ts

@@ -1,12 +1,14 @@
-import gql from 'graphql-tag';
+// import gql from 'graphql-tag';
+import { gql } from "@apollo/client";
 
 export default gql`
-  {
+  query {
     clusterCollection {
       total
       nodes {
-        name
-        phase
+        id
+        displayName
+        partitionCollection
       }
     }
   }

client/components/FormDemo/FormDemo.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+
+import { Button, Steps, Tabs, message } from "antd";
+import { Form } from "snowy/pro";
+
+const { Step } = Steps;
+const { TabPane } = Tabs;
+const { Field } = Form;
+
+function step(props) {
+  return (
+    <div>
+      <Steps
+        style={{ width: "400px" }}
+        size="small"
+        current={props.current}
+        onChange={props.onStepChange}
+      >
+        <Step title="步骤一" />
+        <Step title="步骤二" />
+      </Steps>
+    </div>
+  );
+}
+
+const divider = (
+  <div
+    style={{
+      height: 0,
+      margin: "16px -24px",
+      borderTop: "1px solid #DEE1E7",
+    }}
+  ></div>
+);
+
+function form(props) {
+  return (
+    <Form
+      affixButtons={true}
+      initialValues={{
+        title1: "caicloud.rar",
+      }}
+      onSubmit={props.onSubmit}
+      render={(p) => (
+        <form>
+          {step({
+            current: props.current,
+            onStepChange: props.onStepChange,
+          })}
+          {divider}
+          {props.current === 0 && (
+            <>
+              <Field
+                required
+                label="名称名称名称名称名称名称名称名称名称名称"
+                name="name"
+                component="input"
+                labelTooltip="这是名称"
+                tips="支持中文和特殊符号，长度限制 2-32 个字符。"
+              />
+              <Field
+                label="描述"
+                name="description"
+                component="textArea"
+                labelTooltip="这是备注"
+                placeholder="请输入备注"
+              />
+              <Field label="标题" name="title1" component="input" />
+            </>
+          )}
+          {props.current === 1 && (
+            <>
+              <Field label="标题" name="title2" component="input" />
+              <Field
+                label="标题标题标题标题标题"
+                name="title3"
+                component="input"
+              />
+              <Field label="标题" name="title4" component="input" />
+              <Field
+                label="标题标题标题标题标题"
+                name="title5"
+                component="input"
+              />
+            </>
+          )}
+          {divider}
+          <div style={{ height: "48px" }}>
+            <div>
+              <Button
+                className="c-btn-form"
+                disabled={props.current === 0}
+                onClick={props.onPrev}
+              >
+                上一步
+              </Button>
+              <Button
+                type="primary"
+                className="c-btn-form"
+                onClick={p.handleSubmit}
+              >
+                完成
+              </Button>
+              <Button
+                type="primary"
+                className="c-btn-form"
+                disabled={props.current === props.maxStep}
+                onClick={props.onNext}
+              >
+                下一步
+              </Button>
+              <Button
+                className="c-btn-form c-btn-gray"
+                onClick={props.onCancel}
+              >
+                取消
+              </Button>
+            </div>
+          </div>
+        </form>
+      )}
+    />
+  );
+}
+
+export default function FormDemo() {
+  const [current, setCurrent] = useState(0);
+  const maxStep = 1;
+  return (
+    <>
+      <Tabs defaultActiveKey="2">
+        <TabPane tab="使用主机搭建集群" key="1">
+          Tab 1
+        </TabPane>
+        <TabPane tab="托管集群" key="2">
+          {form({
+            current,
+            maxStep,
+            onStepChange: (curr) => {
+              setCurrent(curr);
+            },
+            onPrev: () => {
+              setCurrent(Math.max(0, current - 1));
+            },
+            onNext: () => {
+              setCurrent(Math.min(maxStep, current + 1));
+            },
+            onSubmit: (v) => {
+              message.info(JSON.stringify(v));
+            },
+            onCancel: () => {
+              message.info("onCancel");
+            },
+          })}
+        </TabPane>
+      </Tabs>
+    </>
+  );
+}

client/components/FormDemo/index.ts

@@ -0,0 +1,3 @@
+import FormDemo from "./FormDemo";
+
+export default FormDemo;

client/components/Journal/Journal.tsx

@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from "react";
+
+import { Select, TreeSelect, Input } from "antd";
+import { TimeRangeSelect, Icon } from "snowy";
+import { Log } from "snowy";
+
+import { client } from "../../graphql";
+import query from './query'
+import { useQuery } from "@apollo/client";
+
+
+const { Option } = Select;
+const { SHOW_PARENT } = TreeSelect;
+
+export default function Journal() {
+  const [time, setTime] = useState("-24h");
+  const [treeData, setTreeData] = useState([]);
+  const [treeValue, setTreeValue] = useState([]);
+
+  const tProps = {
+    treeData,
+    treeCheckable: true,
+    showCheckedStrategy: SHOW_PARENT,
+    searchPlaceholder: "POD/容器 筛选",
+    maxTagCount: 1,
+    value: treeValue,
+    onChange: (v) => {
+      setTreeValue(v)
+    }
+  };
+
+  const journalFormItemStyle = {
+    style: {
+      height: "40px",
+      paddingTop: "4px",
+      width: "200px",
+      marginRight: "10px",
+    },
+  };
+
+  const { data } = useQuery(query, {
+    client: client,
+    variables: {
+      cid: "compass-stack",
+      kind: "apps",
+      name: "monitoring-metrics-server",
+      originKind: "Release",
+      partition: "kube-system"
+    }
+  });
+
+  useEffect(() => {
+    if (!data || !data.getServerResources || !data.getServerResources.pods) {
+      setTreeData([])
+    } else {
+      const pods = data.getServerResources.pods
+      let children = pods.map(v => {
+        let name = v.metadata.name
+        return {
+          title: name,
+          value: name,
+          key: name,
+          ...(v.spec && v.spec.containers && v.spec.containers.length && {
+            children: v.spec.containers.map(val => {
+              let subName = val.metadata.name
+              let subKey = name + '-' + subName
+              return {
+                title: subName,
+                value: subKey,
+                key: subKey,
+              }
+            })
+          })
+        }
+      })
+      if (pods.length) {
+        setTreeData([{
+          title: "全部 POD/容器",
+          value: "all",
+          key: "all",
+          children
+        }])
+        setTreeValue(['all'])
+      } else {
+        setTreeData([])
+      }
+    }
+  }, [data])
+
+  return (
+    <>
+      <div style={{ padding: "20px" }}>
+        <div style={{ marginBottom: "20px" }}>
+          <Select placeholder="请选择集群" {...journalFormItemStyle}>
+            <Option value="compass-stack">compass-stack</Option>
+          </Select>
+          <Select placeholder="请选择分区" {...journalFormItemStyle}>
+            <Option value="compass-stack">compass-stack</Option>
+          </Select>
+          <Select placeholder="请选择服务" {...journalFormItemStyle}>
+            <Option value="compass-stack">compass-stack</Option>
+          </Select>
+          <TreeSelect {...tProps} {...journalFormItemStyle} />
+          <Input
+            suffix={<Icon type="search" />}
+            placeholder="输入关键词搜索"
+            {...journalFormItemStyle}
+          />
+          <TimeRangeSelect
+            onChange={(v) => setTime(v)}
+            value={time}
+            {...journalFormItemStyle}
+          />
+        </div>
+        <Log
+          onDownload={() => {
+            console.log(123);
+          }}
+        />
+      </div>
+    </>
+  );
+}