From 96a6423ddde8c9a096d9e4941855d28ba7770d34 Mon Sep 17 00:00:00 2001
From: Lukas Brabec <lbrabec@redhat.com>
Date: Jan 10 2019 13:35:49 +0000
Subject: milestone info in td title


---
diff --git a/public/index.html b/public/index.html
index 1111bdd..aec08dd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,7 +27,8 @@
 
     <link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/hack.css" type="text/css" rel="stylesheet" />
     <link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/open-sans.css" type="text/css" rel="stylesheet" />
-    <link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/font-awesome.css" type="text/css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+
   </head>
   <body>
     <noscript>
diff --git a/src/Timeline.js b/src/Timeline.js
index 9aa9985..6a49b2e 100644
--- a/src/Timeline.js
+++ b/src/Timeline.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-
+import { Tooltip } from 'reactstrap';
 
 class Timeline extends Component {
     constructor(props) {
@@ -18,10 +18,22 @@ class Timeline extends Component {
             });
     }
 
+    get_title(summary) {
+        summary = summary.toLowerCase();
+        if (summary.includes("freeze"))
+            return "At the milestone freeze, pushes from the updates-testing to the stable repository are suspended until the release candidate is accepted."
+        if (summary === "rawhide")
+            return "Next Fedora release hasn't been branched yet from rolling release branch."
+        if (summary.includes("branch"))
+            return "Next version of Fedora that was 'branched' from the rolling Rawhide tree and in the future will become the next stable Fedora release."
+        if (summary.includes("release"))
+            return "Release candidate was accepted (violating no milestone criteria) and was released."
+    }
+
     render() {
         const line = this.state.schedule.map(milestone => {
             return (
-                <td><Line color={milestone.current? "#2371ae":"#dcdcdc"}/></td>
+                <td><Line color={milestone.current ? "#2371ae" : "#dcdcdc"} /></td>
             )
         })
 
@@ -30,15 +42,19 @@ class Timeline extends Component {
         });
 
         const schedule = this.state.schedule.map(milestone => {
-            return (<td width="150" key={milestone.summary}>{milestone.summary}</td>)
+            return (<td title={this.get_title(milestone.summary)} width="150" key={milestone.summary}>
+                {milestone.summary}{' '}<i className="fas fa-question-circle light"></i>
+            </td>)
         });
         return (
             <div>
                 <h5>Current development schedule</h5>
                 <table className="timeline">
-                    <tr>{line}</tr>
-                    <tr>{dates}</tr>
-                    <tr>{schedule}</tr>
+                    <tbody>
+                        <tr>{line}</tr>
+                        <tr>{dates}</tr>
+                        <tr>{schedule}</tr>
+                    </tbody>
                 </table>
             </div>
         );
@@ -54,10 +70,42 @@ class Line extends Component {
         return (
             <svg width="150" height="20" version="1.1">
                 <line x1="0" y1="50%" x2="100%" y2="50%" style={lineStyle} />
-                <circle cx="50%" cy="50%" r="4" stroke={this.props.color} stroke-width="3" fill="white" />
+                <circle cx="50%" cy="50%" r="4" style={lineStyle} fill="white" />
             </svg>
         )
     }
 }
 
+
+class MilestoneTooltip extends Component {
+    constructor(props) {
+        super(props);
+
+        this.toggle = this.toggle.bind(this);
+        this.state = {
+            tooltipOpen: false
+        };
+    }
+
+    toggle() {
+        this.setState({
+            tooltipOpen: !this.state.tooltipOpen
+        });
+    }
+
+
+
+    render() {
+        const classes = 'tooltip-inner'
+        return (
+            <div>
+                <p>Somewhere in here is a <span style={{ textDecoration: "underline", color: "blue" }} href="#" id="TooltipExample">tooltip</span>.</p>
+                <Tooltip placement="right" isOpen={this.state.tooltipOpen} target="TooltipExample" toggle={this.toggle}>
+                    Hello world!
+          </Tooltip>
+            </div>
+        );
+    }
+}
+
 export default Timeline;
diff --git a/src/index.css b/src/index.css
index 56a3055..32610a9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -43,6 +43,10 @@ h5 {
   vertical-align: top;
 }
 
+.light {
+  color: #b0b0b0;
+}
+
 .events {
   font-size: 0.8em !important;
 }
\ No newline at end of file

