aboutsummaryrefslogtreecommitdiffstats
path: root/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter
diff options
context:
space:
mode:
Diffstat (limited to 'dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter')
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-list-controller.js137
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-popup-controller.js103
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-service.js86
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-client-list-popup-controller.js19
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-list-controller.js261
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-popup-controller.js64
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-service.js86
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_client_list.html139
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_client_popup_template.html74
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_client_list_popup_template.html53
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_list.html156
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_popup_template_edit.html64
-rw-r--r--dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_popup_template_show.html80
13 files changed, 1322 insertions, 0 deletions
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-list-controller.js b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-list-controller.js
new file mode 100644
index 0000000..7b384c6
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-list-controller.js
@@ -0,0 +1,137 @@
+appDS2.controller('mrClientListCtrl', function($scope, $log, $modal, modalService, MRClientService){
+
+ // populates the table of Message Router clients
+ 'use strict';
+
+ // this object holds all app data and functions
+ $scope.dbcapp = {};
+ // models for controls on screen
+ $scope.dbcapp.tableData=[];
+ $scope.dbcapp.currentPageNum=1;
+ $scope.dbcapp.totalPages=1;
+ $scope.dbcapp.viewPerPage = 100;
+ $scope.dbcapp.viewPerPageOptions = [
+ { index : 0, value : 50 },
+ { index : 1, value : 100 },
+ { index : 2, value : 500 },
+ { index : 3, value : 1000 },
+ { index : 4, value : 2500 }
+ ];
+ // other
+ $scope.dbcapp.errMsg=null;
+ $scope.dbcapp.isDataLoading=true;
+ $scope.dbcapp.isRequestFailed=false;
+
+ /**
+ * Answers an array of the specified size - makes Angular iteration easy.
+ */
+ $scope.dbcapp.buildArraySizeN = function(num) {
+ // $log.debug("buildArraySizeN: invoked with " + num);
+ return new Array(num);
+ }
+
+ /**
+ * Loads the table of message router clients.
+ */
+ $scope.dbcapp.loadTable = function() {
+ $scope.dbcapp.isDataLoading = true;
+ MRClientService.getClientsByPage($scope.dbcapp.currentPageNum,$scope.dbcapp.viewPerPage)
+ .then(function(jsonObj){
+ if (jsonObj.error) {
+ $scope.dbcapp.isRequestFailed = true;
+ $scope.dbcapp.errMsg = jsonObj.error;
+ $scope.dbcapp.tableData = [];
+ }
+ else {
+ $scope.dbcapp.isRequestFailed = false;
+ $scope.dbcapp.errMsg = null;
+ $scope.dbcapp.profileName = jsonObj.profileName;
+ $scope.dbcapp.dmaapName = jsonObj.dmaapName;
+ $scope.dbcapp.dcaeLocations = jsonObj.dcaeLocations;
+ $scope.dbcapp.totalPages = jsonObj.totalPages;
+ $scope.dbcapp.tableData = jsonObj.data;
+ }
+ $scope.dbcapp.isDataLoading=false;
+ },function(error){
+ $log.error("mrClientListCtrl.loadTable failed: " + error);
+ $scope.dbcapp.isRequestFailed = true;
+ $scope.dbcapp.errMsg = error;
+ $scope.dbcapp.tableData = [];
+ $scope.dbcapp.isDataLoading = false;
+ });
+ };
+
+ /**
+ * Shows a modal pop-up to edit a client.
+ * Passes data in via an object named "message".
+ * Always updates the table, even on failure, to discard
+ * user-entered changes that were not persisted.
+ */
+ $scope.dbcapp.editClientModalPopup = function(client) {
+ $scope.dbcapp.editClient = client;
+ var modalInstance = $modal.open({
+ templateUrl : 'edit_client_popup.html',
+ controller : 'clientPopupCtrl',
+ windowClass: 'modal-docked',
+ sizeClass: 'modal-medium',
+ resolve : {
+ message : function() {
+ var dataForPopup = {
+ client : $scope.dbcapp.editClient,
+ clientList : $scope.dbcapp.tableData,
+ dcaeList : $scope.dbcapp.dcaeLocations
+ };
+ return dataForPopup;
+ }
+ }
+ });
+ modalInstance.result.then(function(response) {
+ if (response == null) {
+ // $log.debug('editClientModalPopup: user closed dialog');
+ }
+ else {
+ // $log.debug('editClientModalPopup: response: ' + JSON.stringify(response));
+ if (response.error != null)
+ alert('Failed to edit client:\n' + response.error);
+ // refresh in all cases
+ $scope.dbcapp.loadTable();
+ }
+ });
+ };
+
+ /**
+ * Shows a modal pop-up to confirm deletion of a client.
+ * On successful completion, updates the table.
+ */
+ $scope.dbcapp.deleteClientModalPopup = function(client) {
+ modalService.popupConfirmWin("Confirm",
+ "Delete client " + client.mrClientId,
+ function() {
+ // $log.debug('deleteClientModalPopup: ' + topic.fqtn);
+ MRClientService.deleteClient(client.mrClientId)
+ .then(
+ function(response) {
+ // $log.debug('deleteClientModalPopup: response: ' + JSON.stringify(response));
+ if (response.error != null) {
+ alert('Failed to delete client ' + client.mrClientId
+ + '\n' + response.error);
+ }
+ else {
+ // success, get the updated list.
+ $scope.dbcapp.loadTable()
+ }
+ },
+ function(error) {
+ alert('Request failed to delete client ' + client.mrClientId + '\n'
+ + JSON.stringify(error));
+ }
+ );
+ })
+ };
+
+ // Populate the table on load. Note that the b2b selector code
+ // sets the page-number value, and the change event calls load table.
+ // Do not call this here to avoid double load:
+ // $scope.dbcapp.loadTable();
+
+});
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-popup-controller.js b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-popup-controller.js
new file mode 100644
index 0000000..6d0fe00
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-popup-controller.js
@@ -0,0 +1,103 @@
+appDS2.controller('clientPopupCtrl', function($scope, $log, $modalInstance, modalService, message, MRClientService) {
+
+ 'use strict';
+
+ // this object holds all app data and functions
+ $scope.dbcapp = {};
+
+ // Set the label variable for the template
+ if (message.client == null || message.client.mrClientId == null)
+ $scope.dbcapp.label = 'Add Client';
+ else
+ $scope.dbcapp.label = 'Edit Client';
+
+ // client object brings fqtn
+ $scope.dbcapp.editClient = message.client;
+ $scope.dbcapp.dcaeList = message.dcaeList;
+
+ // Models for checkboxes
+ var PUB = 0;
+ var SUB = 1;
+ var VIEW = 2;
+ $scope.dbcapp.clientactionbox = [];
+ $scope.dbcapp.clientactionbox[PUB] = false;
+ $scope.dbcapp.clientactionbox[SUB] = false;
+ $scope.dbcapp.clientactionbox[VIEW] = false;
+
+ // Morph the list of action strings into checks in boxes
+ for (var aidx in $scope.dbcapp.editClient.action) {
+ var action = $scope.dbcapp.editClient.action[aidx];
+ // $log.debug('clientPopupCtrl: action idx ' + aidx + ', action ' + action);
+ if ("pub" == action)
+ $scope.dbcapp.clientactionbox[PUB] = true;
+ else if ("sub" == action)
+ $scope.dbcapp.clientactionbox[SUB] = true;
+ else if ("view" == action)
+ $scope.dbcapp.clientactionbox[VIEW] = true;
+ }
+
+ /**
+ * Validates content of user-editable fields.
+ * Returns null if all is well,
+ * a descriptive error message otherwise.
+ */
+ $scope.dbcapp.validateClient = function(client) {
+ if (client == null)
+ return "No data found.\nPlease enter some values.";
+ if (client.dcaeLocationName == null)
+ return "DCAE Location is required.\nPlease select a value.";
+ if (client.clientRole == null || client.clientRole.trim() == '')
+ return "Client role is required.\nPlease enter a value.";
+ if (client.action.length == 0)
+ return "An action is required.\nPlease select one or more actions.";
+ return null;
+ }
+
+ $scope.dbcapp.saveClient = function(client) {
+ // Store list of action strings (if any)
+ var action_list = [];
+ for (var aidx in $scope.dbcapp.clientactionbox) {
+ if (aidx == PUB && $scope.dbcapp.clientactionbox[aidx])
+ action_list.push('pub');
+ else if (aidx == SUB && $scope.dbcapp.clientactionbox[aidx])
+ action_list.push('sub');
+ else if (aidx == VIEW && $scope.dbcapp.clientactionbox[aidx])
+ action_list.push('view');
+ }
+ $scope.dbcapp.editClient.action = action_list;
+
+ var validateMsg = $scope.dbcapp.validateClient(client);
+ if (validateMsg != null) {
+ alert('Invalid Content:\n' + validateMsg);
+ return;
+ }
+
+ if (client.mrClientId == null) {
+ // No id, so create a new one
+ MRClientService.addClient(client)
+ .then(function(response) {
+ $modalInstance.close(response);
+ },
+ function (error) {
+ $log.error('clientPopupCtrl.saveClient: error while adding: ' + error);
+ }
+ );
+ }
+ else {
+ // Has ID, so update an existing one
+ MRClientService.updateClient(client)
+ .then(function(response) {
+ $modalInstance.close(response);
+ },
+ function (error) {
+ $log.error('clientPopupCtrl.saveClient: error while updating: ' + error);
+ }
+ );
+ }
+
+ }; // saveClient
+
+ $scope.dbcapp.close = function() {
+ $modalInstance.close();
+ };
+});
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-service.js b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-service.js
new file mode 100644
index 0000000..bacaa9f
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-client-service.js
@@ -0,0 +1,86 @@
+appDS2.factory('MRClientService', function ($http, $q, $log) {
+ return {
+ /**
+ * Gets one page of message router client objects.
+ * @param {Number} pageNum - page number; e.g., 1
+ * @param {Number} viewPerPage - number of items per page; e.g., 25
+ * @return {JSON} Response object from remote side
+ */
+ getClientsByPage: function(pageNum,viewPerPage) {
+ // cache control for IE
+ var cc = "&cc=" + new Date().getTime().toString();
+ return $http({
+ method: 'GET',
+ url: 'mr_client?pageNum=' + pageNum + '&viewPerPage=' + viewPerPage + cc,
+ cache: false,
+ responseType: 'json' })
+ .then(function(response) {
+ if (response.data == null || typeof response.data != 'object')
+ return $q.reject('MRClientService.getClientsByPage: response.data null or not object');
+ else
+ return response.data;
+ },
+ function(error) {
+ $log.error('MRClientService.getClientsByPage failed: ' + JSON.stringify(error));
+ return $q.reject(error.statusText);
+ });
+ },
+
+ // Creates a new client.
+ addClient: function(client) {
+ return $http({
+ method: 'POST',
+ url: 'mr_client',
+ data: client,
+ responseType: 'json' })
+ .then(function(response) {
+ if (response.data == null || typeof response.data != 'object')
+ return $q.reject('MRClientService.addClient: response.data null or not object');
+ else
+ return response.data;
+ },
+ function(error) {
+ $log.error('MRClientService.addClient failed: ' + JSON.stringify(error));
+ return $q.reject(error.statusText);
+ });
+ },
+
+ // Updates an existing client.
+ updateClient: function(client) {
+ return $http({
+ method: 'PUT',
+ url: 'mr_client/' + client.mrClientId,
+ data: client,
+ responseType: 'json' })
+ .then(function(response) {
+ if (response.data == null || typeof response.data != 'object')
+ return $q.reject('MRClientService.updateClient: response.data null or not object');
+ else
+ return response.data;
+ },
+ function(error) {
+ $log.error('MRClientService.updateClient failed: ' + JSON.stringify(error));
+ return $q.reject(error.statusText);
+ });
+ },
+
+ // Deletes the client with the specified ID
+ deleteClient: function(mrClientId) {
+ return $http({
+ method: 'DELETE',
+ url: 'mr_client/' + mrClientId,
+ responseType: 'json' })
+ .then(function(response) {
+ if (response.data == null || typeof response.data != 'object')
+ return $q.reject('MRClientService.deleteClient: response.data null or not object');
+ else
+ return response.data;
+ },
+ function(error) {
+ $log.error('MRClientService.deleteClient failed: ' + JSON.stringify(error));
+ return $q.reject(error.statusText);
+ });
+ },
+
+ };
+});
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-client-list-popup-controller.js b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-client-list-popup-controller.js
new file mode 100644
index 0000000..624f404
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-client-list-popup-controller.js
@@ -0,0 +1,19 @@
+appDS2.controller('topicClientListPopupCtrl', function($scope, $log, $modalInstance, modalService, message) {
+
+ 'use strict';
+
+ // this object holds all app data and functions
+ $scope.dbcapp = {};
+
+ // Set the label variable for the template
+ $scope.dbcapp.label = 'Clients of Topic ' + message.topic.topicName;
+
+ // Source of data table
+ $scope.dbcapp.showTopic = message.topic;
+
+ // $log.debug('topicClientListPopupCtrl: showTopic.clients is ' + JSON.stringify($scope.dbcapp.showTopic.clients));
+
+ $scope.dbcapp.close = function() {
+ $modalInstance.close();
+ };
+});
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-list-controller.js b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-list-controller.js
new file mode 100644
index 0000000..8a77a77
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-list-controller.js
@@ -0,0 +1,261 @@
+appDS2.controller('mrTopicListCtrl', function($scope, $log, $modal, modalService, MRTopicService){
+
+ // populates the table of Message Router topics
+ 'use strict';
+
+ // this object holds all app data and functions
+ $scope.dbcapp = {};
+ // models for controls on screen
+ $scope.dbcapp.tableData=[];
+ $scope.dbcapp.currentPageNum=1;
+ $scope.dbcapp.totalPages=1;
+ $scope.dbcapp.viewPerPage = 100;
+ $scope.dbcapp.viewPerPageOptions = [
+ { index : 0, value : 50 },
+ { index : 1, value : 100 },
+ { index : 2, value : 500 },
+ { index : 3, value : 1000 },
+ { index : 4, value : 2500 }
+ ];
+ // other
+ $scope.dbcapp.errMsg=null;
+ $scope.dbcapp.isDataLoading=true;
+ $scope.dbcapp.isRequestFailed=false;
+
+ /**
+ * Answers an array of the specified size - makes Angular iteration easy.
+ */
+ $scope.dbcapp.buildArraySizeN = function(num) {
+ // $log.debug("buildArraySizeN: invoked with " + num);
+ return new Array(num);
+ }
+
+ /**
+ * Loads the table of message router topics.
+ */
+ $scope.dbcapp.loadTable = function() {
+ $scope.dbcapp.isDataLoading = true;
+ MRTopicService.getTopicsByPage($scope.dbcapp.currentPageNum, $scope.dbcapp.viewPerPage)
+ .then(function(jsonObj){
+ // must match keys in java controller's method
+ if (jsonObj.error) {
+ $scope.dbcapp.isRequestFailed = true;
+ $scope.dbcapp.errMsg = jsonObj.error;
+ $scope.dbcapp.tableData = [];
+ }
+ else {
+ $scope.dbcapp.isRequestFailed = false;
+ $scope.dbcapp.errMsg = null;
+ $scope.dbcapp.profileName = jsonObj.profileName;
+ $scope.dbcapp.dmaapName = jsonObj.dmaapName;
+ $scope.dbcapp.dcaeLocations = jsonObj.dcaeLocations;
+ $scope.dbcapp.totalPages = jsonObj.totalPages;
+ $scope.dbcapp.tableData = jsonObj.data;
+ }
+ $scope.dbcapp.isDataLoading=false;
+ },function(error){
+ $log.error("mrTopicListCtrl.loadTable failed: " + error);
+ $scope.dbcapp.isRequestFailed = true;
+ $scope.dbcapp.errMsg = error;
+ $scope.dbcapp.tableData = [];
+ $scope.dbcapp.isDataLoading = false;
+ });
+ };
+
+ /**
+ * Shows a modal pop-up to add a topic. Passes data in via an object named
+ * "message". On successful completion, updates the table.
+ */
+ $scope.dbcapp.addTopicModalPopup = function() {
+ $scope.dbcapp.editTopic = null;
+ var modalInstance = $modal.open({
+ templateUrl : 'edit_topic_popup.html',
+ controller : 'topicPopupCtrl',
+ windowClass: 'modal-docked',
+ sizeClass: 'modal-small',
+ resolve : {
+ message : function() {
+ var dataForPopup = {
+ topic : $scope.dbcapp.editTopic,
+ topicList : $scope.dbcapp.tableData
+ };
+ return dataForPopup;
+ }
+ }
+ });
+ modalInstance.result.then(function(response) {
+ if (response == null) {
+ // $log.debug('addFeedModalPopup: user closed dialog');
+ }
+ else {
+ if (response.error != null)
+ alert('Failed to add topic:\n' + response.error);
+ else
+ // success, get the updated list.
+ $scope.dbcapp.loadTable();
+ }
+ });
+ };
+
+ /**
+ * Shows a modal pop-up with topic details.
+ * Currently topics cannot be edited.
+ */
+ $scope.dbcapp.showTopicModalPopup = function(topic) {
+ $scope.dbcapp.editTopic = topic;
+ var modalInstance = $modal.open({
+ templateUrl : 'show_topic_popup.html',
+ controller : 'topicPopupCtrl',
+ windowClass: 'modal-docked',
+ sizeClass: 'modal-small',
+ resolve : {
+ message : function() {
+ var dataForPopup = {
+ topic : $scope.dbcapp.editTopic,
+ topicList : $scope.dbcapp.tableData
+ };
+ return dataForPopup;
+ }
+ }
+ });
+ modalInstance.result.then(function(response) {
+ // Do nothing
+ });
+ };
+
+ /**
+ * Shows a modal pop-up to edit a topic.
+ * Passes data in via an object named "message".
+ * Always updates the table, even on failure, to discard
+ * user-entered changes that were not persisted.
+ *
+ * TOPICS CANNOT BE EDITED YET.
+ *
+ $scope.dbcapp.editTopicModalPopup = function(topic) {
+ $scope.dbcapp.editTopic = topic;
+ var modalInstance = $modal.open({
+ templateUrl : 'edit_topic_popup.html',
+ controller : 'topicPopupCtrl',
+ resolve : {
+ message : function() {
+ var dataForPopup = {
+ topic : $scope.dbcapp.editTopic,
+ topicList : $scope.dbcapp.tableData
+ };
+ return dataForPopup;
+ }
+ }
+ });
+ modalInstance.result.then(function(response) {
+ if (response == null) {
+ // $log.debug('editTopicModalPopup: user closed dialog');
+ }
+ else {
+ // $log.debug('editTopicModalPopup: response: ' + JSON.stringify(response));
+ if (response.error != null)
+ alert('Failed to edit topic ' + topic.fqtn
+ + '\n' + response.error);
+ // refresh in all cases
+ $scope.dbcapp.loadTable();
+ }
+ });
+ };
+ */
+
+ /**
+ * Shows a modal pop-up to confirm deletion of a topic. On successful
+ * completion, updates the table.
+ */
+ $scope.dbcapp.deleteTopicModalPopup = function(topic) {
+ modalService.popupConfirmWin("Confirm",
+ "Delete topic " + topic.fqtn,
+ function() {
+ // $log.debug('deleteTopicModalPopup: ' + topic.fqtn);
+ MRTopicService.deleteTopic(topic.fqtn)
+ .then(
+ function(response) {
+ // $log.debug('deleteTopicModalPopup: response: ' + JSON.stringify(response));
+ if (response.error != null) {
+ $log.error('deleteTopicModalPopup: failed to delete: ' + response.error);
+ alert('Failed to delete topic ' + topic.fqtn + '\n' + response.error);
+ }
+ else {
+ // success, get the updated list.
+ $scope.dbcapp.loadTable()
+ }
+ },
+ function(error) {
+ alert('Request failed to delete topic ' + topic.fqtn + '\n'
+ + JSON.stringify(error));
+ }
+ );
+ })
+ };
+
+ /**
+ * Shows a modal pop-up with all clients of a topic.
+ * Passes data in via an object named "message".
+ */
+ $scope.dbcapp.showTopicClientsModalPopup = function(topic) {
+ var modalInstance = $modal.open({
+ templateUrl : 'topic_client_list_popup.html',
+ controller : 'topicClientListPopupCtrl',
+ windowClass: 'modal-docked',
+ sizeClass: 'modal-jumbo',
+ resolve : {
+ message : function() {
+ var dataForPopup = {
+ topic : topic
+ };
+ return dataForPopup;
+ }
+ }
+ });
+ modalInstance.result.then(function(response) {
+ // No response expected.
+ });
+ };
+
+ /**
+ * Shows a modal pop-up to add a client to a topic
+ * Passes data in via an object named "message".
+ * On successful completion, updates the table.
+ */
+ $scope.dbcapp.addTopicClientModalPopup = function(topic) {
+ $scope.dbcapp.editClient = { fqtn : topic.fqtn }
+ var modalInstance = $modal.open({
+ templateUrl : 'edit_client_popup.html',
+ controller : 'clientPopupCtrl',
+ windowClass: 'modal-docked',
+ sizeClass: 'modal-small',
+ resolve : {
+ message : function() {
+ var dataForPopup = {
+ client : $scope.dbcapp.editClient,
+ clientList : [], // empty list
+ dcaeList : $scope.dbcapp.dcaeLocations
+ };
+ return dataForPopup;
+ }
+ }
+ });
+ modalInstance.result.then(function(response) {
+ if (response == null) {
+ // $log.debug('addTopicClientModalPopup: user closed dialog');
+ }
+ else {
+ if (response.error != null)
+ alert('Failed to add client to topic:\n' + response.error);
+ else
+ // success, get the updated list.
+ $scope.dbcapp.loadTable();
+ }
+ });
+ };
+
+ // Populate the table on load. Note that the b2b selector code
+ // sets the page-number value, and the change event calls load table.
+ // Do not call this here to avoid double load:
+ // $scope.dbcapp.loadTable();
+
+});
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-popup-controller.js b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-popup-controller.js
new file mode 100644
index 0000000..44e558f
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-popup-controller.js
@@ -0,0 +1,64 @@
+appDS2.controller('topicPopupCtrl', function($scope, $log, $modalInstance, modalService, message, MRTopicService) {
+ 'use strict';
+
+ // this object holds all app data and functions
+ $scope.dbcapp = {};
+
+ // Set the label variable for the template
+ if (message.topic == null)
+ $scope.dbcapp.label = 'Add Topic';
+ else
+ $scope.dbcapp.label = 'Show Topic';
+ $scope.dbcapp.editTopic = message.topic;
+
+ /**
+ * Validates content of user-editable fields.
+ * Returns null if all is well,
+ * a descriptive error message otherwise.
+ */
+ $scope.dbcapp.validateTopic = function(topic) {
+ if (topic == null)
+ return "No data found.\nPlease enter some values.";
+ if (topic.topicName == null || topic.topicName.trim() == '')
+ return "Name is required.\nPlease enter a value.";
+ if (topic.topicDescription == null || topic.topicDescription.trim() == '')
+ return "Description is required.\nPlease enter a value.";
+ return null;
+ }
+
+ $scope.dbcapp.saveTopic = function(topic) {
+ var validateMsg = $scope.dbcapp.validateTopic(topic);
+ if (validateMsg != null) {
+ alert('Invalid Content:\n' + validateMsg);
+ return;
+ }
+
+ if (topic.fqtn == null) {
+ // No fqtn, so create a new one
+ MRTopicService.addTopic(topic)
+ .then(function(response) {
+ $modalInstance.close(response);
+ },
+ function (error) {
+ $log.error('topicPopupCtrl.saveTopic: error while adding: ' + error);
+ }
+ );
+ }
+ else {
+ // Has fqtn, so update an existing one
+ MRTopicService.updateTopic(topic)
+ .then(function(response) {
+ $modalInstance.close(response);
+ },
+ function (error) {
+ $log.error('topicPopupCtrl.saveTopic: error while updating: ' + error);
+ }
+ );
+ }
+
+ }; // saveTopic
+
+ $scope.dbcapp.close = function() {
+ $modalInstance.close();
+ };
+});
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-service.js b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-service.js
new file mode 100644
index 0000000..8f777e6
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr-topic-service.js
@@ -0,0 +1,86 @@
+appDS2.factory('MRTopicService', function ($http, $q, $log) {
+ return {
+ /**
+ * Gets one page of message router topic objects.
+ * @param {Number} pageNum - page number; e.g., 1
+ * @param {Number} viewPerPage - number of items per page; e.g., 25
+ * @return {JSON} Response object from remote side
+ */
+ getTopicsByPage: function(pageNum,viewPerPage) {
+ // cache control for IE
+ var cc = "&cc=" + new Date().getTime().toString();
+ return $http({
+ method: 'GET',
+ url: 'mr_topic?pageNum=' + pageNum + '&viewPerPage=' + viewPerPage + cc,
+ cache: false,
+ responseType: 'json' })
+ .then(function(response) {
+ if (response.data == null || typeof response.data != 'object')
+ return $q.reject('MRTopicService.getTopicsByPage: response.data null or not object');
+ else
+ return response.data;
+ },
+ function(error) {
+ $log.error('MRTopicService.getTopicsByPage failed: ' + JSON.stringify(error));
+ return $q.reject(error.statusText);
+ });
+ },
+
+ // Creates a new topic.
+ addTopic: function(topic) {
+ return $http({
+ method: 'POST',
+ url: 'mr_topic',
+ data: topic,
+ responseType: 'json' })
+ .then(function(response) {
+ if (response.data == null || typeof response.data != 'object')
+ return $q.reject('MRTopicService.addTopic: response.data null or not object');
+ else
+ return response.data;
+ },
+ function(error) {
+ $log.error('MRTopicService.addTopic failed: ' + JSON.stringify(error));
+ return $q.reject(error.statusText);
+ });
+ },
+
+ // Updates an existing topic.
+ updateTopic: function(topic) {
+ return $http({
+ method: 'PUT',
+ url: 'mr_topic/' + topic.fqtn,
+ data: topic,
+ responseType: 'json' })
+ .then(function(response) {
+ if (response.data == null || typeof response.data != 'object')
+ return $q.reject('MRTopicService.updateTopic: response.data null or not object');
+ else
+ return response.data;
+ },
+ function(error) {
+ $log.error('MRTopicService.updateTopic failed: ' + JSON.stringify(error));
+ return $q.reject(error.statusText);
+ });
+ },
+
+ // Deletes the topic with the specified FQTN.
+ deleteTopic: function(fqtn) {
+ return $http({
+ method: 'DELETE',
+ url: 'mr_topic/' + fqtn,
+ responseType: 'json' })
+ .then(function(response) {
+ if (response.data == null || typeof response.data != 'object')
+ return $q.reject('MRTopicService.deleteTopic: response.data null or not object');
+ else
+ return response.data;
+ },
+ function(error) {
+ $log.error('MRTopicService.deleteTopic failed: ' + JSON.stringify(error));
+ return $q.reject(error.statusText);
+ });
+ },
+
+ };
+});
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_client_list.html b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_client_list.html
new file mode 100644
index 0000000..ad0f744
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_client_list.html
@@ -0,0 +1,139 @@
+<!-- Client list. Controller is specified by route provider. -->
+<div id="page-content">
+
+ <h1 class="heading-page" id="topicClients">Topic Clients</h1>
+
+ <!-- show progress indicator -->
+ <div ng-show="dbcapp.isDataLoading">
+ <div class="span" style="margin-bottom:20px;">
+ <i class="icon-primary-spinner small" role="img" aria-label="Please wait while the content loads"></i>
+ Please wait while the content loads.
+ </div>
+ </div>
+
+ <div ng-hide="dbcapp.isDataLoading">
+
+ <div id="button-search-row">
+ <!-- NO "add" button on this page -->
+ <div style="float:right;">
+ <div class="form-field form-field__small">
+ <input
+ type="text"
+ placeholder="Search clients"
+ ng-model="dbcapp.searchString"/>
+ <!-- <i class="icon-primary-questionmark"></i> -->
+ </div>
+ </div>
+ </div>
+
+ <div ng-show="dbcapp.isRequestFailed">
+ <span class="errorMessageText">{{dbcapp.errMsg}}</span>
+ </div>
+
+ <div ng-hide="dbcapp.isRequestFailed">
+ <h4 class="heading-small-emphasis">
+ Access Profile {{dbcapp.profileName}}, DMaaP Name {{dbcapp.dmaapName}}
+ </div>
+
+ <div
+ b2b-table
+ id="clients-table"
+ class="b2b-table-div"
+ table-data="dbcapp.tableData"
+ search-string="dbcapp.searchString"
+ current-page="dbcapp.currentPageIgnored"
+ next-sort="dbcapp.nextSortIgnored">
+
+ <table>
+
+ <thead b2b-table-row type="header">
+ <tr>
+ <th b2b-table-header key="mrClientId">MR Client ID</th>
+ <th b2b-table-header key="dcaeLocationName">DCAE Location Name</th>
+ <th b2b-table-header key="fqtn">Qualified Topic Name</th>
+ <th b2b-table-header key="action">Action</th>
+ <th b2b-table-header key="clientRole">Client Role</th>
+ <th b2b-table-header key="lastMod">Last Modified</th>
+ <th b2b-table-header key="status">Status</th>
+ <th b2b-table-header key="topicURL">Topic URL</th>
+ <th b2b-table-header sortable="false">Delete</th>
+ </tr>
+ </thead>
+
+ <tbody b2b-table-row type="body" row-repeat="rowData in dbcapp.tableData">
+ <tr id="tr-rowData">
+ <td b2b-table-body
+ ng-bind="rowData.mrClientId"
+ ng-click="dbcapp.editClientModalPopup(rowData)"/>
+ <td b2b-table-body
+ ng-bind="rowData.dcaeLocationName"
+ ng-click="dbcapp.editClientModalPopup(rowData)"/>
+ <td b2b-table-body
+ ng-bind="rowData.fqtn"
+ ng-click="dbcapp.editClientModalPopup(rowData)"/>
+ <td b2b-table-body
+ ng-bind="rowData.action"
+ ng-click="dbcapp.editClientModalPopup(rowData)"/>
+ <td b2b-table-body
+ ng-bind="rowData.clientRole"
+ ng-click="dbcapp.editClientModalPopup(rowData)"/>
+ <td b2b-table-body
+ ng-bind="rowData.lastMod"
+ ng-click="dbcapp.editClientModalPopup(rowData)"/>
+ <td b2b-table-body
+ ng-bind="rowData.status"
+ ng-click="dbcapp.editClientModalPopup(rowData)"/>
+ <td b2b-table-body
+ ng-bind="rowData.topicURL"
+ ng-click="dbcapp.editClientModalPopup(rowData)"/>
+ <td b2b-table-body>
+ <div ng-click="dbcapp.deleteClientModalPopup(rowData);">
+ <a href="" class="icon-misc-trash"></a>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="pageNumber">Page Number:</label>
+ <div class="field-group">
+ <select b2b-dropdown id="pageNumber" name="currentPageNumSelector" ng-model="dbcapp.currentPageNum" ng-change="dbcapp.loadTable()">
+ <option b2b-dropdown-list
+ option-repeat="p in dbcapp.buildArraySizeN(dbcapp.totalPages) track by $index"
+ value="{{$index+1}}">{{$index+1}}</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ <div class="span12">
+ <div class="form-row">
+ <label for="pageCount">Page Count:</label>
+ <div class="field-group">
+ <input id="pageCount" class="span12" type="text" data-ng-model="dbcapp.totalPages" readonly="true">
+ </div>
+ </div>
+ </div>
+ <div class="span12">
+ <div class="form-row">
+ <label for="rowsPerPage">Rows per Page:</label>
+ <div class="field-group">
+ <select b2b-dropdown id="rowsPerPage" name="rowsPerPage" ng-model="dbcapp.viewPerPage" ng-change="dbcapp.loadTable()">
+ <option b2b-dropdown-list
+ option-repeat="v in dbcapp.viewPerPageOptions"
+ value="{{v.value}}">{{v.value}}</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div style="height: 10px;">
+ <!-- space between page number and black footer -->
+ </div>
+
+ </div><!-- loading -->
+
+</div><!-- page content -->
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_client_popup_template.html b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_client_popup_template.html
new file mode 100644
index 0000000..2788ae2
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_client_popup_template.html
@@ -0,0 +1,74 @@
+<script type="text/ng-template" id="edit_client_popup.html">
+ <div class="b2b-modal-header ng-scope">
+ <h2 id="myModalLabel" modal-title="">{{dbcapp.label}}</h2>
+ <div class="corner-button in">
+ <button type="button" class="close" aria-label="Close"
+ ng-click="$dismiss('cancel')"></button>
+ </div>
+ </div>
+
+ <div class="b2b-modal-body ng-scope ng-isolate-scope" tabindex="0"
+ role="region" aria-label="Modal body content">
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="dcaelocation">*DCAE Location</label>
+ <div class="field-group">
+ <select b2b-dropdown id="dcaeLocation" name="loc" ng-model="dbcapp.editClient.dcaeLocationName">
+ <option b2b-dropdown-list option-repeat="d in dbcapp.dcaeList" value="{{d}}">{{d}}</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="clientrole">*Client Role</label>
+ <div class="field-group">
+ <input id="clientrole" class="span12" type="text" data-ng-model="dbcapp.editClient.clientRole">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="action">*Action</label>
+ <div class="field-group" id="action">
+ <label for="publish" class="checkbox">
+ <input id="publish" type="checkbox" ng-model="dbcapp.clientactionbox[0]" />
+ <i class="skin"></i><span>Pub</span>
+ </label>
+ <label for="subscribe" class="checkbox">
+ <input id="subscribe" type="checkbox" ng-model="dbcapp.clientactionbox[1]" />
+ <i class="skin"></i><span>Sub</span>
+ </label>
+ <label for="view" class="checkbox">
+ <input id="view" type="checkbox" ng-model="dbcapp.clientactionbox[2]" />
+ <i class="skin"></i><span>View</span>
+ </label>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="b2b-modal-footer ng-scope ng-isolate-scope">
+ <div class="cta-button-group in">
+ <button class="btn btn-alt btn-small" type="button"
+ ng-click="dbcapp.saveClient(dbcapp.editClient);">
+ Save
+ </button>
+ <button class="btn btn-small" type="button"
+ ng-click="$dismiss('cancel')">
+ Cancel
+ </button>
+ </div>
+ </div>
+
+</script>
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_client_list_popup_template.html b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_client_list_popup_template.html
new file mode 100644
index 0000000..e78baee
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_client_list_popup_template.html
@@ -0,0 +1,53 @@
+<script type="text/ng-template" id="topic_client_list_popup.html">
+
+ <div class="b2b-modal-header ng-scope">
+ <h2 id="myModalLabel" modal-title="">{{dbcapp.label}}</h2>
+ <div class="corner-button in">
+ <button type="button" class="close" aria-label="Close"
+ ng-click="$dismiss('cancel')"></button>
+ </div>
+ </div>
+
+ <div class="b2b-modal-body ng-scope ng-isolate-scope" tabindex="0"
+ role="region" aria-label="Modal body content">
+
+ <table
+ id="clients-table"
+ table-data="dbcapp.showTopic.clients"
+ current-page="dbcapp.currentPageIgnored"
+ next-sort="dbcapp.nextSortIgnored">
+
+ <thead type="header">
+ <tr>
+ <th sortable="false">MR Client ID</th>
+ <th sortable="false">DCAE Location Name</th>
+ <th sortable="false">Action</th>
+ <th sortable="false">Client Role</th>
+ <th sortable="false">Last Modified</th>
+ <th sortable="false">Status</th>
+ </tr>
+ </thead>
+ <tbody type="body" ng-repeat="rowData in dbcapp.showTopic.clients">
+ <tr>
+ <td ng-bind="rowData.mrClientId" />
+ <td ng-bind="rowData.dcaeLocationName" />
+ <td ng-bind="rowData.action"/>
+ <td ng-bind="rowData.clientRole"/>
+ <td ng-bind="rowData.lastMod" />
+ <td ng-bind="rowData.status" />
+ </tr>
+ </tbody>
+ </table>
+
+ </div>
+
+ <div class="b2b-modal-footer ng-scope ng-isolate-scope">
+ <div class="cta-button-group in">
+ <button class="btn btn-alt btn-small" type="button"
+ ng-click="$dismiss('cancel')">
+ Close
+ </button>
+ </div>
+ </div>
+
+</script>
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_list.html b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_list.html
new file mode 100644
index 0000000..9aab3e5
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_list.html
@@ -0,0 +1,156 @@
+<!-- Topic list. Controller is specified by route provider. -->
+<div id="page-content">
+
+ <h1 class="heading-page" id="feedPublishers">Message Router Topics</h1>
+
+ <!-- show progress indicator -->
+ <div ng-show="dbcapp.isDataLoading">
+ <div class="span" style="margin-bottom:20px;">
+ <i class="icon-primary-spinner small" role="img" aria-label="Please wait while the content loads"></i>
+ Please wait while the content loads.
+ </div>
+ </div>
+
+ <div ng-hide="dbcapp.isDataLoading">
+
+ <div id="button-search-row">
+
+ <button class="btn btn-alt btn-small"
+ type="submit"
+ ng-click="dbcapp.addTopicModalPopup();">
+ Add Topic...
+ </button>
+
+ <div style="float:right;">
+ <div class="form-field form-field__small">
+ <input
+ type="text"
+ placeholder="Search topics"
+ ng-model="dbcapp.searchString"/>
+ <!-- <i class="icon-primary-questionmark"></i> -->
+ </div>
+ </div>
+ </div>
+
+ <div ng-show="dbcapp.isRequestFailed">
+ <span class="errorMessageText">{{dbcapp.errMsg}}</span>
+ </div>
+
+ <div ng-hide="dbcapp.isRequestFailed">
+ <h4 class="heading-small-emphasis">
+ Access Profile {{dbcapp.profileName}}, DMaaP Name {{dbcapp.dmaapName}}
+ </div>
+
+ <div
+ b2b-table
+ id="mr-topics-table"
+ class="b2b-table-div"
+ table-data="dbcapp.tableData"
+ search-string="dbcapp.searchString"
+ current-page="dbcapp.currentPageIgnored"
+ next-sort="dbcapp.nextSortIgnored">
+
+ <table>
+
+ <thead b2b-table-row type="header">
+ <tr id="th-header-row">
+ <th b2b-table-header key="fqtn">Qualified Name</th>
+ <th b2b-table-header key="topicName">Name</th>
+ <th b2b-table-header key="topicDescription">Description</th>
+ <!-- model differs from swagger
+ <th b2b-table-header key="tnxEnabled">Tnx</th>
+ -->
+ <th b2b-table-header key="owner">Owner</th>
+ <th b2b-table-header key="status">Status</th>
+ <th b2b-table-header sortable="false">Cl</th>
+ <th b2b-table-header sortable="false">Add</th>
+ <th b2b-table-header sortable="false">Delete</th>
+ </tr>
+ </thead>
+
+ <tbody b2b-table-row type="body" row-repeat="rowData in dbcapp.tableData">
+ <tr id="tr-rowData">
+ <td b2b-table-body
+ ng-bind="rowData.fqtn"
+ ng-click="dbcapp.showTopicModalPopup(rowData)"/>
+ <td b2b-table-body
+ ng-bind="rowData.topicName"
+ ng-click="dbcapp.showTopicModalPopup(rowData)"/>
+ <td b2b-table-body
+ ng-bind="rowData.topicDescription"
+ ng-click="dbcapp.showTopicModalPopup(rowData)"/>
+ <!-- model differs from swagger
+ <td b2b-table-body
+ ng-click="dbcapp.editTopicModalPopup(rowData)"/>
+ <input type="checkbox"
+ disabled="true"
+ ng-model="rowData.tnxEnabled"
+ ng-checked="rowData.tnxEnabled"
+ value="rowData.tnxEnabled"/>
+ -->
+ <td b2b-table-body
+ ng-bind="rowData.owner"
+ ng-click="dbcapp.showTopicModalPopup(rowData)"/>
+ <td b2b-table-body
+ ng-bind="rowData.status"
+ ng-click="dbcapp.showTopicModalPopup(rowData)"/>
+ <td b2b-table-body
+ ng-bind="rowData.clients.length"
+ ng-click="dbcapp.showTopicClientsModalPopup(rowData)">
+ </td>
+ <td b2b-table-body>
+ <div ng-click="dbcapp.addTopicClientModalPopup(rowData);">
+ <a href="" class="icon-controls-add-maximize"></a>
+ </div>
+ </td>
+ <td b2b-table-body>
+ <div ng-click="dbcapp.deleteTopicModalPopup(rowData);">
+ <a href="" class="icon-misc-trash"></a>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="pageNumber">Page Number:</label>
+ <div class="field-group">
+ <select b2b-dropdown id="pageNumber" name="currentPageNumSelector" ng-model="dbcapp.currentPageNum" ng-change="dbcapp.loadTable()">
+ <option b2b-dropdown-list
+ option-repeat="p in dbcapp.buildArraySizeN(dbcapp.totalPages) track by $index"
+ value="{{$index+1}}">{{$index+1}}</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ <div class="span12">
+ <div class="form-row">
+ <label for="pageCount">Page Count:</label>
+ <div class="field-group">
+ <input id="pageCount" class="span12" type="text" data-ng-model="dbcapp.totalPages" readonly="true">
+ </div>
+ </div>
+ </div>
+ <div class="span12">
+ <div class="form-row">
+ <label for="rowsPerPage">Rows per Page:</label>
+ <div class="field-group">
+ <select b2b-dropdown id="rowsPerPage" name="rowsPerPage" ng-model="dbcapp.viewPerPage" ng-change="dbcapp.loadTable()">
+ <option b2b-dropdown-list
+ option-repeat="v in dbcapp.viewPerPageOptions"
+ value="{{v.value}}">{{v.value}}</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div style="height: 10px;">
+ <!-- space between page number and black footer -->
+ </div>
+
+ </div><!-- loading -->
+
+</div><!-- page content -->
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_popup_template_edit.html b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_popup_template_edit.html
new file mode 100644
index 0000000..83fec3d
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_popup_template_edit.html
@@ -0,0 +1,64 @@
+<script type="text/ng-template" id="edit_topic_popup.html">
+
+ <div class="b2b-modal-header ng-scope">
+ <h2 id="myModalLabel" modal-title="">{{dbcapp.label}}</h2>
+ <div class="corner-button in">
+ <button type="button" class="close" aria-label="Close"
+ ng-click="$dismiss('cancel')"></button>
+ </div>
+ </div>
+
+ <div class="b2b-modal-body ng-scope ng-isolate-scope" tabindex="0"
+ role="region" aria-label="Modal body content">
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="topicname">*Name</label>
+ <div class="field-group">
+ <input id="topicname" class="span12" type="text" data-ng-model="dbcapp.editTopic.topicName">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="description">*Description</label>
+ <div class="field-group">
+ <input id="description" class="span12" type="text" data-ng-model="dbcapp.editTopic.topicDescription">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <div class="field-group">
+ <label for="enabled" class="checkbox">
+ <input id="enabled" type="checkbox" ng-model="dbcapp.editTopic.tnxEnabled" />
+ <i class="skin"></i><span>Tnx Enabled</span>
+ </label>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="b2b-modal-footer ng-scope ng-isolate-scope">
+ <div class="cta-button-group in">
+ <button class="btn btn-alt btn-small" type="button"
+ ng-click="dbcapp.saveTopic(dbcapp.editTopic);">
+ Save
+ </button>
+ <button class="btn btn-small" type="button"
+ ng-click="$dismiss('cancel')">
+ Cancel
+ </button>
+ </div>
+ </div>
+
+</script>
diff --git a/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_popup_template_show.html b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_popup_template_show.html
new file mode 100644
index 0000000..e3c75ea
--- /dev/null
+++ b/dcae_dmaapbc_webapp/dbca-overlay/src/main/webapp/app/dbcapp/messagerouter/mr_topic_popup_template_show.html
@@ -0,0 +1,80 @@
+<script type="text/ng-template" id="show_topic_popup.html">
+
+ <div class="b2b-modal-header ng-scope">
+ <h2 id="myModalLabel" modal-title="">{{dbcapp.label}}</h2>
+ <div class="corner-button in">
+ <button type="button" class="close" aria-label="Close"
+ ng-click="$dismiss('cancel')"></button>
+ </div>
+ </div>
+
+ <div class="b2b-modal-body ng-scope ng-isolate-scope" tabindex="0"
+ role="region" aria-label="Modal body content">
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="fqtn">Qualified Name</label>
+ <div class="field-group">
+ <input id="fqtn" class="span12" type="text" data-ng-model="dbcapp.editTopic.fqtn">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="name">Name</label>
+ <div class="field-group">
+ <input id="name" class="span12" type="text" data-ng-model="dbcapp.editTopic.topicName">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="description">*Description</label>
+ <div class="field-group">
+ <input id="description" class="span12" type="text" data-ng-model="dbcapp.editTopic.topicDescription">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="owner">Owner</label>
+ <div class="field-group">
+ <input id="owner" class="span12" type="text" data-ng-model="dbcapp.editTopic.owner">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row-nowrap">
+ <div class="span12">
+ <div class="form-row">
+ <label for="owner">Status</label>
+ <div class="field-group">
+ <input id="owner" class="span12" type="text" data-ng-model="dbcapp.editTopic.status">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="b2b-modal-footer ng-scope ng-isolate-scope">
+ <div class="cta-button-group in">
+ <button class="btn btn-alt btn-small" type="button"
+ ng-click="$dismiss('cancel')">
+ Close
+ </button>
+ </div>
+ </div>
+
+</script>