mirror of
https://github.com/ansible/awx.git
synced 2026-01-29 23:34:42 -03:30
Merge pull request #2237 from jaredevantabor/networking
Network UI fixes
This commit is contained in:
commit
f38b01c80e
@ -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'
|
||||
},
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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)
|
||||
])
|
||||
};
|
||||
});
|
||||
|
||||
@ -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');
|
||||
};
|
||||
|
||||
@ -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')"
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -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');
|
||||
};
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
* @description This form is for adding/editing an inventory
|
||||
*/
|
||||
|
||||
export default ['i18n',
|
||||
function(i18n) {
|
||||
export default ['i18n', 'awxNetStrings',
|
||||
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'
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
};
|
||||
}
|
||||
$scope.codeMirror = new codemirror();
|
||||
$scope.formCancel = function(){
|
||||
$scope.formClose = function(){
|
||||
$scope.$parent.$broadcast('awxNet-closeDetailsPanel');
|
||||
};
|
||||
$scope.strings = strings;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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, [])
|
||||
.run(NetworkingRun);
|
||||
.module(MODULE_NAME, []);
|
||||
|
||||
export default MODULE_NAME;
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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.keybindings_controller = new fsm.FSMController($scope, "keybindings_fsm", keybindings.Start, $scope);
|
||||
$scope.view_controller = new fsm.FSMController($scope, "view_fsm", view.Start, $scope);
|
||||
$scope.move_controller = new fsm.FSMController($scope, "move_fsm", move.Start, $scope);
|
||||
$scope.move_readonly_controller = new fsm.FSMController($scope, "move_readonly_fsm", move_readonly.Start, $scope);
|
||||
$scope.details_panel_controller = new fsm.FSMController($scope, "details_panel_fsm", details_panel_fsm.Start, $scope);
|
||||
$scope.buttons_controller = new fsm.FSMController($scope, "buttons_fsm", buttons.Start, $scope);
|
||||
$scope.time_controller = new fsm.FSMController($scope, "time_fsm", time.Start, $scope);
|
||||
$scope.test_controller = new fsm.FSMController($scope, "test_fsm", test_fsm.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, $log);
|
||||
$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, $log);
|
||||
$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, $log);
|
||||
$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, $log);
|
||||
$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;
|
||||
|
||||
34
awx/ui/client/src/network-ui/network.ui.route.js
Normal file
34
awx/ui/client/src/network-ui/network.ui.route.js
Normal file
@ -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;
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
@ -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')
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
@ -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));
|
||||
}
|
||||
|
||||
|
||||
@ -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){
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user