ui/static/timeline-view.js

0001 /*
0002  * Licensed to the Apache Software Foundation (ASF) under one or more
0003  * contributor license agreements.  See the NOTICE file distributed with
0004  * this work for additional information regarding copyright ownership.
0005  * The ASF licenses this file to You under the Apache License, Version 2.0
0006  * (the "License"); you may not use this file except in compliance with
0007  * the License.  You may obtain a copy of the License at
0008  *
0009  *    http://www.apache.org/licenses/LICENSE-2.0
0010  *
0011  * Unless required by applicable law or agreed to in writing, software
0012  * distributed under the License is distributed on an "AS IS" BASIS,
0013  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
0014  * See the License for the specific language governing permissions and
0015  * limitations under the License.
0016  */
0017
0018 function drawApplicationTimeline(groupArray, eventObjArray, startTime, offset) {
0019   var groups = new vis.DataSet(groupArray);
0020   var items = new vis.DataSet(eventObjArray);
0021   var container = $("#application-timeline")[0];
0022   var options = {
0023     groupOrder: function(a, b) {
0024       return a.value - b.value
0025     },
0026     editable: false,
0027     align: 'left',
0028     showCurrentTime: false,
0029     start: startTime,
0030     zoomable: false,
0031     locale: "en",
0032     moment: function (date) {
0033       return vis.moment(date).utcOffset(offset);
0034     }
0035   };
0036
0037   var applicationTimeline = new vis.Timeline(container);
0038   applicationTimeline.setOptions(options);
0039   applicationTimeline.setGroups(groups);
0040   applicationTimeline.setItems(items);
0041
0042   setupZoomable("#application-timeline-zoom-lock", applicationTimeline);
0043   setupExecutorEventAction();
0044
0045   function setupJobEventAction() {
0046     $(".vis-item.vis-range.job.application-timeline-object").each(function() {
0047       var getSelectorForJobEntry = function(baseElem) {
0048         var jobIdText = $($(baseElem).find(".application-timeline-content")[0]).text();
0049         var jobId = jobIdText.match("\\(Job (\\d+)\\)$")[1];
0050        return "#job-" + jobId;
0051       };
0052
0053       $(this).click(function() {
0054         var jobPagePath = $(getSelectorForJobEntry(this)).find("a.name-link").attr("href");
0055           window.location.href = jobPagePath
0056       });
0057
0058       $(this).hover(
0059         function() {
0060           $(getSelectorForJobEntry(this)).addClass("corresponding-item-hover");
0061           $($(this).find("div.application-timeline-content")[0]).tooltip("show");
0062         },
0063         function() {
0064           $(getSelectorForJobEntry(this)).removeClass("corresponding-item-hover");
0065           $($(this).find("div.application-timeline-content")[0]).tooltip("hide");
0066         }
0067       );
0068     });
0069   }
0070
0071   setupJobEventAction();
0072
0073   $("span.expand-application-timeline").click(function() {
0074     var status = window.localStorage.getItem("expand-application-timeline") == "true";
0075     status = !status;
0076
0077     $("#application-timeline").toggleClass('collapsed');
0078
0079     var visibilityState = status ? "" : "none";
0080     $("#application-timeline").css("display", visibilityState);
0081
0082     // Switch the class of the arrow from open to closed.
0083     $(this).find('.expand-application-timeline-arrow').toggleClass('arrow-open');
0084     $(this).find('.expand-application-timeline-arrow').toggleClass('arrow-closed');
0085
0086     window.localStorage.setItem("expand-application-timeline", "" + status);
0087   });
0088 }
0089
0090 $(function () {
0091   if ($("span.expand-application-timeline").length &&
0092       window.localStorage.getItem("expand-application-timeline") == "true") {
0093     // Set it to false so that the click function can revert it
0094     window.localStorage.setItem("expand-application-timeline", "false");
0095     $("span.expand-application-timeline").trigger('click');
0096   } else {
0097     $("#application-timeline").css("display", "none");
0098   }
0099 });
0100
0101 function drawJobTimeline(groupArray, eventObjArray, startTime, offset) {
0102   var groups = new vis.DataSet(groupArray);
0103   var items = new vis.DataSet(eventObjArray);
0104   var container = $('#job-timeline')[0];
0105   var options = {
0106     groupOrder: function(a, b) {
0107       return a.value - b.value;
0108     },
0109     editable: false,
0110     align: 'left',
0111     showCurrentTime: false,
0112     start: startTime,
0113     zoomable: false,
0114     locale: "en",
0115     moment: function (date) {
0116       return vis.moment(date).utcOffset(offset);
0117     }
0118   };
0119
0120   var jobTimeline = new vis.Timeline(container);
0121   jobTimeline.setOptions(options);
0122   jobTimeline.setGroups(groups);
0123   jobTimeline.setItems(items);
0124
0125   setupZoomable("#job-timeline-zoom-lock", jobTimeline);
0126   setupExecutorEventAction();
0127
0128   function setupStageEventAction() {
0129     $(".vis-item.vis-range.stage.job-timeline-object").each(function() {
0130       var getSelectorForStageEntry = function(baseElem) {
0131         var stageIdText = $($(baseElem).find(".job-timeline-content")[0]).text();
0132         var stageIdAndAttempt = stageIdText.match("\\(Stage (\\d+\\.\\d+)\\)$")[1].split(".");
0133         return "#stage-" + stageIdAndAttempt[0] + "-" + stageIdAndAttempt[1];
0134       };
0135
0136       $(this).click(function() {
0137         var stagePagePath = $(getSelectorForStageEntry(this)).find("a.name-link").attr("href")
0138         window.location.href = stagePagePath
0139       });
0140
0141       $(this).hover(
0142         function() {
0143           $(getSelectorForStageEntry(this)).addClass("corresponding-item-hover");
0144           $($(this).find("div.job-timeline-content")[0]).tooltip("show");
0145         },
0146         function() {
0147           $(getSelectorForStageEntry(this)).removeClass("corresponding-item-hover");
0148           $($(this).find("div.job-timeline-content")[0]).tooltip("hide");
0149         }
0150       );
0151     });
0152   }
0153
0154   setupStageEventAction();
0155
0156   $("span.expand-job-timeline").click(function() {
0157     var status = window.localStorage.getItem("expand-job-timeline") == "true";
0158     status = !status;
0159
0160     $("#job-timeline").toggleClass('collapsed');
0161
0162     var visibilityState = status ? "" : "none";
0163     $("#job-timeline").css("display", visibilityState);
0164
0165     // Switch the class of the arrow from open to closed.
0166     $(this).find('.expand-job-timeline-arrow').toggleClass('arrow-open');
0167     $(this).find('.expand-job-timeline-arrow').toggleClass('arrow-closed');
0168
0169     window.localStorage.setItem("expand-job-timeline", "" + status);
0170   });
0171 }
0172
0173 $(function () {
0174   if ($("span.expand-job-timeline").length &&
0175       window.localStorage.getItem("expand-job-timeline") == "true") {
0176     // Set it to false so that the click function can revert it
0177     window.localStorage.setItem("expand-job-timeline", "false");
0178     $("span.expand-job-timeline").trigger('click');
0179   } else {
0180     $("#job-timeline").css("display", "none");
0181   }
0182 });
0183
0184 function drawTaskAssignmentTimeline(groupArray, eventObjArray, minLaunchTime, maxFinishTime, offset) {
0185   var groups = new vis.DataSet(groupArray);
0186   var items = new vis.DataSet(eventObjArray);
0187   var container = $("#task-assignment-timeline")[0];
0188   var options = {
0189     groupOrder: function(a, b) {
0190       return a.value - b.value
0191     },
0192     editable: false,
0193     align: 'left',
0194     selectable: false,
0195     showCurrentTime: false,
0196     start: minLaunchTime,
0197     end: maxFinishTime,
0198     zoomable: false,
0199     locale: "en",
0200     moment: function (date) {
0201       return vis.moment(date).utcOffset(offset);
0202     }
0203   };
0204
0205   var taskTimeline = new vis.Timeline(container);
0206   taskTimeline.setOptions(options);
0207   taskTimeline.setGroups(groups);
0208   taskTimeline.setItems(items);
0209
0210   // If a user zooms while a tooltip is displayed, the user may zoom such that the cursor is no
0211   // longer over the task that the tooltip corresponds to. So, when a user zooms, we should hide
0212   // any currently displayed tooltips.
0213   var currentDisplayedTooltip = null;
0214   $("#task-assignment-timeline").on({
0215     "mouseenter": function() {
0216       currentDisplayedTooltip = this;
0217     },
0218     "mouseleave": function() {
0219       currentDisplayedTooltip = null;
0220     }
0221   }, ".task-assignment-timeline-content");
0222   taskTimeline.on("rangechange", function(prop) {
0223     if (currentDisplayedTooltip !== null) {
0224       $(currentDisplayedTooltip).tooltip("hide");
0225     }
0226   });
0227
0228   setupZoomable("#task-assignment-timeline-zoom-lock", taskTimeline);
0229
0230   $("span.expand-task-assignment-timeline").click(function() {
0231     var status = window.localStorage.getItem("expand-task-assignment-timeline") == "true";
0232     status = !status;
0233
0234     $("#task-assignment-timeline").toggleClass("collapsed");
0235
0236     var visibilityState = status ? "" : "none";
0237     $("#task-assignment-timeline").css("display", visibilityState);
0238
0239      // Switch the class of the arrow from open to closed.
0240     $(this).find(".expand-task-assignment-timeline-arrow").toggleClass("arrow-open");
0241     $(this).find(".expand-task-assignment-timeline-arrow").toggleClass("arrow-closed");
0242
0243     window.localStorage.setItem("expand-task-assignment-timeline", "" + status);
0244   });
0245 }
0246
0247 $(function () {
0248   if ($("span.expand-task-assignment-timeline").length &&
0249       window.localStorage.getItem("expand-task-assignment-timeline") == "true") {
0250     // Set it to false so that the click function can revert it
0251     window.localStorage.setItem("expand-task-assignment-timeline", "false");
0252     $("span.expand-task-assignment-timeline").trigger('click');
0253   } else {
0254     $("#task-assignment-timeline").css("display", "none");
0255   }
0256 });
0257
0258 function setupExecutorEventAction() {
0259   $(".vis-item.vis-box.executor").each(function () {
0260     $(this).hover(
0261       function() {
0262         $($(this).find(".executor-event-content")[0]).tooltip("show");
0263       },
0264       function() {
0265         $($(this).find(".executor-event-content")[0]).tooltip("hide");
0266       }
0267     );
0268   });
0269 }
0270
0271 function setupZoomable(id, timeline) {
0272   $(id + ' > input[type="checkbox"]').click(function() {
0273     if (this.checked) {
0274       timeline.setOptions({zoomable: true});
0275     } else {
0276       timeline.setOptions({zoomable: false});
0277     }
0278   });
0279
0280   $(id + " > span").click(function() {
0281     $(this).parent().find('input:checkbox').trigger('click');
0282   });
0283 }