From 60f9df2c3339f4071476a1cfb2543d5a98347a0f Mon Sep 17 00:00:00 2001
From: Anisha1234 <aswain@redhat.com>
Date: Thu, 19 Nov 2020 16:22:08 +0530
Subject: [PATCH] adds chart and legends

---
 src/pages/Overview/index.js   | 428 +++++++++++++++++++++++++++++++---
 src/pages/Overview/index.less |  19 +-
 2 files changed, 419 insertions(+), 28 deletions(-)

diff --git a/src/pages/Overview/index.js b/src/pages/Overview/index.js
index 6b7144625..48813918f 100644
--- a/src/pages/Overview/index.js
+++ b/src/pages/Overview/index.js
@@ -11,6 +11,11 @@ import {
   Tab,
 } from '@patternfly/react-core';
 import {
+  Chart,
+  ChartBar,
+  ChartAxis,
+  ChartStack,
+  ChartVoronoiContainer,
   ChartDonutThreshold,
   ChartDonutUtilization,
   ChartThemeColor,
@@ -18,7 +23,12 @@ import {
 import { Icon } from 'antd';
 import { connect } from 'dva';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { OutlinedClockIcon, UndoAltIcon } from '@patternfly/react-icons';
+import {
+  OutlinedClockIcon,
+  UndoAltIcon,
+  ExternalLinkAltIcon,
+  EllipsisVIcon,
+} from '@patternfly/react-icons';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import Table from '@/components/Table';
 // import { Table } from 'antd';
@@ -34,6 +44,7 @@ class Overview extends React.Component {
     super(props);
     this.state = {
       activeTabKey: 0,
+      barWidth: '20',
     };
   }
 
@@ -55,8 +66,13 @@ class Overview extends React.Component {
     });
   };
 
+  showDrowpdown = () => {
+    console.log('here');
+  };
+
   render() {
-    const { activeTabKey } = this.state;
+    const { activeTabKey, barWidth } = this.state;
+
     const columns = [
       {
         title: 'Result',
@@ -89,7 +105,17 @@ class Overview extends React.Component {
         title: '',
         dataIndex: 'action',
         key: 'action',
-        render: () => <h1>action</h1>,
+        render: () => (
+          <div>
+            <EllipsisVIcon onClick={() => this.showDrowpdown()} />
+            {/* <div id="Dropdown" className="dropdownmenu-content">
+              <a href="#Java">Java</a>
+              <a href="#HTML">HTML</a>
+              <a href="#CSS">CSS</a>
+              <a href="#JS">JavaScript</a>
+            </div> */}
+          </div>
+        ),
       },
     ];
     const data = [
@@ -101,19 +127,19 @@ class Overview extends React.Component {
       },
       {
         key: 2,
-        result: ['fio_2020.09.10T12.42.11', ' 2020-09-10T 11:52:34:552478'],
+        result: ['fio_2020.09.10T12.42.12', ' 2020-09-10T 11:52:34:552478'],
         end: '2020-09-10T 11:52:34:552478',
         description: 'More content can be added here',
       },
       {
         key: 3,
-        result: ['fio_2020.09.10T12.42.11', ' 2020-09-10T 11:52:34:552478'],
+        result: ['fio_2020.09.10T12.42.13', ' 2020-09-10T 11:52:34:552478'],
         end: '2020-09-10T 11:52:34:552478',
         description: 'More content can be added here',
       },
       {
         key: 4,
-        result: ['fio_2020.09.10T12.42.11', ' 2020-09-10T 11:52:34:552478'],
+        result: ['fio_2020.09.10T12.42.14', ' 2020-09-10T 11:52:34:552478'],
         end: '2020-09-10T 11:52:34:552478',
         description: 'More content can be added here',
       },
@@ -130,7 +156,7 @@ class Overview extends React.Component {
     };
 
     return (
-      <div className={styles.paddingSmall}>
+      <div className={styles.paddingBig}>
         <Tabs activeKey={activeTabKey} onSelect={this.handleTabClick}>
           <Tab eventKey={0} title="Overview">
             <div style={{ marginTop: '32px' }}>
@@ -212,6 +238,85 @@ class Overview extends React.Component {
                           </TextContent>
                         </div>
                       </Card>
+                      <Card className={styles.subCard}>
+                        <div className={styles.paddingSmall}>
+                          <TextContent>
+                            <Button variant="link" isInline>
+                              fio_2020.09.10T12.42.11
+                            </Button>
+                            <Text component={TextVariants.p} className={styles.subText}>
+                              <OutlinedClockIcon className={styles.icons} /> 2020-09-10T
+                              11:52:34:552478
+                            </Text>
+                          </TextContent>
+                        </div>
+                      </Card>
+                      <Card className={styles.subCard}>
+                        <div className={styles.paddingSmall}>
+                          <TextContent>
+                            <Button variant="link" isInline>
+                              fio_2020.09.10T12.42.11
+                            </Button>
+                            <Text component={TextVariants.p} className={styles.subText}>
+                              <OutlinedClockIcon className={styles.icons} /> 2020-09-10T
+                              11:52:34:552478
+                            </Text>
+                          </TextContent>
+                        </div>
+                      </Card>
+                      <Card className={styles.subCard}>
+                        <div className={styles.paddingSmall}>
+                          <TextContent>
+                            <Button variant="link" isInline>
+                              fio_2020.09.10T12.42.11
+                            </Button>
+                            <Text component={TextVariants.p} className={styles.subText}>
+                              <OutlinedClockIcon className={styles.icons} /> 2020-09-10T
+                              11:52:34:552478
+                            </Text>
+                          </TextContent>
+                        </div>
+                      </Card>
+                      <Card className={styles.subCard}>
+                        <div className={styles.paddingSmall}>
+                          <TextContent>
+                            <Button variant="link" isInline>
+                              fio_2020.09.10T12.42.11
+                            </Button>
+                            <Text component={TextVariants.p} className={styles.subText}>
+                              <OutlinedClockIcon className={styles.icons} /> 2020-09-10T
+                              11:52:34:552478
+                            </Text>
+                          </TextContent>
+                        </div>
+                      </Card>
+                      <Card className={styles.subCard}>
+                        <div className={styles.paddingSmall}>
+                          <TextContent>
+                            <Button variant="link" isInline>
+                              fio_2020.09.10T12.42.11
+                            </Button>
+                            <Text component={TextVariants.p} className={styles.subText}>
+                              <OutlinedClockIcon className={styles.icons} /> 2020-09-10T
+                              11:52:34:552478
+                            </Text>
+                          </TextContent>
+                        </div>
+                      </Card>
+
+                      <Card className={styles.subCard}>
+                        <div className={styles.paddingSmall}>
+                          <TextContent>
+                            <Button variant="link" isInline>
+                              fio_2020.09.10T12.42.11
+                            </Button>
+                            <Text component={TextVariants.p} className={styles.subText}>
+                              <OutlinedClockIcon className={styles.icons} /> 2020-09-10T
+                              11:52:34:552478
+                            </Text>
+                          </TextContent>
+                        </div>
+                      </Card>
                     </div>
                     <Card className={styles.subCard}>
                       <div className={styles.paddingSmall}>
@@ -256,14 +361,16 @@ class Overview extends React.Component {
                         <Text component={TextVariants.h3}> Unabled</Text>
                       </TextContent>
                       <Button variant="link">Go to all runs</Button>
-                      {/* <div>
-                  <Table
-                    columns={columns}
-                    rowSelection={rowSelection}
-                    expandedRowRender={record => <p style={{ margin: 0 }}>{record.description}</p>}
-                    dataSource={data}
-                  />
-                </div> */}
+                    </div>
+                    <div>
+                      <Table
+                        columns={columns}
+                        rowSelection={rowSelection}
+                        expandedRowRender={record => (
+                          <p style={{ margin: 0 }}>{record.description}</p>
+                        )}
+                        dataSource={data}
+                      />
                     </div>
                   </Card>
                 </GridItem>
@@ -273,18 +380,32 @@ class Overview extends React.Component {
           <Tab eventKey={1} title="Visualization">
             <div style={{ marginTop: '32px' }}>
               <TextContent className={styles.paddingSmall}>
-                <Text component={TextVariants.h1}> Analysis</Text>
+                <Grid>
+                  <GridItem span={6}>
+                    <Text component={TextVariants.h1}> Analysis</Text>
+                  </GridItem>
+                  <GridItem span={6}>
+                    <Text component={TextVariants.h3} style={{ textAlign: 'right' }}>
+                      {' '}
+                      Total runs: 1,179
+                    </Text>
+                  </GridItem>
+                </Grid>
               </TextContent>
               <Grid>
                 <GridItem span={12}>
                   <Card className={styles.borderedCard}>
                     <div className={styles.paddingBig}>
                       <TextContent>
-                        <Text component={TextVariants.h3}>
+                        <Text component={TextVariants.h2}>
                           {' '}
                           Runs
-                          <Button variant="link" icon={<UndoAltIcon />} style={{ float: 'right' }}>
-                            Refresh results
+                          <Button
+                            variant="link"
+                            icon={<ExternalLinkAltIcon />}
+                            style={{ float: 'right' }}
+                          >
+                            View in Kibana
                           </Button>
                         </Text>
                       </TextContent>
@@ -294,15 +415,15 @@ class Overview extends React.Component {
                     <Grid>
                       <GridItem span={7}>
                         <TextContent className={styles.paddingSmall}>
-                          <Text component={TextVariants.h3}>
+                          <Text component={TextVariants.h3} style={{ color: 'grey' }}>
                             {' '}
-                            Click on sections of the graph to view detai;ed data
+                            Click on sections of the graph to view detailed data
                           </Text>
                         </TextContent>
                         <Grid>
-                          <GridItem span={6}>
+                          <GridItem span={5} offset={1}>
                             <div
-                              style={{ height: '230px', width: '230px' }}
+                              style={{ height: '260px', width: '260px' }}
                               className={styles.paddingBig}
                             >
                               <ChartDonutThreshold
@@ -320,7 +441,6 @@ class Overview extends React.Component {
                                   labels={({ datum }) =>
                                     datum.x ? `${datum.x}: ${datum.y}%` : null
                                   }
-                                  title="60%"
                                   themeColor={ChartThemeColor.yellow}
                                   thresholds={[{ value: 60 }, { value: 90 }]}
                                 />
@@ -329,7 +449,7 @@ class Overview extends React.Component {
                           </GridItem>
                           <GridItem span={6}>
                             <div
-                              style={{ height: '230px', width: '230px' }}
+                              style={{ height: '260px', width: '260px' }}
                               className={styles.paddingBig}
                             >
                               <ChartDonutThreshold
@@ -347,7 +467,6 @@ class Overview extends React.Component {
                                   labels={({ datum }) =>
                                     datum.x ? `${datum.x}: ${datum.y}%` : null
                                   }
-                                  title="45%"
                                 />
                               </ChartDonutThreshold>
                             </div>
@@ -355,7 +474,262 @@ class Overview extends React.Component {
                         </Grid>
                       </GridItem>
                       <GridItem span={5} style={{ borderLeft: '1px solid #b3b2b2' }}>
-                        <div className={styles.paddingBig}>kmwlkemfc</div>
+                        <div className={styles.paddingBig}>
+                          <TextContent>
+                            <Text component={TextVariants.h3}>
+                              perf102.perf.lab.eng.bos.redhat.com
+                            </Text>
+                            <Text component={TextVariants.h4}>Field</Text>
+                            <a>run.controller</a>
+                            <Text component={TextVariants.h4}>Value</Text>
+                            <a>scale-ci-http-tfg6k</a>
+                            <Text component={TextVariants.h4}>Count</Text>
+                            <span>54(3.81%)</span>
+                          </TextContent>
+                        </div>
+                      </GridItem>
+                    </Grid>
+                  </Card>
+                  <Card className={styles.borderedCard}>
+                    <div className={styles.paddingBig}>
+                      <TextContent>
+                        <span>
+                          <Text component={TextVariants.h3} style={{ display: 'inline' }}>
+                            Legend
+                          </Text>
+                        </span>
+                        <span
+                          className={styles.colorBoxInline}
+                          style={{ backgroundColor: 'blue' }}
+                        />
+                        <span className={styles.legendLabel}>ip-172-31-88-27.ec2.internal</span>
+                        <span
+                          className={styles.colorBoxInline}
+                          style={{ backgroundColor: 'green' }}
+                        />
+                        <span className={styles.legendLabel}>perf44-85qp8-infra-c-6qtbg.c</span>
+                        <span
+                          className={styles.colorBoxInline}
+                          style={{ backgroundColor: 'red' }}
+                        />
+                        <span className={styles.legendLabel}>
+                          dhcp31-25.perf.lab.eng.bos.redhat.com
+                        </span>
+                        <span
+                          className={styles.colorBoxInline}
+                          style={{ backgroundColor: 'violet' }}
+                        />
+                        <span className={styles.legendLabel}>
+                          frival-l64sv2-rhel8-Standard-L64s-v2-1-vm
+                        </span>
+                        <span
+                          className={styles.colorBoxInline}
+                          style={{ backgroundColor: '#f0ab00' }}
+                        />
+                        <span className={styles.legendLabel}>scale-ci-http-dzms4</span>
+                      </TextContent>
+                    </div>
+                  </Card>
+                </GridItem>
+              </Grid>
+              <Grid>
+                <GridItem span={12}>
+                  <Card className={styles.borderedCard}>
+                    <div className={styles.paddingBig}>
+                      <TextContent>
+                        <Text component={TextVariants.h2}>
+                          {' '}
+                          Runs over time
+                          <Button
+                            variant="link"
+                            icon={<ExternalLinkAltIcon />}
+                            style={{ float: 'right' }}
+                          >
+                            View in Kibana
+                          </Button>
+                        </Text>
+                      </TextContent>
+                    </div>
+                  </Card>
+                  <Card className={styles.borderedCard}>
+                    <Grid>
+                      <GridItem span={8}>
+                        <TextContent className={styles.paddingSmall}>
+                          <Text component={TextVariants.h4} style={{ color: 'grey' }}>
+                            {' '}
+                            @metadata.satellite.EC2: filters
+                          </Text>
+                        </TextContent>
+                        <Grid>
+                          <div className={styles.borderedCard}>
+                            <Chart
+                              ariaDesc="mock metdata"
+                              ariaTitle="mock meta data"
+                              containerComponent={
+                                <ChartVoronoiContainer
+                                  labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                                  constrainToVisibleArea
+                                />
+                              }
+                              domainPadding={{ x: [50, 50] }}
+                              height={500}
+                              padding={{
+                                bottom: 50,
+                                left: 50,
+                                right: 200,
+                                top: 50,
+                              }}
+                              width={1200}
+                            >
+                              <ChartAxis />
+                              <ChartAxis dependentAxis showGrid />
+                              <ChartStack>
+                                <ChartBar
+                                  data={[
+                                    { name: 'meta1', x: '5-10-2020', y: 100 },
+                                    { name: 'meta1', x: '6-10-2020', y: 100 },
+                                    { name: 'meta1', x: '7-10-2020', y: 70 },
+                                    { name: 'meta1', x: '8-10-2020', y: 10 },
+                                    { name: 'meta2', x: '9-10-2020', y: 50 },
+                                    { name: 'meta2', x: '10-10-2020', y: 50 },
+                                    { name: 'meta2', x: '11-10-2020', y: 30 },
+                                    { name: 'meta3', x: '12-10-2020', y: 50 },
+                                    { name: 'meta2', x: '13-10-2020', y: 50 },
+                                    { name: 'meta2', x: '14-10-2020', y: 30 },
+                                    { name: 'meta3', x: '15-10-2020', y: 150 },
+                                    { name: 'meta2', x: '16-10-2020', y: 50 },
+                                  ]}
+                                  barWidth={barWidth}
+                                />
+                                <ChartBar
+                                  data={[
+                                    { name: 'meta1', x: '5-10-2020', y: 100 },
+                                    { name: 'meta1', x: '7-10-2020', y: 57 },
+                                    { name: 'meta1', x: '8-10-2020', y: 40 },
+                                    { name: 'meta1', x: '9-10-2020', y: 20 },
+                                    { name: 'meta2', x: '10-10-2020', y: 120 },
+                                    { name: 'meta2', x: '11-10-2020', y: 90 },
+                                    { name: 'meta2', x: '12-10-2020', y: 0 },
+                                    { name: 'meta3', x: '13-10-2020', y: 70 },
+                                    { name: 'meta2', x: '14-10-2020', y: 50 },
+                                    { name: 'meta2', x: '15-10-2020', y: 30 },
+                                    { name: 'meta3', x: '16-10-2020', y: 150 },
+                                  ]}
+                                  barWidth={barWidth}
+                                />
+                              </ChartStack>
+                            </Chart>
+                          </div>
+                          <TextContent className={styles.paddingSmall}>
+                            <Text component={TextVariants.h4} style={{ color: 'grey' }}>
+                              {' '}
+                              NOT @metadata.satellite.EC2: filters
+                            </Text>
+                          </TextContent>
+                          <div className={styles.borderedCard}>
+                            <Chart
+                              ariaDesc="mock meta data"
+                              ariaTitle="mock meta data"
+                              containerComponent={
+                                <ChartVoronoiContainer
+                                  labels={({ datum }) => `${datum.name}: ${datum.y}`}
+                                  constrainToVisibleArea
+                                />
+                              }
+                              domainPadding={{ x: [50, 50] }}
+                              height={500}
+                              padding={{
+                                bottom: 50,
+                                left: 50,
+                                right: 200,
+                                top: 50,
+                              }}
+                              themeColor={ChartThemeColor.gold}
+                              width={1200}
+                            >
+                              <ChartAxis />
+                              <ChartAxis dependentAxis showGrid />
+                              <ChartStack>
+                                <ChartBar
+                                  data={[
+                                    { name: 'meta1', x: '5-10-2020', y: 50 },
+                                    { name: 'meta1', x: '6-10-2020', y: 200 },
+                                    { name: 'meta1', x: '7-10-2020', y: 70 },
+                                    { name: 'meta1', x: '8-10-2020', y: 100 },
+                                    { name: 'meta2', x: '9-10-2020', y: 50 },
+                                    { name: 'meta2', x: '10-10-2020', y: 50 },
+                                    { name: 'meta2', x: '11-10-2020', y: 30 },
+                                    { name: 'meta3', x: '12-10-2020', y: 150 },
+                                    { name: 'meta2', x: '13-10-2020', y: 50 },
+                                    { name: 'meta2', x: '14-10-2020', y: 30 },
+                                    { name: 'meta3', x: '15-10-2020', y: 150 },
+                                  ]}
+                                  barWidth={barWidth}
+                                />
+                                <ChartBar
+                                  data={[
+                                    { name: 'meta1', x: '5-10-2020', y: 100 },
+                                    { name: 'meta1', x: '6-10-2020', y: 104 },
+                                    { name: 'meta1', x: '7-10-2020', y: 70 },
+                                    { name: 'meta1', x: '8-10-2020', y: 110 },
+                                    { name: 'meta2', x: '9-10-2020', y: 50 },
+                                    { name: 'meta2', x: '10-10-2020', y: 60 },
+                                    { name: 'meta2', x: '11-10-2020', y: 30 },
+                                    { name: 'meta3', x: '12-10-2020', y: 50 },
+                                    { name: 'meta2', x: '13-10-2020', y: 50 },
+                                    { name: 'meta2', x: '14-10-2020', y: 30 },
+                                    { name: 'meta3', x: '15-10-2020', y: 150 },
+                                  ]}
+                                  barWidth={barWidth}
+                                />
+                              </ChartStack>
+                            </Chart>
+                          </div>
+                        </Grid>
+                      </GridItem>
+                      <GridItem span={4} style={{ borderLeft: '1px solid #b3b2b2' }}>
+                        <div className={styles.paddingBig}>
+                          <TextContent>
+                            <span>
+                              <Text component={TextVariants.h3}>Legend</Text>
+                            </span>
+                            <div>
+                              <span
+                                className={styles.colorBox}
+                                style={{ backgroundColor: 'blue' }}
+                              />
+                              <span className={styles.legendLabel}>pbench-user-benchmark</span>
+                            </div>
+                            <div>
+                              <span
+                                className={styles.colorBox}
+                                style={{ backgroundColor: 'green' }}
+                              />
+                              <span className={styles.legendLabel}>trafficgen</span>
+                            </div>
+                            <div>
+                              <span
+                                className={styles.colorBox}
+                                style={{ backgroundColor: 'red' }}
+                              />
+                              <span className={styles.legendLabel}>uperf</span>
+                            </div>
+                            <div>
+                              <span
+                                className={styles.colorBox}
+                                style={{ backgroundColor: 'violet' }}
+                              />
+                              <span className={styles.legendLabel}>linpack</span>
+                            </div>
+                            <div>
+                              <span
+                                className={styles.colorBox}
+                                style={{ backgroundColor: '#f0ab00' }}
+                              />
+                              <span className={styles.legendLabel}>fio</span>
+                            </div>
+                          </TextContent>
+                        </div>
                       </GridItem>
                     </Grid>
                   </Card>
diff --git a/src/pages/Overview/index.less b/src/pages/Overview/index.less
index 14406694b..69ff7a20e 100644
--- a/src/pages/Overview/index.less
+++ b/src/pages/Overview/index.less
@@ -41,7 +41,7 @@
 }
 
 .expiringValues {
-  height: 25vh;
+  height: 43vh;
   overflow: scroll;
 }
 
@@ -55,3 +55,20 @@
 .borderedCard {
   border: solid 1px #b3b2b2;
 }
+.colorBox,
+.colorBoxInline {
+  width: 0.7rem;
+  height: 0.7rem;
+  margin-left: 24px;
+  display: inline-block;
+}
+
+.colorBoxInline {
+  display: inline-block;
+}
+
+.legendLabel {
+  margin-left: 8px;
+  font-size: var(--pf-global--FontSize--sm);
+  color: var(--pf-global--Color--300);
+}