TMSS-312: Updated schedule service to reduce API call duration. It reduced...

TMSS-312: Updated schedule service to reduce API call duration. It reduced from 10 to 5 secs for scheduling unit blueprint view. Updated to show scheduling set name and styles for view.

SAS/TMSS/frontend/tmss_webapp/src/App.css

@@ -90,6 +90,14 @@ p {
   margin-bottom: 5px;
 }
 
+.p-grid span {
+  margin-bottom: 10px;
+}
+
+.p-chips-token span {
+  margin-bottom: 0px;
+}
+
 .p-field {
   margin-bottom: 0.5rem;
 }

SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js

@@ -64,23 +64,28 @@ class ViewSchedulingUnit extends Component{
         let schedule_type = this.state.scheduleunitType;
         if (schedule_type, schedule_id) {
             this.getScheduleUnit(schedule_type, schedule_id)
-            .then(response =>{
-                let scheduleunit = response.data;
-                this.getScheduleUnitTaskOrBlueprintById(schedule_type, scheduleunit)
-                    .then(tasks =>{
-                   /* tasks.map(task => {
-                        task.duration = moment.utc(task.duration*1000).format('HH:mm:ss'); 
-                        task.relative_start_time = moment.utc(task.relative_start_time*1000).format('HH:mm:ss'); 
-                        task.relative_stop_time = moment.utc(task.relative_stop_time*1000).format('HH:mm:ss'); 
-                        return task;
-                    });*/
+            .then(schedulingUnit =>{
+                if (schedulingUnit) {
+                    this.getScheduleUnitTaskOrBlueprintById(schedule_type, schedulingUnit)
+                        .then(tasks =>{
+                    /* tasks.map(task => {
+                            task.duration = moment.utc(task.duration*1000).format('HH:mm:ss'); 
+                            task.relative_start_time = moment.utc(task.relative_start_time*1000).format('HH:mm:ss'); 
+                            task.relative_stop_time = moment.utc(task.relative_stop_time*1000).format('HH:mm:ss'); 
+                            return task;
+                        });*/
+                        this.setState({
+                            scheduleunit : schedulingUnit,
+                            schedule_unit_task : tasks,
+                            isLoading: false,
+                        });
+                    });
+                }   else {
                     this.setState({
-                        scheduleunit : scheduleunit,
-                        schedule_unit_task : tasks,
                         isLoading: false,
                     });
-				});
-			})
+                }
+            })
 		}
     }
     
@@ -117,7 +122,8 @@ class ViewSchedulingUnit extends Component{
                 </div>
 				{ this.state.isLoading ? <AppLoader/> :this.state.scheduleunit &&
 			    <>
-		            <div className="p-grid">
+		            <div className="main-content">
+                    <div className="p-grid">
                         <label  className="col-lg-2 col-md-2 col-sm-12">Name</label>
                         <span className="p-col-lg-4 col-md-4 col-sm-12">{this.state.scheduleunit.name}</span>
                         <label  className="col-lg-2 col-md-2 col-sm-12">Description</label>
@@ -139,7 +145,7 @@ class ViewSchedulingUnit extends Component{
                         <label className="col-lg-2 col-md-2 col-sm-12">Template ID</label>
                         <span className="col-lg-4 col-md-4 col-sm-12">{this.state.scheduleunit.requirements_template_id}</span>
                         <label  className="col-lg-2 col-md-2 col-sm-12">Scheduling set</label>
-                        <span className="col-lg-4 col-md-4 col-sm-12">{this.state.scheduleunit.scheduling_set_id}</span>
+                        <span className="col-lg-4 col-md-4 col-sm-12">{this.state.scheduleunit.scheduling_set_object.name}</span>
                     </div>
                     <div className="p-grid">
                         <label className="col-lg-2 col-md-2 col-sm-12">Duration (HH:mm:ss)</label>
@@ -147,6 +153,7 @@ class ViewSchedulingUnit extends Component{
                         <label  className="col-lg-2 col-md-2 col-sm-12">Tags</label>
                         <Chips className="p-col-4 chips-readonly" disabled value={this.state.scheduleunit.tags}></Chips>
                     </div>
+                    </div>
                 </>
 			 
                 }

SAS/TMSS/frontend/tmss_webapp/src/services/schedule.service.js

@@ -2,6 +2,8 @@ import axios from 'axios'
 import _ from 'lodash';
 import moment from 'moment';
 
+import TaskService from './task.service';
+
 axios.defaults.headers.common['Authorization'] = 'Basic dGVzdDp0ZXN0';
 
 const ScheduleService = { 
@@ -26,24 +28,31 @@ const ScheduleService = {
         return res;
     },
     getSchedulingUnitBlueprintById: async function (id){
-        let res = [];
-        await axios.get('/api/scheduling_unit_blueprint/'+id)
-        .then(response => {
-            res= response; 
-        }).catch(function(error) {
-            console.error('[schedule.services.getSchedulingUnitBlueprintById]',error);
-        });
-        return res;
+        try {
+            const response = await axios.get('/api/scheduling_unit_blueprint/'+id);
+            let schedulingUnit = response.data;
+            if (schedulingUnit) {
+                const schedulingUnitDraft = await this.getSchedulingUnitDraftById(schedulingUnit.draft_id);
+                schedulingUnit.scheduling_set_id = schedulingUnitDraft.scheduling_set_id;
+                schedulingUnit.scheduling_set = schedulingUnitDraft.scheduling_set;
+                schedulingUnit.scheduling_set_object = schedulingUnitDraft.scheduling_set_object;
+            }
+            return schedulingUnit;
+        }   catch(error) {
+            console.error(error);
+            return null;
+        }
     },
     getSchedulingUnitDraftById: async function (id){
-        let res = [];
-        await axios.get('/api/scheduling_unit_draft/'+id)
-        .then(response => {
-            res= response; 
-        }).catch(function(error) {
+        try {
+            const schedulingUnit = (await axios.get('/api/scheduling_unit_draft/'+id)).data;
+            const schedulingSet = (await axios.get(`/api/scheduling_set/${schedulingUnit.scheduling_set_id}`)).data;
+            schedulingUnit.scheduling_set_object = schedulingSet;
+            return schedulingUnit;
+        }   catch(error){
             console.error('[schedule.services.getSchedulingUnitDraftById]',error);
-        });
-        return res;
+            return null;
+        }
     },
     getTaskBlueprintById: async function(id){
         let res = [];
@@ -79,11 +88,8 @@ const ScheduleService = {
         let taskblueprints = [];
         // Common keys for Task and Blueprint
         let commonkeys = ['id','created_at','description','name','tags','updated_at','url','do_cancel','relative_start_time','relative_stop_time','start_time','stop_time','duration'];
-        await this.getTaskBlueprints().then( blueprints =>{
-            taskblueprints = blueprints.data.results;
-        })
         await this.getTasksDraftBySchedulingUnitId(id)
-        .then(response =>{
+        .then(async(response) =>{
             for(const task of response.data.results){
                 let scheduletask = [];
                 scheduletask['tasktype'] = 'Draft';
@@ -98,11 +104,8 @@ const ScheduleService = {
                 scheduletask.relative_start_time = moment.utc(scheduletask.relative_start_time*1000).format('HH:mm:ss'); 
                 scheduletask.relative_stop_time = moment.utc(scheduletask.relative_stop_time*1000).format('HH:mm:ss'); 
                //Fetch blueprint details for Task Draft
-                let filteredblueprints =  _.filter(taskblueprints, function(o) {
-                    if (o.draft_id === task['id']) return o;
-                });
-
-                for(const blueprint of filteredblueprints){
+                const draftBlueprints = await TaskService.getDraftsTaskBlueprints(task.id);
+                for(const blueprint of draftBlueprints){
                     let taskblueprint = [];
                     taskblueprint['tasktype'] = 'Blueprint';
                     taskblueprint['actionpath'] = '/task/view/blueprint/'+blueprint['id'];

SAS/TMSS/frontend/tmss_webapp/src/services/task.service.js

@@ -49,7 +49,8 @@ const TaskService = {
     },
     getSchedulingUnit: async function(type, id) {
       try {
-        const response = await axios.get('/api/scheduling_unit_draft/' + id);
+        const url = `/api/scheduling_unit_${type}/${id}`;
+        const response = await axios.get(url);
         return response.data;
       } catch (error) {
         console.error(error);