SWIK-1958 prediction item component changes

components/User/UserProfile/UserAnalytics/UserPerformancePredictionItem.js

@@ -1,38 +1,52 @@
 import React from 'react';
 import {List, Icon, Button} from 'semantic-ui-react';
+import {formatDate} from '../../../Deck/ActivityFeedPanel/util/ActivityFeedUtil';
 
 class UserpPerformancePredictionItem extends React.Component {
 
     render() {
         const prediction = this.props.prediction;
-        const resultIcon = (!prediction.result) ? '' : (prediction.result < 50) ? (<i className="icon certificate red large"/>) : (prediction.result < 80) ? (<i className="icon certificate yellow large"/>) : (<i className="icon certificate green large"/>);
+        const resultIcons = (!prediction.result) ? '' :
+            (prediction.result < 50) ? (
+                <div className="ui raised segment">
+                    <i className="icon certificate big red"/>
+                    <i className="icon circle outline large yellow"/>
+                    <i className="icon circle outline large green"/>
+                </div>
+            ) : (prediction.result < 80) ? (
+                <div>
+                    <i className="icon circle outline large red"/>
+                    <i className="icon certificate big yellow"/>
+                    <i className="icon circle outline large green"/>
+                </div>
+            ) : (
+                <div>
+                    <i className="icon circle outline large green"/>
+                    <i className="icon circle outline large yellow"/>
+                    <i className="icon certificate big green"/>
+                </div>
+            );
         return (
             <List.Item className="ui raised segment" style={{border:0}}>
                 <List.Content style={{width:'100%'}} tabIndex='0'>
 
                     <List.Description>
                         <div key={this.props.key} className="ui vertical segment" >
-                            <div className="ui five column stackable grid container">
+                            <div className="ui four column stackable grid container">
 
                                 <div className="column">
                                     <div className="ui header"><h3>{prediction.title}</h3></div>
                                 </div>
                                 <div className="column">
-                                    Started:
-                                    {prediction.started}
+                                    {(prediction.finished) ? 'Executed ' : 'Started '}
+                                    {formatDate(prediction.started)}
                                 </div>
                                 <div className="column">
-                                    Finished:
-                                    {prediction.finished}
+                                    {(prediction.result) ? 'Predicted result: ' + prediction.result : ''}
+                                    {resultIcons}
                                 </div>
                                 <div className="column">
-                                    Result:
-                                    {prediction.result}
-                                    {resultIcon}
-                                </div>
-                                <div className="column">
-                                    Accuracy:
-                                    {prediction.accuracy}
+                                    {(prediction.accuracy) ? 'Accuracy: ' + Math.round(prediction.accuracy * 100) / 100 : ''}
                                 </div>
                             </div>
                         </div>

services/analytics.js

@@ -2,7 +2,7 @@ import {Microservices} from '../configs/microservices';
 import rp from 'request-promise';
 const log = require('../configs/log').log;
 
-const analyticsServiceUri = 'http://localhost:8084';
+const analyticsServiceUri = 'http://localhost';