Cleans up the Network UI after PR feedback and UX feedback

-removes stale commented-out lines -makes "unknown" type devices smaller on canvas -moves "unknown" type device title underneath icon -removes collapsed inventory toolbox -changes "Delete" to "Remove" -removes the "Close" button for "Cancel" on details panel -changing Remove color to red
2026-01-16 12:20:45 -03:30 · 2018-03-16 13:22:33 -05:00 · 2018-03-16 13:22:33 -05:00 · abb95fdad6
commit abb95fdad6
parent 0e32644a27
10 changed files with 82 additions and 80 deletions
--- a/awx/ui/client/src/inventories-hosts/inventories/inventory.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/inventory.list.js
@ -98,7 +98,7 @@ export default ['i18n', function(i18n) {
                ngClick: 'goToGraph(inventory)',
                awToolTip: i18n._('Network Visualization'),
                dataPlacement: 'top',
-                ngShow: '!inventory.pending_deletion && inventory.summary_fields.user_capabilities.edit'
+                ngShow: '!inventory.pending_deletion'
            },
            edit: {
                label: i18n._('Edit'),
--- a/awx/ui/client/src/inventories-hosts/inventories/list/inventory-list.controller.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/list/inventory-list.controller.js
@ -84,11 +84,9 @@ function InventoriesList($scope,
            })
            .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) {
--- a/awx/ui/client/src/network-ui/context_menu_button.partial.svg
+++ b/awx/ui/client/src/network-ui/context_menu_button.partial.svg
@ -5,7 +5,13 @@
    ng-attr-width={{contextMenuButton.width-2}}
    ng-attr-height={{contextMenuButton.height}}>
 </rect>
-<text ng-attr-class="{{contextMenuButton.is_pressed ? 'NetworkUI__contextMenuButtonText-pressed' : contextMenuButton.mouse_over ? 'NetworkUI__contextMenuButtonText-hover' : 'NetworkUI__contextMenuButtonText'}}"
+<text ng-show="contextMenuButton.name !=='Remove'" ng-attr-class="{{contextMenuButton.is_pressed ? 'NetworkUI__contextMenuButtonText-pressed' : contextMenuButton.mouse_over ? 'NetworkUI__contextMenuButtonText-hover' : 'NetworkUI__contextMenuButtonText'}}"
+    x=15
+    ng-attr-y="{{(contextMenuButton.height * $parent.$index) + 18}}"
+    dy=".3em"
+    text-anchor="left">{{contextMenuButton.name}}
+</text>
+<text ng-show="contextMenuButton.name ==='Remove'" ng-attr-class="{{contextMenuButton.is_pressed ? 'NetworkUI__contextMenuRemoveButtonText-pressed' : contextMenuButton.mouse_over ? 'NetworkUI__contextMenuRemoveButtonText-hover' : 'NetworkUI__contextMenuRemoveButtonText'}}"
    x=15
    ng-attr-y="{{(contextMenuButton.height * $parent.$index) + 18}}"
    dy=".3em"
--- a/awx/ui/client/src/network-ui/default.partial.svg
+++ b/awx/ui/client/src/network-ui/default.partial.svg
@ -1,54 +1,56 @@
 <!-- Copyright (c) 2017 Red Hat, Inc. -->

+<g transform="scale(0.75)">
+    <g ng-if="item.moving">
+    <line ng-attr-x1="{{-50 - 100}}"
+           ng-attr-y1="0"
+           ng-attr-x2="{{50 + 100}}"
+           ng-attr-y2="0"
+           class="NetworkUI--construction"></line>
+     <line ng-attr-x1="0"
+           ng-attr-y1="{{-50 - 100}}"
+           ng-attr-x2="0"
+           ng-attr-y2="{{50 + 100}}"
+           class="NetworkUI--construction"></line>
+    </g>

-                    <g ng-if="item.moving">
-                    <line ng-attr-x1="{{-50 - 100}}"
-                           ng-attr-y1="0"
-                           ng-attr-x2="{{50 + 100}}"
-                           ng-attr-y2="0"
-                           class="NetworkUI--construction"></line>
-                     <line ng-attr-x1="0"
-                           ng-attr-y1="{{-50 - 100}}"
-                           ng-attr-x2="0"
-                           ng-attr-y2="{{50 + 100}}"
-                           class="NetworkUI--construction"></line>
-                    </g>
-
-                    <g ng-if="!debug.hidden">
-                     <line ng-attr-x1="{{-50 - 10}}"
-                           ng-attr-y1="0"
-                           ng-attr-x2="{{50 + 10}}"
-                           ng-attr-y2="0"
-                           class="NetworkUI--debug"></rect>
-                     <line ng-attr-x1="0"
-                           ng-attr-y1="{{-50 - 10}}"
-                           ng-attr-x2="0"
-                           ng-attr-y2="{{50 + 10}}"
-                           class="NetworkUI--debug"></rect>
-                     <rect ng-attr-x="{{-50}}"
-                           ng-attr-y="{{-50}}"
-                           ng-attr-width="{{50 * 2}}"
-                           ng-attr-height="{{50 * 2}}"
-                           class="NetworkUI--debug"></rect>
-                    </g>
-                    <g class="NetworkUI__device">
-                    <circle
-                        cx="0"
-                        cy="0"
-                        ng-attr-r="{{50 + 2}}"
-                        ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__device--selected-conflict' : item.selected ? 'NetworkUI__device--selected' : 'NetworkUI__device--remote-selected' : 'NetworkUI--hidden'}}">
-                    </circle>
-                    <circle
-                        cx="0"
-                        cy="0"
-                        ng-attr-r="{{50}}">
-                    </circle>
-                    </g>
-                    <g ng-show="item.icon || current_scale > 0.5">
-                    <text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__device-text--selected' : 'NetworkUI--hidden'}}"
-						  filter="url(#selected)"
-                          text-anchor="middle"
-						  x="0"
-						  y="0"> {{item.name}} </text>
-                    <text class="NetworkUI__device-text" text-anchor="middle" x="0" y="0">{{item.name}}{{item.edit_label?'_':''}}</text>
-                    </g>
+    <g ng-if="!debug.hidden">
+     <line ng-attr-x1="{{-50 - 10}}"
+           ng-attr-y1="0"
+           ng-attr-x2="{{50 + 10}}"
+           ng-attr-y2="0"
+           class="NetworkUI--debug"></rect>
+     <line ng-attr-x1="0"
+           ng-attr-y1="{{-50 - 10}}"
+           ng-attr-x2="0"
+           ng-attr-y2="{{50 + 10}}"
+           class="NetworkUI--debug"></rect>
+     <rect ng-attr-x="{{-50}}"
+           ng-attr-y="{{-50}}"
+           ng-attr-width="{{50 * 2}}"
+           ng-attr-height="{{50 * 2}}"
+           class="NetworkUI--debug"></rect>
+    </g>
+    <g class="NetworkUI__device">
+    <circle
+        cx="0"
+        cy="0"
+        ng-attr-r="{{50 + 2}}"
+        ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__device--selected-conflict' : item.selected ? 'NetworkUI__device--selected' : 'NetworkUI__device--remote-selected' : 'NetworkUI--hidden'}}">
+    </circle>
+    <circle
+        cx="0"
+        cy="0"
+        ng-attr-r="{{50}}">
+    </circle>
+    </g>
+    <g ng-show="item.icon || current_scale > 0.5">
+    <text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__device-text--selected' : 'NetworkUI--hidden'}}"
+          filter="url(#background)"
+          text-anchor="middle"
+          x="0"
+          y="73"> {{item.name}}
+    </text>
+    <text class="NetworkUI__device-text" filter="url(#background)" text-anchor="middle" x="0" y="73">{{item.name}}{{item.edit_label?'_':''}}</text>
+    </g>
+</g>
--- a/awx/ui/client/src/network-ui/inventory_toolbox.partial.svg
+++ b/awx/ui/client/src/network-ui/inventory_toolbox.partial.svg
@ -1,21 +1,4 @@
 <!-- Copyright (c) 2017 Red Hat, Inc. -->
-
-<g ng-if="!hide_menus">
-<!-- begin collapsed toolbox -->
-<g ng-if="overall_toolbox_collapsed">
-<rect class="NetworkUI__toolbox-collapsed"
-      x=0
-      ng-attr-y={{toolbox.y}}
-      width=45
-      ng-attr-height={{toolbox.height}}>
-</rect>
-<g awx-net-chevron-right-icon
-    action-icon="action_icons[1]"
-    ng-if="overall_toolbox_collapsed"
-    ng-attr-transform="translate({{action_icons[1].x}}, {{action_icons[1].y}})"></g>
-</g>
-<!-- end collapsed toolbox -->
-
 <g ng-if="toolbox.enabled">
 <rect class="NetworkUI__toolbox"
      ng-attr-x="{{toolbox.x}}"
--- a/awx/ui/client/src/network-ui/network-details/details.partial.html
+++ b/awx/ui/client/src/network-ui/network-details/details.partial.html
@ -34,8 +34,8 @@
            <awx-net-extra-vars item="item"></awx-net-extra-vars>
        </div>
    </form>
-    <div class="buttons Form-buttons" id="host_controls" ng-show="item.host_id">
-        <button type="button" class="btn btn-sm Form-cancelButton" id="host_cancel_btn" ng-show="(item.summary_fields.user_capabilities.edit || canAdd)" ng-click="formCancel()"> Cancel</button>
+    <div class="buttons Form-buttons" id="host_controls">
+        <button type="button" class="btn btn-sm Form-cancelButton" id="host_cancel_btn" ng-click="formCancel()"> Cancel</button>
    </div>
    <div class="Networking-saveConfirmation" ng-show="saveConfirmed">
        Save Complete <i class="fa fa-check-circle"></i>
--- a/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.block.less
+++ b/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.block.less
@ -13,6 +13,7 @@
    font-weight: normal;
    color: @default-link;
    cursor: pointer;
+    font-size: 12px;
 }

 .noselect {
--- a/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.partial.html
+++ b/awx/ui/client/src/network-ui/network-details/network-extra-vars/network-extra-vars.partial.html
@ -20,7 +20,7 @@
                </div>
            </div>
        </div>
-        <div class="NetworkingExtraVars-expandTextContainer" ng-click="openExtraVarsModal()">Expand</div>
+        <div class="NetworkingExtraVars-expandTextContainer" ng-click="openExtraVarsModal()">EXPAND</div>
    </label>
 <textarea readonly rows="6" disabled="disabled" ng-model="variables" name="variables" class="form-control Form-textArea Form-formGroup--fullWidth" id="network_host_variables"></textarea>

--- a/awx/ui/client/src/network-ui/network.ui.controller.js
+++ b/awx/ui/client/src/network-ui/network.ui.controller.js
@ -873,7 +873,7 @@ var NetworkUIController = function($scope,
    // Context Menu Buttons
    $scope.context_menu_buttons = [
        new models.ContextMenuButton("Details", 236, 231, 160, 26, $scope.onDetailsContextButton, $scope),
-        new models.ContextMenuButton("Delete", 256, 231, 160, 26, $scope.onDeleteContextMenu, $scope)
+        new models.ContextMenuButton("Remove", 256, 231, 160, 26, $scope.onDeleteContextMenu, $scope)
    ];

    // Context Menus
--- a/awx/ui/client/src/network-ui/style.less
+++ b/awx/ui/client/src/network-ui/style.less
@ -128,18 +128,18 @@

 .NetworkUI__router--selected {
    stroke: @selected-blue;
-    stroke-width: 4;
+    stroke-width: 10;
    fill:@light-background;
 }

 .NetworkUI__router--remote-selected {
    stroke: @selected-mango;
-    stroke-width: 4;
+    stroke-width: 10;
 }

 .NetworkUI__router--selected-conflict {
    stroke: @selected-red;
-    stroke-width: 4;
+    stroke-width: 10;
 }

 .NetworkUI__router-text {
@ -672,6 +672,18 @@
    fill:@button-body-hover;
 }

+.NetworkUI__contextMenuRemoveButtonText{
+    fill: @red;
+    font-family: 'Open Sans';
+    font-size: 14px;
+}
+
+.NetworkUI__contextMenuRemoveButtonText-hover{
+    fill: @red;
+    font-family: 'Open Sans';
+    font-size: 14px;
+}
+
 .NetworkUI__test_results {
    fill: @light-background;
    stroke: @dark-widget-detail;