SWIK-1958 added accordion and thumbnail for predicion job

slidewiki · Mar 21, 2018 · 0d17883 · 0d17883
1 parent 59cf421
commit 0d17883
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 47 deletions.
diff --git a/actions/analytics/addPerformancePredictionJob.js b/actions/analytics/addPerformancePredictionJob.js
@@ -3,13 +3,14 @@ import serviceUnavailable from '../error/serviceUnavailable';
 
 export default function addPerformancePredictionJob(context, payload, done) {
     log.info(context, payload);
-    context.service.create('analytics.prediction', payload, {timeout: 20 * 1000}, (err, res) => {
+    context.dispatch('ADD_PERFORMANCE_PREDICTION_SUCCESS', payload);
+
+    context.service.create('analytics.prediction', payload, {timeout: 60 * 1000}, {timeout: 600 * 1000}, (err, res) => {
         if (err) {
             log.error(context, {filepath: __filename});
             context.executeAction(serviceUnavailable, payload, done);
-            context.dispatch('ADD_PERFORMANCE_PREDICTION_FAILED');
         } else {
-            context.dispatch('ADD_PERFORMANCE_PREDICTION_SUCCESS', res);
+            context.dispatch('LOAD_USER_PERFORMANCE_PREDICTIONS_SUCCESS', res);//list of all prediction jobs received
         }
         done();
     });

diff --git a/components/User/UserProfile/UserAnalytics/UserPerformancePredictionItem.js b/components/User/UserProfile/UserAnalytics/UserPerformancePredictionItem.js
@@ -1,59 +1,94 @@
 import React from 'react';
 import {List, Icon, Button} from 'semantic-ui-react';
+import { NavLink } from 'fluxible-router';
 import {formatDate} from '../../../Deck/ActivityFeedPanel/util/ActivityFeedUtil';
+import { Microservices } from '../../../../configs/microservices';
+import Thumbnail from '../../../common/Thumbnail';
 
 class UserpPerformancePredictionItem extends React.Component {
 
     render() {
         const prediction = this.props.prediction;
         const resultIcons = (!prediction.result) ? '' :
             (prediction.result < 50) ? (
-                <div className="ui raised segment">
+                <div className="ui raised compact 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>
+                <div className="ui raised compact segment">
                     <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"/>
+                <div className="ui raised compact segment">
+                    <i className="icon circle outline large red"/>
                     <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'>
+        let thumbnailURL = `${Microservices.file.uri}/thumbnail/slide/`;
+        if (prediction.deckFirstSlide) {
+            thumbnailURL += prediction.deckFirstSlide;
+            if (prediction.deckTheme) {
+                thumbnailURL += '/' + prediction.deckTheme;
+            }
+        } else {
+            thumbnailURL = '';
+        }
 
-                    <List.Description>
-                        <div key={this.props.key} className="ui vertical segment" >
-                            <div className="ui four column stackable grid container">
+        let duration = '';
+        let msPerMinute = 60 * 1000;
+        let elapsed = new Date(prediction.finished).getTime() - new Date(prediction.started).getTime();
+        if (elapsed < msPerMinute) {
+            duration = Math.round(elapsed/1000) + ' seconds';
+        } else{
+            duration = Math.round(elapsed/msPerMinute) + ' minutes';
+        }
+        return (
+            <div className="accordionItem">
+                <div className="title">
+                    <i className="dropdown icon"></i>
+                    <div className="ui vertical segment" >
+                        <div className="ui grid">
 
-                                <div className="column">
-                                    <div className="ui header"><h3>{prediction.title}</h3></div>
-                                </div>
-                                <div className="column">
-                                    {(prediction.finished) ? 'Executed ' : 'Started '}
-                                    {formatDate(prediction.started)}
-                                </div>
-                                <div className="column">
-                                    {(prediction.result) ? 'Predicted result: ' + prediction.result : ''}
-                                    {resultIcons}
-                                </div>
-                                <div className="column">
-                                    {(prediction.accuracy) ? 'Accuracy: ' + Math.round(prediction.accuracy * 100) / 100 : ''}
-                                </div>
+                            <div className="four wide column ui header">
+                                {prediction.title}
+                            </div>
+                            <div className="four wide column">
+                                {(prediction.finished) ? 'Executed ' : 'Started '}
+                                {formatDate(prediction.started)}
+                            </div>
+                            <div className="four wide column">
+                                {(prediction.result) ? 'Predicted result: ' + Math.round(prediction.result * 100) / 100 : ''}
                             </div>
+                            <div className="three wide column">
+                                {resultIcons}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="ui grid">
+                        <div className="four wide column">
+                            {(prediction.deckId) ? 'Deck id: ' + prediction.deckId : ''}
+                            <NavLink className="ui medium centered spaced image" aria-hidden={'true'}  tabIndex={'-1'} href={'/deck/' + prediction.deckId}>
+                                <Thumbnail url={thumbnailURL} alt={''}
+                                    slideId={prediction.deckId} />
+                            </NavLink>
+                        </div>
+                        <div className="four wide column">
+                            {(prediction.started) ? 'Started: ' + prediction.started : ''}
+                        </div>
+                        <div className="four wide column">
+                            {(prediction.finished) ? 'Duration: ' + duration : ''}
                         </div>
 
-                    </List.Description>
-                </List.Content>
-            </List.Item>
+                    </div>
+                </div>
+            </div>
         );
     }
 }

diff --git a/components/User/UserProfile/UserAnalytics/UserPerformancePredictions.js b/components/User/UserProfile/UserAnalytics/UserPerformancePredictions.js
@@ -11,16 +11,50 @@ class UserPerformancePredictions extends React.Component {
         e.preventDefault();
 
 
+
+
+        //IMPLEMENT DECK SELECTION
         let deckId = 2000;
+        let deckTitle = 'testTitle';
+        let deckFirstSlide = '14176-2'
+        let deckTheme = 'default';
 
 
 
 
-        let uid = this.props.UserProfileStore.userid;
 
-        this.context.executeAction(addPerformancePredictionJob, {uid: uid, deckId: deckId});
+        let userId = this.props.UserProfileStore.userid;
+        let started = new Date();
+        let prediction = {
+            userId: userId,
+            deckId: deckId,
+            title: deckTitle,
+            started: started,
+            deckTheme: deckTheme,
+            deckFirstSlide: deckFirstSlide
+        }
+        this.context.executeAction(addPerformancePredictionJob, {prediction: prediction});
     }
 
+    componentDidMount() {
+        this.enableAccordion();
+    }
+
+    componentDidUpdate() {
+        this.refreshAccordion();
+    }
+
+    enableAccordion(status) {
+        let accordionDIV = this.refs.predictionsList;
+        $(accordionDIV).find('.ui.accordion').accordion({
+            exclusive: false
+        });
+    }
+
+    refreshAccordion(status) {
+        let accordionDIV = this.refs.predictionsList;
+        $(accordionDIV).find('.ui.accordion').accordion('refresh');
+    }
     render() {
 
         const items = this.props.UserPerformancePredictionsStore.predictions ?  ((this.props.UserPerformancePredictionsStore.predictions.length > 0) ? this.props.UserPerformancePredictionsStore.predictions.map((prediction, index) => {
@@ -35,14 +69,16 @@ class UserPerformancePredictions extends React.Component {
                   <h3 className="ui left floated header" >Performance predictions</h3>
                   <button className="ui right floated labeled icon button" role="button" tabIndex="0" onClick={this.handleCLickNewPrediction.bind(this)}>
                       <i className="icon chart bar"/>
-                      <p>Create new prediction job</p>
+                      <p>New prediction job</p>
                   </button>
               </div>
 
               {loading}
 
-              <div className="ui vertical segment">
-                  {items}
+              <div className="ui vertical segment" ref="predictionsList">
+                  <div className="ui styled fluid accordion">
+                      {items}
+                  </div>
               </div>
             </div>
         );

diff --git a/services/analytics.js b/services/analytics.js
@@ -59,6 +59,8 @@ export default {
                         // get the active revision of the deck
                         let activeRevision = deck.revisions[deck.revisions.length-1];
                         predictions[i].title = activeRevision.title;
+                        predictions[i].deckFirstSlide = activeRevision.firstSlide;
+                        predictions[i].deckTheme = activeRevision.theme;
                     }
 
                     callback(null, {predictions: predictions});
@@ -78,33 +80,58 @@ export default {
         req.reqId = req.reqId ? req.reqId : -1;
         log.info({Id: req.reqId, Service: __filename.split('/').pop(), Resource: resource, Operation: 'create', Method: req.method});
         let args = params.params? params.params : params;
-        let deckId = args.deckId;
-        let uid = args.uid;
+        let deckId = args.prediction.deckId;
+        let uid = args.prediction.userId;
         if (uid === undefined) {
             uid = 0;
         }
-        if(resource === 'analytics.prediction'){
 
+        if(resource === 'analytics.prediction'){
             rp.post({
                 uri: analyticsServiceUri + '/analytics/webresources/predictionjob/',
                 proxy: '',
                 body:JSON.stringify({
                     user_id: uid,
                     deck_id: deckId
-                })
+                }),
+                timeout: body.timeout
             }).then((res) => {
+                //LIST OF ALL PREDICTION JOBS RECEIVED
+                let predictions = JSON.parse(res);
+                //GET DATA FOR DECKS FROM DECK SERVICE
+                let deckPromises = [];
 
-                console.log(res);
+                // get details for the decks in the collection
+                for(let prediction of predictions){
+                    let deckId = prediction.deckId;
+                    deckPromises.push(
+                        rp.get({
+                            uri: `${Microservices.deck.uri}/deck/${deckId}`,
+                            json: true,
+                            timeout: body.timeout
+                        })
+                    );
+                }
 
-                callback(null, {prediction: JSON.parse(res)});
+                Promise.all(deckPromises).then( (data) => {
+                    let decks = data;
+                    for (let i = 0; i < decks.length; i++) {
+                        let deck = decks[i];
+                        // get the active revision of the deck
+                        let activeRevision = deck.revisions[deck.revisions.length-1];
+                        predictions[i].title = activeRevision.title;
+                        predictions[i].deckFirstSlide = activeRevision.firstSlide;
+                        predictions[i].deckTheme = activeRevision.theme;
+                    }
+                    callback(null, {predictions: predictions});
+                }).catch( (err) => {
+                    console.log(err);
+                    callback(null, {predictions: []});
+                });
             }).catch((err) => {
                 console.log(err);
-                callback(err, {prediction: {}});
+                callback(err, {predictions: []});
             });
         }
     }
-
-    // other methods
-    // create: (req, resource, params, body, config, callback) => {},
-
 };
diff --git a/stores/UserPerformancePredictionsStore.js b/stores/UserPerformancePredictionsStore.js
@@ -17,7 +17,7 @@ class UserPerformancePredictionsStore extends BaseStore {
         this.emitChange();
     }
     addPredictionJob(payload) {
-        this.predictions.push(payload.prediction);
+        this.predictions.unshift(payload.prediction);//add to the beginning
         // this.showAddBox = false;
         this.emitChange();
     }