Merge pull request #2237 from jaredevantabor/networking

Network UI fixes

awx/ui/client/src/inventories-hosts/inventories/inventory.list.js

@@ -5,7 +5,7 @@
  *************************************************/
 
 
-export default ['i18n', function(i18n) {
+export default ['i18n', 'awxNetStrings' , function(i18n, awxNetStrings) {
     return {
 
         name: 'inventories',
@@ -102,9 +102,9 @@ export default ['i18n', function(i18n) {
                 ngShow: '!inventory.pending_deletion && inventory.summary_fields.user_capabilities.edit'
             },
             network: {
-                label: i18n._('Network Visualization'),
+                label: awxNetStrings.get('feature.ACTION_BUTTON'),
                 ngClick: 'goToGraph(inventory)',
-                awToolTip: i18n._('Network Visualization'),
+                awToolTip: awxNetStrings.get('feature.ACTION_BUTTON'),
                 dataPlacement: 'top',
                 ngShow: '!inventory.pending_deletion'
             },

awx/ui/client/src/inventories-hosts/inventories/list/inventory-list.controller.js

@@ -86,7 +86,12 @@ function InventoriesList($scope,
     };
 
     $scope.goToGraph = function(inventory){
-         $state.go('inventories.edit.networking', {inventory_id: inventory.id, inventory_name: inventory.name});
+        if(inventory.kind && inventory.kind === 'smart') {
+            $state.go('inventories.editSmartInventory.networking', {smartinventory_id: inventory.id, inventory_name: inventory.name});
+        }
+        else {
+            $state.go('inventories.edit.networking', {inventory_id: inventory.id, inventory_name: inventory.name});
+        }
     };
 
     $scope.editInventory = function (inventory, reload) {

awx/ui/client/src/inventories-hosts/inventories/main.js

@@ -46,6 +46,7 @@ import groupNestedGroupsAssociateRoute from './related/groups/related/nested-gro
 import nestedHostsAssociateRoute from './related/groups/related/nested-hosts/group-nested-hosts-associate.route';
 import nestedHostsAddRoute from './related/groups/related/nested-hosts/group-nested-hosts-add.route';
 import hostCompletedJobsRoute from '~features/jobs/routes/hostCompletedJobs.route.js';
+import networkUIRoute from '../../network-ui/network.ui.route.js';
 
 export default
 angular.module('inventory', [
@@ -294,6 +295,9 @@ angular.module('inventory', [
                 let relatedHostCompletedJobs = _.cloneDeep(hostCompletedJobsRoute);
                 relatedHostCompletedJobs.name = 'inventories.edit.hosts.edit.completed_jobs';
 
+                let smartInvNetworkUI = _.cloneDeep(networkUIRoute);
+                smartInvNetworkUI.name = 'inventories.editSmartInventory.networking';
+
                 return Promise.all([
                     standardInventoryAdd,
                     standardInventoryEdit,
@@ -342,7 +346,9 @@ angular.module('inventory', [
                             stateExtender.buildDefinition(nestedHostsAssociateRoute),
                             stateExtender.buildDefinition(nestedGroupsAdd),
                             stateExtender.buildDefinition(nestedHostsAddRoute),
-                            stateExtender.buildDefinition(relatedHostCompletedJobs)
+                            stateExtender.buildDefinition(relatedHostCompletedJobs),
+                            stateExtender.buildDefinition(networkUIRoute),
+                            stateExtender.buildDefinition(smartInvNetworkUI)
                         ])
                     };
                 });

awx/ui/client/src/inventories-hosts/inventories/smart-inventory/edit/smart-inventory-edit.controller.js

@@ -95,6 +95,10 @@ function SmartInventoryEdit($scope, $location,
             });
     };
 
+    $scope.goToGraph = function(){
+        $state.go('inventories.editSmartInventory.networking', {smartinventory_id: $scope.inventory_obj.id, inventory_name: $scope.inventory_obj.name});
+    };
+
     $scope.formCancel = function() {
         $state.go('inventories');
     };

awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory.form.js

@@ -4,7 +4,7 @@
  * All Rights Reserved
  *************************************************/
 
-export default ['i18n', function(i18n) {
+export default ['i18n', 'awxNetStrings', function(i18n, awxNetStrings) {
         return {
 
             addTitle: i18n._('NEW SMART INVENTORY'),
@@ -156,6 +156,14 @@ export default ['i18n', function(i18n) {
                     skipGenerator: true,
                     ngClick: "$state.go('inventories.editSmartInventory.completed_jobs')"
                 }
+            }, 
+            relatedButtons: {
+                network: {
+                    ngClick: 'goToGraph()',
+                    label: awxNetStrings.get('feature.ACTION_BUTTON'),
+                    class: 'Form-primaryButton',
+                    ngShow: "$state.is('inventories.editSmartInventory')"
+                }
             }
 
         };

awx/ui/client/src/inventories-hosts/inventories/standard-inventory/edit/inventory-edit.controller.js

@@ -99,6 +99,10 @@ function InventoriesEdit($scope, $location,
             });
     };
 
+    $scope.goToGraph = function(){
+        $state.go('inventories.edit.networking', {inventory_id: $scope.inventory_obj.id, inventory_name: $scope.inventory_obj.name});
+    };
+
     $scope.formCancel = function() {
         $state.go('inventories');
     };

awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js

@@ -10,8 +10,8 @@
  * @description This form is for adding/editing an inventory
  */
 
-export default ['i18n',
+export default ['i18n', 'awxNetStrings',
-function(i18n) {
+function(i18n, awxNetStrings) {
     return {
 
         addTitle: i18n._('NEW INVENTORY'),
@@ -174,9 +174,15 @@ function(i18n) {
             }
         },
         relatedButtons: {
+            network: {
+                ngClick: 'goToGraph()',
+                ngShow: "$state.is('inventories.edit')",
+                label: awxNetStrings.get('feature.ACTION_BUTTON'),
+                class: 'Form-primaryButton'
+            },
             remediate_inventory: {
                 ngClick: 'remediateInventory(id, insights_credential)',
-                ngShow: 'is_insights && mode !== "add" && canRemediate',
+                ngShow: "is_insights && mode !== 'add' && canRemediate && ($state.is('inventories.edit') || $state.is('inventories.edit.hosts'))",
                 label: i18n._('Remediate Inventory'),
                 class: 'Form-primaryButton'
             }

awx/ui/client/src/network-ui/fsm.js

@@ -22,7 +22,7 @@ function NullChannel(from_controller, tracer) {
 NullChannel.prototype.send = function() {
 };
 
-function FSMController (scope, name, initial_state, tracer) {
+function FSMController (scope, name, initial_state, tracer, log) {
     this.scope = scope;
     this.name = name;
     this.state = initial_state;
@@ -32,6 +32,7 @@ function FSMController (scope, name, initial_state, tracer) {
     this.handling_message_type = 'start';
     this.state.start(this);
     this.handling_message_type = null;
+    this.log = log; 
 }
 exports.FSMController = FSMController;
 

awx/ui/client/src/network-ui/inventory_toolbox.partial.svg

@@ -91,6 +91,7 @@
 <text
     class="NetworkUI__toolbox--title"
     filter="url(#background)"
+    ng-if="toolbox.enabled"
     ng-attr-transform="translate({{toolbox.title_coordinates.x}},{{toolbox.title_coordinates.y}})">
         {{toolbox.name}}
 </text>

awx/ui/client/src/network-ui/move.fsm.js

@@ -174,7 +174,7 @@ _Ready.prototype.onPasteDevice = function (controller, msg_type, message) {
     }
     scope.selected_devices.push(device);
     device.selected = true;
-    console.log(c_messages);
+    controller.log.debug(c_messages);
     scope.$emit('awxNet-addSearchOption', device);
     scope.send_control_message(new messages.MultipleMessage(controller.scope.client_id, c_messages));
     controller.changeState(Selected2);

awx/ui/client/src/network-ui/network-details/details.controller.js

@@ -14,7 +14,7 @@
             };
         }
         $scope.codeMirror = new codemirror();
- 		$scope.formCancel = function(){
+ 		$scope.formClose = function(){
             $scope.$parent.$broadcast('awxNet-closeDetailsPanel');
  		};
         $scope.strings = strings;

awx/ui/client/src/network-ui/network-details/details.partial.html

@@ -40,7 +40,7 @@
         </div>
     </form>
     <div class="buttons Form-buttons" id="host_controls">
-        <button type="button" class="btn btn-sm Form-cancelButton" id="host_cancel_btn" ng-click="formCancel()"> {{strings.get('details.CANCEL')}}</button>
+        <button type="button" class="btn btn-sm Form-cancelButton" id="host_cancel_btn" ng-click="formClose()"> {{strings.get('details.CLOSE')}}</button>
     </div>
     <div class="Networking-saveConfirmation" ng-show="saveConfirmed">
         {{strings.get('details.SAVE_COMPLETE')}} <i class="fa fa-check-circle"></i>

awx/ui/client/src/network-ui/network-nav/main.js

@@ -1,54 +1,6 @@
-import NetworkingController from './network.nav.controller';
-
 const MODULE_NAME = 'at.features.networking';
 
-const networkNavTemplate = require('~network-ui/network-nav/network.nav.view.html');
-
-function NetworkingResolve ($stateParams, resourceData) {
-    const resolve = {
-        inventory: {
-            id: $stateParams.inventory_id,
-            name: $stateParams.inventory_name
-        },
-        canEdit: resourceData.data.summary_fields.user_capabilities.edit
-    };
-    if (!resolve.inventory.name) {
-        resolve.inventory.name = resourceData.data.name;
-    }
-    return resolve;
-}
-
-NetworkingResolve.$inject = [
-    '$stateParams',
-    'resourceData'
-];
-function NetworkingRun ($stateExtender, strings) {
-    $stateExtender.addState({
-        name: 'inventories.edit.networking',
-        route: '/networking',
-        ncyBreadcrumb: {
-            label: strings.get('state.BREADCRUMB_LABEL')
-        },
-        views: {
-            'networking@': {
-                templateUrl: networkNavTemplate,
-                controller: NetworkingController,
-                controllerAs: 'vm'
-            }
-        },
-        resolve: {
-            resolvedModels: NetworkingResolve
-        }
-    });
-}
-
-NetworkingRun.$inject = [
-    '$stateExtender',
-    'awxNetStrings'
-];
-
 angular
-    .module(MODULE_NAME, [])
+    .module(MODULE_NAME, []);
-    .run(NetworkingRun);
 
 export default MODULE_NAME;

awx/ui/client/src/network-ui/network-nav/network.nav.controller.js

@@ -1,15 +1,12 @@
 /* eslint-disable */
-function NetworkingController (models, $state, $scope, strings) {
+function NetworkingController (canEdit, inventory, $state, $scope, strings) {
     const vm = this || {};
 
-    const {
-        inventory
-    } = models;
     vm.networkUIisOpen = true;
     vm.strings = strings;
     vm.panelTitle = `${strings.get('state.BREADCRUMB_LABEL')} | ${inventory.name}`;
     vm.hostDetail = {};
-    vm.canEdit = models.canEdit;
+    vm.canEdit = canEdit;
     vm.rightPanelIsExpanded = false;
     vm.leftPanelIsExpanded = true;
     vm.keyPanelExpanded = false;
@@ -131,7 +128,8 @@ function NetworkingController (models, $state, $scope, strings) {
 }
 
 NetworkingController.$inject = [
-    'resolvedModels',
+    'canEdit',
+    'inventory',
     '$state',
     '$scope',
     'awxNetStrings',

awx/ui/client/src/network-ui/network.ui.app.js

@@ -5,7 +5,6 @@ import networkDetailsDirective from './network-details/main';
 import networkZoomWidget from './zoom-widget/main';
 import awxNetStrings from './network.ui.strings';
 
-//console.log = function () { };
 var NetworkUIController = require('./network.ui.controller.js');
 var cursor = require('./cursor.directive.js');
 var router = require('./router.directive.js');

awx/ui/client/src/network-ui/network.ui.controller.js

@@ -42,7 +42,7 @@ var NetworkUIController = function($scope,
   $scope.topology_id = 0;
   // Create a web socket to connect to the backend server
 
-  $scope.inventory_id = $state.params.inventory_id;
+  $scope.inventory_id = $scope.$parent.$resolve.inventory.id;
 
   var protocol = null;
 
@@ -153,7 +153,7 @@ var NetworkUIController = function($scope,
                  from_y: 0,
                  to_x: 0,
                  to_y: 0};
-  $scope.canEdit = $scope.$parent.$resolve.resolvedModels.canEdit;
+  $scope.canEdit = $scope.$parent.$resolve.canEdit;
   $scope.strings = awxNetStrings;
   $scope.send_trace_message = function (message) {
         if (!$scope.recording) {
@@ -194,17 +194,17 @@ var NetworkUIController = function($scope,
     };
 
   //Define the FSMs
-  $scope.hotkeys_controller = new fsm.FSMController($scope, "hotkeys_fsm", hotkeys.Start, $scope);
+  $scope.hotkeys_controller = new fsm.FSMController($scope, "hotkeys_fsm", hotkeys.Start, $scope, $log);
-  $scope.keybindings_controller = new fsm.FSMController($scope, "keybindings_fsm", keybindings.Start, $scope);
+  $scope.keybindings_controller = new fsm.FSMController($scope, "keybindings_fsm", keybindings.Start, $scope, $log);
-  $scope.view_controller = new fsm.FSMController($scope, "view_fsm", view.Start, $scope);
+  $scope.view_controller = new fsm.FSMController($scope, "view_fsm", view.Start, $scope, $log);
-  $scope.move_controller = new fsm.FSMController($scope, "move_fsm", move.Start, $scope);
+  $scope.move_controller = new fsm.FSMController($scope, "move_fsm", move.Start, $scope, $log);
-  $scope.move_readonly_controller = new fsm.FSMController($scope, "move_readonly_fsm", move_readonly.Start, $scope);
+  $scope.move_readonly_controller = new fsm.FSMController($scope, "move_readonly_fsm", move_readonly.Start, $scope, $log);
-  $scope.details_panel_controller = new fsm.FSMController($scope, "details_panel_fsm", details_panel_fsm.Start, $scope);
+  $scope.details_panel_controller = new fsm.FSMController($scope, "details_panel_fsm", details_panel_fsm.Start, $scope, $log);
-  $scope.buttons_controller = new fsm.FSMController($scope, "buttons_fsm", buttons.Start, $scope);
+  $scope.buttons_controller = new fsm.FSMController($scope, "buttons_fsm", buttons.Start, $scope, $log);
-  $scope.time_controller = new fsm.FSMController($scope, "time_fsm", time.Start, $scope);
+  $scope.time_controller = new fsm.FSMController($scope, "time_fsm", time.Start, $scope, $log);
-  $scope.test_controller = new fsm.FSMController($scope, "test_fsm", test_fsm.Start, $scope);
+  $scope.test_controller = new fsm.FSMController($scope, "test_fsm", test_fsm.Start, $scope, $log);
 
-  $scope.inventory_toolbox_controller = new fsm.FSMController($scope, "toolbox_fsm", toolbox_fsm.Start, $scope);
+  $scope.inventory_toolbox_controller = new fsm.FSMController($scope, "toolbox_fsm", toolbox_fsm.Start, $scope, $log);
 
   var toolboxTopMargin = $('.Networking-top').height();
   var toolboxTitleMargin = toolboxTopMargin + 35;

awx/ui/client/src/network-ui/network.ui.route.js

@@ -0,0 +1,34 @@
+import { N_ } from '../i18n';
+import NetworkingController from './network-nav/network.nav.controller';
+
+const networkNavTemplate = require('~network-ui/network-nav/network.nav.view.html');
+
+export default {
+    name: 'inventories.edit.networking',
+    route: '/networking',
+    ncyBreadcrumb: {
+        label: N_("INVENTORIES")
+    },
+    views: {
+        'networking@': {
+            templateUrl: networkNavTemplate,
+            controller: NetworkingController,
+            controllerAs: 'vm'
+        }
+    },
+    resolve: {
+        inventory: ['$stateParams', 'resourceData', 
+            function($stateParams, resourceData){
+                let inventory = {
+                    name: $stateParams.inventory_name || resourceData.data.name,
+                    id: $stateParams.inventory_id || $stateParams.smartinventory_id
+                };
+                return inventory;
+        }],
+        canEdit: ['$stateParams', 'resourceData', 
+            function($stateParams, resourceData){
+                return resourceData.data.summary_fields.user_capabilities.edit;
+            }
+        ]
+    }
+};

awx/ui/client/src/network-ui/network.ui.strings.js

@@ -4,8 +4,12 @@ function awxNetStrings (BaseString) {
     const { t } = this;
     const ns = this.awxNet;
 
+    ns.feature = {
+        ACTION_BUTTON: t.s('Network Visualizer')
+    };
+
     ns.state = {
-        BREADCRUMB_LABEL: t.s('INVENTORIES')
+        BREADCRUMB_LABEL: t.s('NETWORK VISUALIZER')
     };
 
     ns.toolbox = {
@@ -13,7 +17,7 @@ function awxNetStrings (BaseString) {
     };
 
     ns.actions = {
-        ACTIONS: t.s('Actions'),
+        ACTIONS: t.s('ACTIONS'),
         EXPORT: t.s('Export'),
         EXPAND_PANEL: t.s('Expand Panel'),
         COLLAPSE_PANEL: t.s('Collapse Panel')
@@ -29,7 +33,7 @@ function awxNetStrings (BaseString) {
     };
 
     ns.search = {
-        SEARCH: t.s('Search'),
+        SEARCH: t.s('SEARCH'),
         HOST: t.s('Host'),
         SWITCH: t.s('Switch'),
         ROUTER: t.s('Router'),
@@ -46,7 +50,7 @@ function awxNetStrings (BaseString) {
         DESCRIPTION: t.s('Description'),
         HOST_POPOVER: t.s('Provide a host name, ip address, or ip address:port. Examples include:'),
         SAVE_COMPLETE: t.s('Save Complete'),
-        CANCEL: t.s('Cancel')
+        CLOSE: t.s('Close')
     };
 
 }

awx/ui/client/src/network-ui/test.fsm.js

@@ -117,7 +117,7 @@ _Reporting.prototype.start = function (controller) {
                                         new Date().toISOString(),
                                         controller.scope.version);
     controller.scope.test_results.push(test_result);
-    console.log(["Reporting test", test_result.name, test_result.id]);
+    controller.log.debug(["Reporting test", test_result.name, test_result.id]);
     controller.scope.send_test_message(new messages.TestResult(controller.scope.client_id,
                                                                test_result.id,
                                                                test_result.name,
@@ -125,7 +125,7 @@ _Reporting.prototype.start = function (controller) {
                                                                test_result.date,
                                                                test_result.code_under_test));
     if (typeof(window.__coverage__) !== "undefined" && window.__coverage__ !== null) {
-        console.log(["Reporting coverage", test_result.name, test_result.id]);
+        controller.log.debug(["Reporting coverage", test_result.name, test_result.id]);
         controller.scope.send_test_message(new messages.Coverage(controller.scope.client_id, window.__coverage__, test_result.id));
     }
     controller.changeState(Loading);
@@ -138,7 +138,7 @@ _Loading.prototype.start = function (controller) {
     if (controller.scope.current_tests.length === 0) {
         controller.changeState(Disabled);
     } else {
-        console.log("Starting test");
+        controller.log.debug("Starting test");
         controller.scope.reset_coverage();
         controller.scope.current_test = controller.scope.current_tests.shift();
         controller.scope.reset_toolboxes();
@@ -169,7 +169,7 @@ _Ready.prototype.start = function (controller) {
 
     var load_id = controller.scope.test_result_id_seq();
 
-    console.log(["Reporting Load", load_id]);
+    controller.log.debug(["Reporting Load", load_id]);
     controller.scope.send_test_message(new messages.TestResult(controller.scope.client_id,
                                                                load_id,
                                                                "Load",
@@ -177,7 +177,7 @@ _Ready.prototype.start = function (controller) {
                                                                new Date().toISOString(),
                                                                controller.scope.version));
     if (typeof(window.__coverage__) !== "undefined" && window.__coverage__ !== null) {
-        console.log(["Reporting Load Coverage", load_id]);
+        controller.log.debug(["Reporting Load Coverage", load_id]);
         controller.scope.send_test_message(new messages.Coverage(controller.scope.client_id, window.__coverage__, load_id));
     }
 

awx/ui/client/src/shared/socket/socket.service.js

@@ -150,7 +150,7 @@ export default
                 if(this.socket){
                     this.socket.close();
                     delete this.socket;
-                    console.log("Socket deleted: "+this.socket);
+                    $log.debug("Socket deleted: "+this.socket);
                 }
             },
             subscribe: function(state){