From 0439ccf76f9ccf68c7572deadf38d6a157c439e7 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Thu, 21 Sep 2017 15:10:15 +0200
Subject: Implement last-simulated-tick and states fetching

---
 src/components/sidebars/simulation/TaskComponent.js  |  6 +++---
 src/components/sidebars/simulation/TraceComponent.js | 13 ++++++++-----
 src/components/timeline/TimelineControlsComponent.js |  4 ++--
 3 files changed, 13 insertions(+), 10 deletions(-)

(limited to 'src/components')

diff --git a/src/components/sidebars/simulation/TaskComponent.js b/src/components/sidebars/simulation/TaskComponent.js
index 9a26e720..c02d0a4b 100644
--- a/src/components/sidebars/simulation/TaskComponent.js
+++ b/src/components/sidebars/simulation/TaskComponent.js
@@ -5,16 +5,16 @@ const TaskComponent = ({task, flopsLeft}) => {
     let stateInfo;
 
     if (flopsLeft === task.totalFlopCount) {
-        stateInfo = <p><span className="fa fa-hourglass-half"/>Waiting</p>;
+        stateInfo = <p><span className="fa fa-hourglass-half mr-2"/>Waiting</p>;
     } else if (flopsLeft > 0) {
         stateInfo = (
             <p>
-                <span className="fa fa-refresh"/>
+                <span className="fa fa-refresh mr-2"/>
                 Running ({task.totalFlopCount - flopsLeft} / {task.totalFlopCount} FLOPS)
             </p>
         );
     } else {
-        stateInfo = <p><span className="fa fa-check"/>Completed</p>;
+        stateInfo = <p><span className="fa fa-check mr-2"/>Completed</p>;
     }
 
     return (
diff --git a/src/components/sidebars/simulation/TraceComponent.js b/src/components/sidebars/simulation/TraceComponent.js
index 498fe5bf..ffb470ba 100644
--- a/src/components/sidebars/simulation/TraceComponent.js
+++ b/src/components/sidebars/simulation/TraceComponent.js
@@ -5,11 +5,14 @@ const TraceComponent = ({jobs}) => (
     <div>
         <h3>Trace</h3>
         {jobs.map(job => (
-            <ul className="list-group" key={job.id}>
-                {job.taskIds.map(taskId => (
-                    <TaskContainer taskId={taskId} key={taskId}/>
-                ))}
-            </ul>
+            <div key={job.id}>
+                <h4>Job: {job.name}</h4>
+                <ul className="list-group">
+                    {job.taskIds.map(taskId => (
+                        <TaskContainer taskId={taskId} key={taskId}/>
+                    ))}
+                </ul>
+            </div>
         ))}
     </div>
 );
diff --git a/src/components/timeline/TimelineControlsComponent.js b/src/components/timeline/TimelineControlsComponent.js
index 3f37c3bc..2e093583 100644
--- a/src/components/timeline/TimelineControlsComponent.js
+++ b/src/components/timeline/TimelineControlsComponent.js
@@ -5,10 +5,10 @@ function getXPercentage(tick, maxTick) {
     if (maxTick === 0) {
         return "0%";
     } else if (tick > maxTick) {
-        return "100%";
+        return ((maxTick / (maxTick + 1)) * 100) + "%";
     }
 
-    return (tick / maxTick) + "%";
+    return ((tick / (maxTick + 1)) * 100) + "%";
 }
 
 const TimelineControlsComponent = ({currentTick, lastSimulatedTick, sectionTicks}) => (
-- 
cgit v1.2.3