Adds network UI shell wrapper

* Adds networking icons, state, and shell
* Adds network UI to the network UI shell.
* Removes jquery as a dependency of network-ui
* Fills the entire viewport with the network canvas and
    makes header panel and the right panel overlay on
    top of it

awx/ui/client/features/_index.less

@@ -1,2 +1,3 @@
 @import 'credentials/_index';
 @import 'users/tokens/_index';
+@import 'networking/_index';

awx/ui/client/features/index.js

@@ -6,6 +6,7 @@ import atFeaturesApplications from '~features/applications';
 import atFeaturesCredentials from '~features/credentials';
 import atFeaturesTemplates from '~features/templates';
 import atFeaturesUsers from '~features/users';
+import atFeaturesNetworking from '~features/networking';
 
 const MODULE_NAME = 'at.features';
 
@@ -16,7 +17,8 @@ angular.module(MODULE_NAME, [
     atFeaturesApplications,
     atFeaturesCredentials,
     atFeaturesTemplates,
-    atFeaturesUsers
+    atFeaturesUsers,
+    atFeaturesNetworking
 ]);
 
 export default MODULE_NAME;

awx/ui/client/features/networking/_index.less

@@ -0,0 +1,72 @@
+.Networking-header{
+    border: 1px solid @at-color-panel-border;
+    display:flex;
+    height: 40px;
+    position: absolute;
+    width:100%;
+    background-color: @default-bg;
+}
+
+.Networking-headerTitle{
+    color: @default-interface-txt;
+    flex: 1 0 auto;
+    font-size: 14px;
+    font-weight: bold;
+    padding-left: 10px;
+    align-items: center;
+    display: flex;
+}
+
+.Netowrking-headerActions{
+    align-items: center;
+    display: flex;
+    flex: 1 0 auto;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    max-width: 100%;
+}
+
+.Networking-headerActionItem{
+    justify-content: flex-end;
+    display: flex;
+    padding-right: 10px;
+    font-size: 20px;
+}
+
+.Networking-actionButton{
+    font-size: 16px;
+    height: 30px;
+    min-width: 30px;
+    color: @default-icon;
+    background-color: inherit;
+    border: none;
+    border-radius: 50%;
+}
+
+.Networking-actionButton:hover{
+    background-color:@default-link;
+    color: @default-bg;
+}
+
+.Networking-panels{
+    display:flex;
+}
+
+.Networking-leftPanel{
+    width:100%
+}
+
+.Networking-rightPanel{
+    border-left: 1px solid @at-color-panel-border;
+    display:flex;
+    width:400px;
+    height: calc(~"100vh - 40px");
+    padding: 20px;
+    color: @default-interface-txt;
+    font-size: 14px;
+    font-weight: bold;
+    position: absolute;
+    top: 40px;
+    right: 0px;
+    background-color: @default-bg;
+}

awx/ui/client/features/networking/index.js

@@ -0,0 +1,55 @@
+import NetworkingController from './networking.controller';
+import NetworkingStrings from './networking.strings';
+
+const MODULE_NAME = 'at.features.networking';
+
+const networkingTemplate = require('~features/networking/networking.view.html');
+
+function NetworkingResolve ($stateParams, resourceData) {
+    const resolve = {
+        inventory: {
+            id: $stateParams.inventory_id,
+            name: $stateParams.inventory_name
+        }
+    };
+    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: networkingTemplate,
+                controller: NetworkingController,
+                controllerAs: 'vm'
+            }
+        },
+        resolve: {
+            resolvedModels: NetworkingResolve
+        }
+    });
+}
+
+NetworkingRun.$inject = [
+    '$stateExtender',
+    'NetworkingStrings'
+];
+
+angular
+    .module(MODULE_NAME, [])
+    .service('NetworkingStrings', NetworkingStrings)
+    .run(NetworkingRun);
+
+export default MODULE_NAME;

awx/ui/client/features/networking/networking.controller.js

@@ -0,0 +1,29 @@
+function NetworkingController (models, $state, $scope, strings) {
+    const vm = this || {};
+
+    const {
+        inventory
+    } = models;
+
+    vm.strings = strings;
+    vm.panelTitle = `${strings.get('state.BREADCRUMB_LABEL')} | ${inventory.name}`;
+
+    vm.panelIsExpanded = true;
+
+    vm.togglePanel = () => {
+        vm.panelIsExpanded = !vm.panelIsExpanded;
+    };
+
+    vm.close = () => {
+        $state.go('inventories');
+    };
+}
+
+NetworkingController.$inject = [
+    'resolvedModels',
+    '$state',
+    '$scope',
+    'NetworkingStrings'
+];
+
+export default NetworkingController;

awx/ui/client/features/networking/networking.strings.js

@@ -0,0 +1,19 @@
+function NetworkingStrings (BaseString) {
+    BaseString.call(this, 'networking');
+
+    const { t } = this;
+    const ns = this.networking;
+
+    ns.state = {
+        BREADCRUMB_LABEL: t.s('INVENTORIES'),
+    };
+
+    ns.actions = {
+        EXPAND_PANEL: t.s('Expand Panel'),
+        COLLAPSE_PANEL: t.s('Collapse Panel')
+    };
+}
+
+NetworkingStrings.$inject = ['BaseStringService'];
+
+export default NetworkingStrings;

awx/ui/client/features/networking/networking.view.html

@@ -0,0 +1,36 @@
+<div class="Networking-header">
+    <div class="Networking-headerTitle">{{vm.panelTitle}}</div>
+    <div class="Netowrking-headerActions">
+        <div class="Networking-headerActionItem">
+            <button class="Networking-actionButton"
+                aw-tool-tip="Expand Output"
+                data-placement="bottom"
+                data-original-title="Expand Output"
+                ng-click="vm.togglePanel()"
+                ng-hide="vm.panelIsExpanded">
+                    <i class="fa fa-chevron-left"></i>
+            </button>
+            <button class="Networking-actionButton"
+                aw-tool-tip="Collapse Output"
+                data-placement="left"
+                data-original-title="Collapse Output"
+                ng-click="vm.togglePanel()"
+                ng-hide="!vm.panelIsExpanded">
+                    <i class="fa fa-chevron-right"></i>
+            </button>
+        </div>
+        <div class="Networking-headerActionItem">
+            <button ng-click="vm.close()" type="button" class="close">
+				<i class="fa fa-times-circle"></i>
+			</button>
+        </div>
+    </div>
+</div>
+<div class="Networking-panels">
+    <div class="Networking-leftPanel">
+        <awx-network-ui></awx-network-ui>
+    </div>
+    <div class="Networking-rightPanel" ng-show="vm.panelIsExpanded">
+        VIEW LAYERS
+    </div>
+</div>

awx/ui/client/index.template.ejs

@@ -16,6 +16,7 @@
 </head>
 
 <body data-user-agent="{{userAgent}}">
+    <div ui-view="networking"><div>
     <at-layout>
         <bread-crumb></bread-crumb>
         <toast></toast>

awx/ui/client/lib/theme/index.less

@@ -170,3 +170,9 @@
  * the transition.
  */
 @import '_resets';
+
+/**
+ * Network Visualization Style
+ *
+ */
+@import '../../src/network_ui/style.less';

awx/ui/client/src/app.js

@@ -47,6 +47,8 @@ import atLibComponents from '~components';
 import atLibModels from '~models';
 import atLibServices from '~services';
 
+import network_ui from './network_ui/main';
+
 start.bootstrap(() => {
     angular.bootstrap(document.body, ['awApp']);
 });
@@ -97,6 +99,8 @@ angular
         users.name,
         projects.name,
         scheduler.name,
+        instanceGroups.name,
+        network_ui.tower.name,
 
         'Utilities',
         'templates',

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

@@ -93,6 +93,13 @@ export default ['i18n', function(i18n) {
 
         fieldActions: {
             columnClass: 'col-md-2 col-sm-3 col-xs-4',
+            network: {
+                label: i18n._('Network Visualization'),
+                ngClick: 'goToGraph(inventory)',
+                awToolTip: i18n._('Network Visualization'),
+                dataPlacement: 'top',
+                ngShow: '!inventory.pending_deletion && inventory.summary_fields.user_capabilities.edit'
+            },
             edit: {
                 label: i18n._('Edit'),
                 ngClick: 'editInventory(inventory)',

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

@@ -73,16 +73,10 @@ function InventoriesList($scope,
         inventory.linkToDetails = (inventory.kind && inventory.kind === 'smart') ? `inventories.editSmartInventory({smartinventory_id:${inventory.id}})` : `inventories.edit({inventory_id:${inventory.id}})`;
     }
 
-    $scope.copyInventory = inventory => {
-        Wait('start');
-        new Inventory('get', inventory.id)
-            .then(model => model.copy())
-            .then(copy => $scope.editInventory(copy))
-            .catch(({ data, status }) => {
-                const params = { hdr: 'Error!', msg: `Call to copy failed. Return status: ${status}` };
-                ProcessErrors($scope, data, status, null, params);
-            })
-            .finally(() => Wait('stop'));
+    $scope.goToGraph = function(inventory){
+         $state.go('inventories.edit.networking', {inventory_id: inventory.id, inventory_name: inventory.name});
+        // let url = $state.href('inventories.edit.networking', {inventory_id: inventory.id, inventory_name: inventory.name});
+        // window.open(url, '_blank');
     };
 
     $scope.editInventory = function (inventory) {

awx/ui/client/src/shared/generator-helpers.js

@@ -194,6 +194,9 @@ angular.module('GeneratorHelpers', [systemStatus.name])
             case 'insights':
                 icon = "fa-info";
                 break;
+            case 'network':
+                icon = "fa-sitemap";
+                break;
             case 'cancel':
                 icon = "fa-minus-circle";
                 break;

awx/ui/client/src/vendor.js

@@ -61,3 +61,11 @@ require('ng-toast-provider');
 require('ng-toast-directives');
 require('ng-toast');
 require('lr-infinite-scroll');
+
+// Network Visualization
+require('angular-mousewheel');
+require('angular-xeditable');
+require('hamsterjs');
+require('titlecase');
+require('inherits');
+require('mathjs');