| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| */ |
| /** |
| * This should render the main content in the Application Explorer page. |
| * Components on this page should be rendered as sub-views. |
| * @type {*} |
| */ |
| define([ |
| "underscore", "jquery", "backbone", "view/viewutils", |
| "./application-add-wizard", "model/application", "model/entity-summary", "model/app-tree", "./application-tree", "./entity-details", |
| "text!tpl/apps/details.html", "text!tpl/apps/entity-not-found.html", "text!tpl/apps/page.html" |
| ], function (_, $, Backbone, ViewUtils, |
| AppAddWizard, Application, EntitySummary, AppTree, ApplicationTreeView, EntityDetailsView, |
| EntityDetailsEmptyHtml, EntityNotFoundHtml, PageHtml) { |
| |
| var ApplicationExplorerView = Backbone.View.extend({ |
| tagName:"div", |
| className:"container container-fluid", |
| id:'application-explorer', |
| template:_.template(PageHtml), |
| notFoundTemplate: _.template(EntityNotFoundHtml), |
| events:{ |
| 'click .application-tree-refresh': 'refreshApplicationsInPlace', |
| 'click #add-new-application':'createApplication', |
| 'click .delete':'deleteApplication' |
| }, |
| initialize: function () { |
| this.$el.html(this.template({})) |
| $(".nav1").removeClass("active"); |
| $(".nav1_apps").addClass("active"); |
| |
| this.treeView = new ApplicationTreeView({ |
| collection:this.collection, |
| appRouter:this.options.appRouter |
| }) |
| if (this.options.initialTrail) this.show(this.options.initialTrail, true); |
| this.treeView.on('entitySelected', function(e) { |
| this.displayEntityId(e.id, e.get('applicationId'), false); |
| }, this); |
| // don't draw these -- wait for the "show" command |
| this.$('div#app-tree').html(this.treeView.renderFull().el); |
| this.$('div#details').html(EntityDetailsEmptyHtml); |
| |
| ViewUtils.fetchRepeatedlyWithDelay(this, this.collection) |
| }, |
| refreshApplicationsInPlace: function() { |
| // fetch without reset sets of change events, which now get handled correctly |
| // (not a full visual recompute, which reset does - both in application-tree.js) |
| this.collection.fetch(); |
| }, |
| beforeClose: function () { |
| this.collection.off("reset", this.render); |
| this.treeView.close(); |
| if (this.detailsView) |
| this.detailsView.close(); |
| }, |
| show: function(entityId, isPre) { |
| var tab = ""; |
| var tabDetails = ""; |
| if (entityId) { |
| if (entityId[0]=='/') entityId = entityId.substring(1); |
| var slash = entityId.indexOf('/'); |
| if (slash>0) { |
| tab = entityId.substring(slash+1) |
| entityId = entityId.substring(0, slash); |
| } |
| } |
| if (tab) { |
| var slash = tab.indexOf('/'); |
| if (slash>0) { |
| tabDetails = tab.substring(slash+1) |
| tab = tab.substring(0, slash); |
| } |
| this.preselectTab(tab, tabDetails); |
| } |
| if (!this.treeView.selectEntity(entityId)) { |
| // needs a load, but only allowed if not pre-loading |
| if (isPre) { /* don't allow loading if this is a "pre-show" */ } |
| else { this.displayEntityId(entityId); } |
| } |
| }, |
| showDefaultSelection: function() { |
| if (!this.treeView.selectedEntityId && !this.treeView.requestedEntityId) { |
| var firstApp = _.first(this.collection.getApplications()); |
| if (firstApp) this.treeView.selectEntity(firstApp); |
| } |
| }, |
| createApplication:function () { |
| var that = this; |
| if (this._modal) { |
| this._modal.close() |
| } |
| var wizard = new AppAddWizard({ |
| appRouter:that.options.appRouter, |
| callback:function() { that.refreshApplicationsInPlace() } |
| }) |
| this._modal = wizard |
| this.$(".add-app #modal-container").html(wizard.render().el) |
| this.$(".add-app #modal-container .modal") |
| .on("hidden",function () { |
| wizard.close() |
| }).modal('show') |
| }, |
| deleteApplication:function (event) { |
| // call Backbone destroy() which does HTTP DELETE on the model |
| this.collection.get(event.currentTarget['id']).destroy({wait:true}) |
| }, |
| /** |
| * Causes the tab with the given name to be selected automatically when |
| * the view is next rendered. |
| */ |
| preselectTab: function(tab, tabDetails) { |
| this.currentTab = tab; |
| this.currentTabDetails = tabDetails; |
| }, |
| showDetails: function(app, entitySummary) { |
| var that = this; |
| ViewUtils.cancelFadeOnceLoaded($("div#details")); |
| |
| if (this.detailsView) { |
| // if view open, take that tab, but clear the details if the id is different |
| if (this.detailsView.model && this.detailsView.model.id && this.detailsView.model.id != entitySummary.id) |
| this.detailsView.options.preselectTabDetails = null; |
| this.preselectTab( |
| //this.detailsView.$el.find(".tab-pane.active").attr("id") |
| this.detailsView.options.preselectTab, |
| this.detailsView.options.preselectTabDetails |
| ); |
| this.detailsView.close(); |
| } |
| if (!this.currentTab) { |
| // else if nothing preselect, use summary |
| this.preselectTab("summary"); |
| } |
| |
| this.detailsView = new EntityDetailsView({ |
| model: entitySummary, |
| application: app, |
| appRouter: this.options.appRouter, |
| preselectTab: this.currentTab, |
| preselectTabDetails: this.currentTabDetails, |
| }); |
| |
| this.detailsView.on("entity.expunged", function() { |
| that.preselectTab("summary"); |
| var id = that.selectedEntityId; |
| var model = that.collection.get(id); |
| if (model && model.get("parentId")) { |
| that.displayEntityId(model.get("parentId")); |
| } else if (that.collection) { |
| that.displayEntityId(that.collection.first().id); |
| } else if (id) { |
| that.displayEntityNotFound(id); |
| } else { |
| that.displayEntityNotFound("?"); |
| } |
| that.collection.fetch(); |
| }); |
| this.detailsView.render( $("div#details") ); |
| // force the routes to be updated, and clear activities detail possibly (the tab is already shown) |
| // (this causes activities view to lose selected sub-tasks, but that's okay) |
| this.detailsView.openTab(this.currentTab + (this.currentTabDetails ? '/'+this.currentTabDetails : '')); |
| }, |
| displayEntityId: function (id, appName, afterLoad) { |
| var that = this; |
| var entityLoadFailed = function() { |
| return that.displayEntityNotFound(id); |
| }; |
| if (appName === undefined) { |
| var $treebox = that.treeView.getTreebox(id); |
| appName = $treebox.children(".entity_tree_node_wrapper").children(".entity_tree_node").data("app-id"); |
| } |
| if (appName === undefined) { |
| if (!afterLoad) { |
| // try a reload if given an ID we don't recognise |
| this.collection.includeEntities([id]); |
| this.collection.fetch({ |
| success: function() { _.defer(function() { that.displayEntityId(id, appName, true); }); }, |
| error: function() { _.defer(function() { that.displayEntityId(id, appName, true); }); } |
| }); |
| ViewUtils.fadeToIndicateInitialLoad($("div#details")) |
| return; |
| } else { |
| // no such app |
| entityLoadFailed(); |
| return; |
| } |
| } |
| |
| var app = new Application.Model(); |
| var entitySummary = new EntitySummary.Model; |
| |
| app.url = "/v1/applications/" + appName; |
| entitySummary.url = "/v1/applications/" + appName + "/entities/" + id; |
| if (id !== this.treeView.selectedEntityId) |
| this.treeView.selectEntity(id); |
| |
| // in case the server response time is low, fade out while it refreshes |
| // (since we can't show updated details until we've retrieved app + entity details) |
| ViewUtils.fadeToIndicateInitialLoad($("div#details")); |
| |
| $.when(app.fetch(), entitySummary.fetch()) |
| .done(function() { |
| that.showDetails(app, entitySummary); |
| }) |
| .fail(entityLoadFailed); |
| }, |
| displayEntityNotFound: function(id) { |
| $("div#details").html(this.notFoundTemplate({"id": id})); |
| ViewUtils.cancelFadeOnceLoaded($("div#details")) |
| }, |
| }) |
| |
| return ApplicationExplorerView |
| }) |
