From: MaleicAcid <CS_MaleicAcid@163\.com>
Date: Fri, 1 Jun 2018 15:43:41 +0000 (+0800)
Subject: add result card component
X-Git-Url: http://git.postgresql.org/gitweb/static/gitweb.js?a=commitdiff_plain;h=27a2fc1992ccdfc64719af9484cee4399779d97e;p=pgperffarm.git

add result card component
---

diff --git a/front-end/package.json b/front-end/package.json
index 3980f0f..17ad0d3 100644
--- a/front-end/package.json
+++ b/front-end/package.json
@@ -32,6 +32,7 @@
     "react-dom": "16.2.0",
     "react-router-dom": "4.2.2",
     "react-router-transition": "^1.2.1",
-    "react-table": "^6.8.6"
+    "react-table": "^6.8.6",
+    "semantic-ui-react": "^0.80.2"
   }
 }
diff --git a/front-end/src/component/nav-top/index.css b/front-end/src/component/nav-top/index.css
index bf20bd2..945baed 100644
--- a/front-end/src/component/nav-top/index.css
+++ b/front-end/src/component/nav-top/index.css
@@ -22,7 +22,7 @@
 
 .top-navbar .navbar-brand {
     color: #fff;
-    width: 320px;
+    width: 340px;
     text-align: left;
     height: 60px;
     font-size: 30px;
diff --git a/front-end/src/component/test-result-card/index.css b/front-end/src/component/test-result-card/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/front-end/src/component/test-result-card/index.jsx b/front-end/src/component/test-result-card/index.jsx
new file mode 100644
index 0000000..40135bb
--- /dev/null
+++ b/front-end/src/component/test-result-card/index.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {Card, Icon} from 'semantic-ui-react'
+import './index.css';
+
+class TestResultCard extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selected_items: [
+                {'cate': 'Category 2', 'name': '30 days'}
+            ],
+            restoreNum: 0,
+        };
+
+
+        // this.selectItemClick = this.selectItemClick.bind(this);
+    }
+
+
+
+    render() {
+        let description = [
+            'Amy is a violinist with 2 years experience in the wedding industry.',
+            'She enjoys the outdoors and currently resides in upstate New York.',
+        ].join(' ');
+        return (
+            <div>
+                <Card>
+                    <Card.Content header='About Amy'/>
+                    <Card.Content description={description}/>
+                    <Card.Content extra>
+                        <Icon name='user'/>
+                        4 Friends
+                    </Card.Content>
+                </Card>
+            </div>
+        );
+    }
+}
+
+export default TestResultCard;
\ No newline at end of file
diff --git a/front-end/src/index.html b/front-end/src/index.html
index a7b7ac7..e783a31 100644
--- a/front-end/src/index.html
+++ b/front-end/src/index.html
@@ -10,6 +10,7 @@
         <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
         <!--<link href="https://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">-->
         <!--<link href="component/layout/theme.css" rel="stylesheet">-->
+        <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet">
     </head>
 
     <title>PG PerfFarm</title>
diff --git a/front-end/src/page/detailInfo/index.jsx b/front-end/src/page/detailInfo/index.jsx
index 45ff2ba..cd79e53 100644
--- a/front-end/src/page/detailInfo/index.jsx
+++ b/front-end/src/page/detailInfo/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import './index.css';
-
+import TestResultCard from 'component/test-result-card/index.jsx';
 class DetailInfo extends React.Component{
     constructor(props) {
         super(props);
@@ -242,16 +242,37 @@ class DetailInfo extends React.Component{
     }
     render(){
         return (
-            <div id="page-wrapper" className="jumbotron">
-                <h1>DetailInfo, world!</h1>
-                <p>
-                    The PostgreSQL Performance Farm project is a community project to collect performance data from tests as code changes are made to PostgreSQL. To support this effort, a database needs to be created for storing results, and a Web site developed to review results.
-                    This project will focus on developing the Web site on top of the database.
-                    The database will be using PostgreSQL in the back-end. Test results will come in the form of JSON and flat files. The Web application will be developed using the Django Web framework.
-                </p>
-                <p>
-                    As an example, the PostgreSQL Build Farm site is a central repository for the results of testing source code changes for PostgreSQL as they occur, on a wide variety of platforms.
-                </p>
+            <div>
+                <TestResultCard></TestResultCard>
+                {/*<div className="ui card">*/}
+                    {/*<div class="content">*/}
+                        {/*<div class="header">Project Timeline</div>*/}
+                    {/*</div>*/}
+                    {/*<div class="content">*/}
+                        {/*<h4 class="ui sub header">活动</h4>*/}
+                        {/*<div class="ui small feed">*/}
+                            {/*<div class="event">*/}
+                                {/*<div class="content">*/}
+                                    {/*<div class="summary"><a>Elliot Fu</a> added <a>Jenny Hess</a> to the project </div>*/}
+                                {/*</div>*/}
+                            {/*</div>*/}
+                            {/*<div class="event">*/}
+                                {/*<div class="content">*/}
+                                    {/*<div class="summary"><a>Stevie Feliciano</a> was added as an <a>Administrator</a> </div>*/}
+                                {/*</div>*/}
+                            {/*</div>*/}
+                            {/*<div class="event">*/}
+                                {/*<div class="content">*/}
+                                    {/*<div class="summary"><a>Helen Troy</a> added two pictures </div>*/}
+                                {/*</div>*/}
+                            {/*</div>*/}
+                        {/*</div>*/}
+                    {/*</div>*/}
+                    {/*<div class="extra content">*/}
+                        {/*<button class="ui button">Join Project</button>*/}
+                    {/*</div>*/}
+                {/*</div>*/}
+
             </div>
         )
     }
diff --git a/front-end/yarn.lock b/front-end/yarn.lock
index 49fe2c2..b9a61f1 100644
--- a/front-end/yarn.lock
+++ b/front-end/yarn.lock
@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@babel/runtime@^7.0.0-beta.48":
+  version "7.0.0-beta.49"
+  resolved "http://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.0.0-beta.49.tgz#03b3bf07eb982072c8e851dd2ddd5110282e61bf"
+  dependencies:
+    core-js "^2.5.6"
+    regenerator-runtime "^0.11.1"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -1361,6 +1368,10 @@ core-js@^2.4.0, core-js@^2.5.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.3.tgz#8acc38345824f16d8365b7c9b4259168e8ed603e"
 
+core-js@^2.5.6:
+  version "2.5.7"
+  resolved "http://registry.npm.taobao.org/core-js/download/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -3098,6 +3109,10 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+keyboard-key@^1.0.1:
+  version "1.0.1"
+  resolved "http://registry.npm.taobao.org/keyboard-key/download/keyboard-key-1.0.1.tgz#a946294fe59ad5431c63a3ea269f023e51fac6aa"
+
 killable@^1.0.0:
   version "1.0.0"
   resolved "http://registry.npm.taobao.org/killable/download/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
@@ -3221,6 +3236,10 @@ lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, l
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
+lodash@^4.17.10:
+  version "4.17.10"
+  resolved "http://registry.npm.taobao.org/lodash/download/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
+
 loglevel@^1.4.1:
   version "1.6.1"
   resolved "http://registry.npm.taobao.org/loglevel/download/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
@@ -4216,7 +4235,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -4499,7 +4518,7 @@ regenerate@^1.2.1:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
 
-regenerator-runtime@^0.11.0:
+regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
@@ -4770,6 +4789,17 @@ selfsigned@^1.9.1:
   dependencies:
     node-forge "0.7.1"
 
+semantic-ui-react@^0.80.2:
+  version "0.80.2"
+  resolved "http://registry.npm.taobao.org/semantic-ui-react/download/semantic-ui-react-0.80.2.tgz#a584f6dc485b0617438adc4baf6d1858e54bb930"
+  dependencies:
+    "@babel/runtime" "^7.0.0-beta.48"
+    classnames "^2.2.5"
+    fbjs "^0.8.16"
+    keyboard-key "^1.0.1"
+    lodash "^4.17.10"
+    prop-types "^15.6.1"
+
 "semver@2 || 3 || 4 || 5", semver@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"