allow tabs to be specified in URL, and remember tabs as user picks them in history
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/1ca7bc92 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/1ca7bc92 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/1ca7bc92 Branch: refs/heads/0.5.0 Commit: 1ca7bc92969cc0b7061801696704fb11de33395e Parents: 119ca3a Author: Alex Heneveld <[email protected]> Authored: Sun Dec 2 13:28:28 2012 -0800 Committer: Alex Heneveld <[email protected]> Committed: Sun Dec 2 13:38:29 2012 -0800 ---------------------------------------------------------------------- usage/jsgui/src/main/webapp/assets/js/router.js | 4 +- .../assets/js/view/application-explorer.js | 7 ++- .../webapp/assets/js/view/application-tree.js | 46 +++++++++++++------- .../webapp/assets/js/view/entity-activities.js | 6 ++- .../webapp/assets/js/view/entity-details.js | 10 +++++ 5 files changed, 54 insertions(+), 19 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/1ca7bc92/usage/jsgui/src/main/webapp/assets/js/router.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/router.js b/usage/jsgui/src/main/webapp/assets/js/router.js index 851f483..ff14e28 100644 --- a/usage/jsgui/src/main/webapp/assets/js/router.js +++ b/usage/jsgui/src/main/webapp/assets/js/router.js @@ -33,6 +33,7 @@ define([ var Router = Backbone.Router.extend({ routes:{ 'v1/home':'homePage', + 'v1/applications/:app/entities/:trail/:tab':'applicationsPage', 'v1/applications/:app/entities/*trail':'applicationsPage', 'v1/applications/*trail':'applicationsPage', 'v1/applications':'applicationsPage', @@ -72,7 +73,7 @@ define([ that.showView("#application-content", homeView); }}) }, - applicationsPage:function (app, trail) { + applicationsPage:function (app, trail, tab) { if (trail === undefined) trail = app var that = this this.appTree.fetch({success:function () { @@ -81,6 +82,7 @@ define([ appRouter:that }) that.showView("#application-content", appExplorer) + if (tab !== undefined) appExplorer.preselectTab(tab) if (trail !== undefined) appExplorer.show(trail) }}) }, http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/1ca7bc92/usage/jsgui/src/main/webapp/assets/js/view/application-explorer.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/application-explorer.js b/usage/jsgui/src/main/webapp/assets/js/view/application-explorer.js index 3cf2009..b731fb5 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/application-explorer.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/application-explorer.js @@ -43,8 +43,11 @@ define([ this.collection.fetch() return false }, - show: function(trail) { - this.treeView.displayEntityId(trail) + show: function(entityId) { + this.treeView.displayEntityId(entityId) + }, + preselectTab: function(tab) { + this.treeView.preselectTab(tab) }, createApplication:function () { http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/1ca7bc92/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js b/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js index 5bde0df..6a35ed2 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js @@ -94,8 +94,16 @@ define([ return $template }, displayEntity:function (eventName) { - window.history.pushState($(eventName.currentTarget).attr("id"), "", $('a', $(eventName.currentTarget)).attr('href')); - this.displayEntityId($(eventName.currentTarget).attr("id"), $(eventName.currentTarget).data("parent-app")); + var entityId = $(eventName.currentTarget).attr("id"), + stateId = entityId + var href = $('a', $(eventName.currentTarget)).attr('href'); + var tab = $(this.detailsView.el).find(".tab-pane.active").attr("id") + if (tab) { + href = href+"/"+tab + stateId = entityId+"/"+tab + } + window.history.pushState(stateId, "", href) + this.displayEntityId(entityId, $(eventName.currentTarget).data("parent-app")); }, displayEntityId:function (id, appName) { var entitySummary = new EntitySummary.Model, @@ -113,21 +121,29 @@ define([ app.fetch({async:false}) entitySummary.url = "/v1/applications/" + appName + "/entities/" + id - entitySummary.fetch({success:function () { - var whichTab="summary"; + entitySummary.fetch({success:function () { that.showDetails(that, app, entitySummary) }}) + return + }, + preselectTab: function(tab) { + this.currentTab = tab + // not applied immediately, but on next rendering + }, + showDetails: function(that, app, entitySummary) { + var whichTab = this.currentTab + if (whichTab===undefined) { + whichTab="summary"; if (that.detailsView) { - whichTab = $(that.detailsView.el).find(".tab-pane.active").attr("id"); - that.detailsView.close() + whichTab = $(that.detailsView.el).find(".tab-pane.active").attr("id"); + that.detailsView.close() } - that.detailsView = new EntityDetailsView({ - model:entitySummary, - application:app - }) - $("div#details").html(that.detailsView.render().el) - // preserve the tab selected before - $("div#details").find("a[href=\"#"+whichTab+"\"]").tab('show') - }}) - return false; + } + that.detailsView = new EntityDetailsView({ + model:entitySummary, + application:app + }) + $("div#details").html(that.detailsView.render().el) + // preserve the tab selected before + $("div#details").find("a[href=\"#"+whichTab+"\"]").tab('show') }, highlightEntity:function (id) { if (id) this.selectedEntityId = id http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/1ca7bc92/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js b/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js index 9c20ec6..09d9f46 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js @@ -43,7 +43,7 @@ define([ entityDisplayName:task.get("entityDisplayName") })) if (that.activeTask) { - $("#activities-table tr[id="+that.activeTask+"]").addClass("selected") + $("#activities-table tr[id='"+that.activeTask+"']").addClass("selected") that.showFullActivity(that.activeTask) } }) @@ -66,6 +66,10 @@ define([ }, showFullActivity:function (id) { var task = this.collection.get(id) + if (task==null) { + this.activeTask = null + this.$("#activity-details").hide(100) + } var html = _.template(ActivityDetailsHtml, { displayName:this.model.get("displayName"), description:FormatJSON(task.toJSON()) http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/1ca7bc92/usage/jsgui/src/main/webapp/assets/js/view/entity-details.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/entity-details.js b/usage/jsgui/src/main/webapp/assets/js/view/entity-details.js index 9918eb3..8f3313c 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/entity-details.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/entity-details.js @@ -10,6 +10,9 @@ define([ var EntityDetailsView = Backbone.View.extend({ template:_.template(DetailsHtml), + events:{ + 'click .entity-tabs a':'tabSelected' + }, initialize:function () { this.$el.html(this.template({})) this.summaryView = new SummaryView({ @@ -55,6 +58,13 @@ define([ this.policiesView.render() this.activitiesView.render() return this; + }, + tabSelected: function(event) { + var tabName = $(event.currentTarget).attr("href").slice(1) + var entityId = $(".applications span.active").attr("id") + var entityHref = $(".applications span.active a").attr("href") + window.history.pushState(entityId+"/"+tabName, "", + entityHref+"/"+tabName); } }); return EntityDetailsView;
