mirror of
https://github.com/ansible/awx.git
synced 2026-01-13 02:50:02 -03:30
Adds context menus for group, racks, and sites
* Adds context menu for a rack, and adding more error handling for
items that don't exist in Tower
* Adds context menu for sites
* Adds handler for showing details for links and interfaces
* Fixes the removed "watchCollection" in order to update details panel
* Removes the context menu when changing the scale of the canvas
* Adds delete context menu button, as well as refactoring the delete
functionality to the network.ui.controller.js
* Updates delete functionality to delete nested groups/devices
if the current_scale is set to site or rack icons
* Adds context menu to a group
* Hides rack/site title in top left of group, as well as centering
labels on all icons
* Moves the context menu off screen when disabling it
* Adds unique name to hosts, routers, switches, and groups
* Makes the names of host/switch/router/group SVG elements so they update when
the user updates the name of the SVG element
* Removing svg buttons and adding new html toolbar
* Adds panel for Jump To feature, along with basic functionality
* Adds Key dropdown for hotkeys and adding browser refresh hotkey
* Adds breadcrumb bar and making adjustments after feedback with UX
* Rearrages panels and adding some resize logic
* Fixes z-index of key-panel and jump-to panel
* Adds white background to text underneath icons
* Makes all icons blue
* Changes sizes and colors of icons. Also made icon text background white
* Adjusts sizes of rack and site icons within group boundary
This commit is contained in:
Ben Thomasson
parent
7f0b23c357
commit
2736aecfb2
@ -1,8 +1,20 @@
|
||||
.Networking-shell{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
width:100%;
|
||||
align-items: flex-end;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.Networking-top{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.Networking-header{
|
||||
border: 1px solid @at-color-panel-border;
|
||||
border-top: 1px solid @at-color-panel-border;
|
||||
border-bottom: 1px solid @at-color-panel-border;
|
||||
display:flex;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
width:100%;
|
||||
background-color: @default-bg;
|
||||
}
|
||||
@ -12,7 +24,7 @@
|
||||
flex: 1 0 auto;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding-left: 10px;
|
||||
padding-left: 20px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
@ -29,45 +41,50 @@
|
||||
.Networking-headerActionItem{
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
padding-right: 10px;
|
||||
padding-right: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.Networking-actionButton{
|
||||
.Networking-toolbarIcon{
|
||||
font-size: 16px;
|
||||
height: 30px;
|
||||
min-width: 30px;
|
||||
color: @default-icon;
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
border-radius: 5px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.Networking-actionButton:hover{
|
||||
.Networking-toolbarIcon:hover{
|
||||
background-color:@default-link;
|
||||
color: @default-bg;
|
||||
}
|
||||
|
||||
.Networking-panels{
|
||||
display:flex;
|
||||
.Networking-toolbarIcon--selected{
|
||||
background-color:@default-link;
|
||||
color: @default-bg;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
.Networking-leftPanel{
|
||||
.Networking-canvasPanel{
|
||||
width:100%
|
||||
}
|
||||
|
||||
.Networking-rightPanel{
|
||||
.Networking-detailPanel{
|
||||
border-left: 1px solid @at-color-panel-border;
|
||||
border-bottom: 1px solid @at-color-panel-border;
|
||||
width:400px;
|
||||
height: calc(~"100vh - 40px");
|
||||
height: calc(~"100vh - 115px");
|
||||
padding: 20px;
|
||||
color: @default-interface-txt;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0px;
|
||||
background-color: @default-bg;
|
||||
position: absolute;
|
||||
top:115px;
|
||||
right:0px;
|
||||
}
|
||||
|
||||
|
||||
@ -86,11 +103,8 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.Networking-resultRow {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
.Networking-resultRowLabel{
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.Networking-resultRow--variables {
|
||||
@ -100,3 +114,166 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.Networking-noItems{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.Networking-toolbar{
|
||||
min-height: 40px;
|
||||
width:100%;
|
||||
background-color: #ebebeb;
|
||||
display:flex;
|
||||
flex: 1 0 auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.Networking-breadCrumbBar{
|
||||
background-color: white;
|
||||
min-height: 35px;
|
||||
border-bottom: 1px solid @at-color-panel-border;
|
||||
border-top: 1px solid @at-color-panel-border;
|
||||
align-items: center;
|
||||
padding-left:20px;
|
||||
}
|
||||
|
||||
.Networking-breadCrumbText{
|
||||
color:@default-link;
|
||||
}
|
||||
|
||||
.Networking-toolbarLeftSide--expanded{
|
||||
width: calc(~"100% - 201px");
|
||||
// margin-left:201px;
|
||||
left:201px;
|
||||
}
|
||||
|
||||
.Networking-toolbarBothPanels--expanded{
|
||||
width: calc(~"100% - 601px");
|
||||
// margin-right:400px;
|
||||
left:201px;
|
||||
}
|
||||
|
||||
.Networking-toolbarRightSide--expanded{
|
||||
width: calc(~"100% - 445px");
|
||||
}
|
||||
|
||||
.Networking-toolbarButton{
|
||||
margin: 4px 20px 5px 0px;
|
||||
text-transform: uppercase;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
color: #707070;
|
||||
border: 1px solid #B7B7B7;
|
||||
cursor: pointer;
|
||||
min-width: 70px;
|
||||
min-height: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.Networking-toolbarButton:hover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.Networking-toolbarLeftSide{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.Networking-toolbarRightSide{
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
min-width: 400px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.Networking-searchBarContainer{
|
||||
height: 30px
|
||||
}
|
||||
|
||||
.Networking-searchButton{
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.Networking-searchButton i{
|
||||
color:#848992
|
||||
}
|
||||
|
||||
.Networking-jumpToDropDownPanel{
|
||||
width: 150px;
|
||||
padding: 10px 0px 10px 0px;
|
||||
border: 1px solid #b7b7b7;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
background-color: white;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.Networking-dropdownPanelTitle{
|
||||
color: #707070;
|
||||
padding-left:15px;
|
||||
min-height: 30px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.Networking-jumpToPanelOption{
|
||||
color: #707070;
|
||||
padding-left:15px;
|
||||
min-height: 30px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.Networking-jumpToPanelOption:hover{
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.Networking-jumpToContainer,
|
||||
.Networking-keyContainer{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.Networking-keyDropDownPanel{
|
||||
width: 180px;
|
||||
padding: 10px 0px 10px 0px;
|
||||
border: 1px solid #b7b7b7;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
right:0px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.Networking-keyPanelOption{
|
||||
color: #707070;
|
||||
padding-left:15px;
|
||||
min-height: 30px;
|
||||
font-size: 12px;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.Networking-keySymbol{
|
||||
background-color: #848992;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.Networking-keySymbolLabel{
|
||||
font-size: 12px;
|
||||
padding-left: 15px;
|
||||
color: #707070
|
||||
}
|
||||
|
||||
@ -7,30 +7,51 @@ function NetworkingController (models, $state, $scope, strings) {
|
||||
|
||||
vm.strings = strings;
|
||||
vm.panelTitle = `${strings.get('state.BREADCRUMB_LABEL')} | ${inventory.name}`;
|
||||
vm.hostDetail = false;
|
||||
|
||||
vm.panelIsExpanded = false;
|
||||
|
||||
vm.togglePanel = () => {
|
||||
vm.panelIsExpanded = !vm.panelIsExpanded;
|
||||
};
|
||||
vm.hostDetail = {};
|
||||
|
||||
vm.rightPanelIsExpanded = false;
|
||||
vm.leftPanelIsExpanded = true;
|
||||
vm.jumpToPanelExpanded = false;
|
||||
vm.keyPanelExpanded = false;
|
||||
vm.close = () => {
|
||||
$state.go('inventories');
|
||||
};
|
||||
|
||||
$scope.$on('closeDetailsPanel', () => {
|
||||
vm.panelIsExpanded = false;
|
||||
vm.redirectButtonHandler = (string) => {
|
||||
$scope.$broadcast('toolbarButtonEvent', string);
|
||||
};
|
||||
|
||||
vm.jumpTo = (string) => {
|
||||
vm.jumpToPanelExpanded = !vm.jumpToPanelExpanded;
|
||||
vm.keyPanelExpanded = false;
|
||||
if (string) {
|
||||
$scope.$broadcast('jumpTo', string);
|
||||
}
|
||||
};
|
||||
|
||||
vm.key = () => {
|
||||
vm.keyPanelExpanded = !vm.keyPanelExpanded;
|
||||
vm.jumpToPanelExpanded = false;
|
||||
};
|
||||
|
||||
$scope.$on('overall_toolbox_collapsed', () => {
|
||||
vm.leftPanelIsExpanded = !vm.leftPanelIsExpanded;
|
||||
});
|
||||
|
||||
$scope.$on('retrievedHostData', (e, hostData, expand) => {
|
||||
$scope.$on('closeDetailsPanel', () => {
|
||||
vm.rightPanelIsExpanded = false;
|
||||
vm.jumpToPanelExpanded = false;
|
||||
vm.keyPanelExpanded = false;
|
||||
});
|
||||
|
||||
$scope.$on('showDetails', (e, data, expand) => {
|
||||
if (expand) {
|
||||
vm.panelIsExpanded = true;
|
||||
vm.rightPanelIsExpanded = true;
|
||||
}
|
||||
if (_.isEmpty(hostData)) {
|
||||
$scope.hostDetail = false;
|
||||
if (!_.has(data, 'host_id')) {
|
||||
$scope.item = data;
|
||||
} else {
|
||||
$scope.hostDetail = hostData;
|
||||
$scope.item = data;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,91 +1,180 @@
|
||||
<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">
|
||||
|
||||
<div ng-if="hostDetail===false">
|
||||
NO HOST DETAIL
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-if="hostDetail!==false">
|
||||
<!--beginning of header-->
|
||||
<div class="Networking-panelHeader">
|
||||
<div class="JobResults-panelHeaderText" translate="">
|
||||
DETAILS
|
||||
<div class="Networking-shell">
|
||||
<div class="Networking-top">
|
||||
<div class="Networking-header">
|
||||
<div class="Networking-headerTitle">{{vm.panelTitle}}</div>
|
||||
<div class="Netowrking-headerActions">
|
||||
<div class="Networking-headerActionItem">
|
||||
<button ng-click="vm.close()" type="button" class="close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--end of header-->
|
||||
</div>
|
||||
<div class="Networking-toolbar">
|
||||
<div class="Networking-toolbarLeftSide">
|
||||
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('Record')">RECORD</button>
|
||||
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('Export')">EXPORT</button>
|
||||
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('Layout')">LAYOUT</button>
|
||||
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('ExportYaml')">EXPORT YAML</button>
|
||||
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('DownloadTrace')">DOWNLOAD TRACE</button>
|
||||
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('DownloadRecording')">DOWNLOAD RECORDING</button>
|
||||
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('UploadTest')">UPLOAD TEST</button>
|
||||
<button class="Networking-toolbarButton" ng-click="vm.redirectButtonHandler('RunTests')">RUN TESTS</button>
|
||||
</div>
|
||||
<div class="Networking-toolbarRightSide">
|
||||
<div class="SmartSearch-searchTermContainer Networking-searchBarContainer">
|
||||
<!-- string search input -->
|
||||
<form name="smartSearch" class="SmartSearch-form ng-pristine ng-valid" aw-enter-key="addTerm(searchTerm)" novalidate="">
|
||||
<input class="SmartSearch-input ng-pristine ng-valid ng-empty ng-touched" ng-model="searchTerm" placeholder="Search" ng-disabled="disableSearch">
|
||||
</form>
|
||||
<div type="submit" class="SmartSearch-searchButton Networking-searchButton" ng-disabled="!searchTerm" ng-click="addTerm(searchTerm)" disabled="disabled">
|
||||
<i class="fa fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Networking-keyContainer">
|
||||
<button ng-click="vm.key()" type="button" class="Networking-toolbarIcon" ng-class="{'Networking-toolbarIcon--selected' : vm.keyPanelExpanded}">
|
||||
<i class="fa fa-key"></i>
|
||||
</button>
|
||||
<div class="Networking-keyDropDownPanel" ng-if="vm.keyPanelExpanded">
|
||||
<div class="Networking-dropdownPanelTitle">
|
||||
KEY
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">e</div>
|
||||
<div class="Networking-keySymbolLabel">NEW SITE</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">a</div>
|
||||
<div class="Networking-keySymbolLabel">NEW RACK</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">g</div>
|
||||
<div class="Networking-keySymbolLabel">NEW GROUP</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">r</div>
|
||||
<div class="Networking-keySymbolLabel">NEW ROUTER</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">s</div>
|
||||
<div class="Networking-keySymbolLabel">NEW SWITCH</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">h</div>
|
||||
<div class="Networking-keySymbolLabel">NEW HOST</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">l</div>
|
||||
<div class="Networking-keySymbolLabel">NEW LINK</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">m</div>
|
||||
<div class="Networking-keySymbolLabel">NEW STREAM</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">d</div>
|
||||
<div class="Networking-keySymbolLabel">DEBUG MODE</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">p</div>
|
||||
<div class="Networking-keySymbolLabel">HIDE CURSOR</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">b</div>
|
||||
<div class="Networking-keySymbolLabel">HIDE BUTTONS</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">i</div>
|
||||
<div class="Networking-keySymbolLabel">HIDE INTERFACES</div>
|
||||
</div>
|
||||
<div class="Networking-keyPanelOption">
|
||||
<div class="Networking-keySymbol">0</div>
|
||||
<div class="Networking-keySymbolLabel">RESET ZOOM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Networking-jumpToContainer">
|
||||
<button ng-click="vm.jumpTo()" type="button" class="Networking-toolbarIcon" ng-class="{'Networking-toolbarIcon--selected' : vm.jumpToPanelExpanded}">
|
||||
<i class="fa fa-dot-circle-o"></i>
|
||||
</button>
|
||||
<div class="Networking-jumpToDropDownPanel" ng-if="vm.jumpToPanelExpanded">
|
||||
<div class="Networking-dropdownPanelTitle">
|
||||
JUMP TO
|
||||
</div>
|
||||
<div class="Networking-jumpToPanelOption" ng-click="vm.jumpTo('site')">
|
||||
SITE
|
||||
</div>
|
||||
<div class="Networking-jumpToPanelOption" ng-click="vm.jumpTo('rack')">
|
||||
RACK
|
||||
</div>
|
||||
<div class="Networking-jumpToPanelOption" ng-click="vm.jumpTo('inventory')">
|
||||
INVENTORY
|
||||
</div>
|
||||
<div class="Networking-jumpToPanelOption" ng-click="vm.jumpTo('process')">
|
||||
PROCESS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Networking-toolbar Networking-breadCrumbBar">
|
||||
<div class="Networking-breadCrumbText">foo-bar</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--beginning of name row -->
|
||||
<div class="JobResults-resultRow">
|
||||
<label class="JobResults-resultRowLabel" translate="">
|
||||
Name
|
||||
</label>
|
||||
<div class="JobResults-resultRowText">
|
||||
{{hostDetail.name}}
|
||||
</div>
|
||||
</div>
|
||||
<!--end of name row -->
|
||||
<div class="Networking-detailPanel" ng-show="vm.rightPanelIsExpanded">
|
||||
<!--beginning of header-->
|
||||
<div class="Networking-panelHeader">
|
||||
<div class="JobResults-panelHeaderText" translate="">
|
||||
DETAILS <span ng-if="!item.host_id && item.name">| {{item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--end of header-->
|
||||
|
||||
<!-- beginning of extra variable row -->
|
||||
<div class="JobResults-resultRow JobResults-resultRow--variables" ng-show="hostDetail.variables">
|
||||
<label class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth">
|
||||
<span translate>
|
||||
Extra Variables
|
||||
</span>
|
||||
<i class="JobResults-extraVarsHelp fa fa-question-circle"
|
||||
aw-tool-tip="{{'Read only view of extra variables added to the job template.' | translate}}"
|
||||
data-placement="top">
|
||||
</i>
|
||||
</label>
|
||||
<textarea
|
||||
rows="6"
|
||||
ng-model="hostDetail.variables"
|
||||
name="variables"
|
||||
class="form-control Form-textArea Form-textAreaLabel Form-formGroup--fullWidth"
|
||||
id="pre-formatted-variables"
|
||||
disabled="disabled">
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- end of extra variable row -->
|
||||
<!--beginning of name row -->
|
||||
<div class="JobResults-resultRow" ng-if="item.host_id">
|
||||
<label class="JobResults-resultRowLabel Networking-resultRowLabel" translate="">
|
||||
Name
|
||||
</label>
|
||||
<div class="JobResults-resultRowText">
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
<!--end of name row -->
|
||||
|
||||
<div class="List-noItems Networking-noItems" ng-if="!item.host_id">
|
||||
{{item.type}} DETAILS NOT AVAILABLE
|
||||
</div>
|
||||
|
||||
<!-- beginning of extra variable row -->
|
||||
<div class="JobResults-resultRow JobResults-resultRow--variables" ng-show="item.variables">
|
||||
<label class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth">
|
||||
<span translate>
|
||||
Extra Variables
|
||||
</span>
|
||||
<i class="JobResults-extraVarsHelp fa fa-question-circle"
|
||||
aw-tool-tip="{{'Read only view of extra variables added to the job template.' | translate}}"
|
||||
data-placement="top">
|
||||
</i>
|
||||
</label>
|
||||
<textarea
|
||||
rows="6"
|
||||
ng-model="item.variables"
|
||||
name="variables"
|
||||
class="form-control Form-textArea Form-textAreaLabel Form-formGroup--fullWidth"
|
||||
id="pre-formatted-variables"
|
||||
disabled="disabled">
|
||||
</textarea>
|
||||
</div>
|
||||
<!-- end of extra variable row -->
|
||||
</div>
|
||||
|
||||
|
||||
<div class="Networking-canvasPanel">
|
||||
<awx-network-ui></awx-network-ui>
|
||||
</div>
|
||||
<!--end of Networking-rightPanel -->
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
<circle
|
||||
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI__iconBackground--pressed' : actionIcon.mouse_over ? 'NetworkUI_iconBackground--hover' : 'NetworkUI_iconBackground'}}"
|
||||
class="NetworkUI_iconBackground"
|
||||
cx=10 cy=9 r=16 />
|
||||
<rect
|
||||
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI__iconBackground--pressed' : actionIcon.mouse_over ? 'NetworkUI__iconBackground--hover' : 'NetworkUI__iconBackground'}}"
|
||||
class="NetworkUI__iconBackground"
|
||||
width=30
|
||||
height=30
|
||||
rx=5
|
||||
ry=5
|
||||
x=-4
|
||||
y=-6 />
|
||||
<path
|
||||
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI_chevron--pressed' : actionIcon.mouse_over ? 'NetworkUI_chevron--hover' : 'NetworkUI_chevron'}}"
|
||||
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI__chevron--pressed' : actionIcon.mouse_over ? 'NetworkUI__chevron--hover' : 'NetworkUI__chevron'}}"
|
||||
ng-attr-transform="scale(0.01)"
|
||||
d="M1427 301l-531 531 531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19l-742-742q-19-19-19-45t19-45l742-742q19-19 45-19t45 19l166 166q19 19 19 45t-19 45z"/>
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
<circle
|
||||
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI__iconBackground--pressed' : actionIcon.mouse_over ? 'NetworkUI_iconBackground--hover' : 'NetworkUI_iconBackground'}}"
|
||||
cx=8 cy=9 r=16 />
|
||||
<rect
|
||||
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI__iconBackground--pressed' : actionIcon.mouse_over ? 'NetworkUI__iconBackground--hover' : 'NetworkUI__iconBackground'}}"
|
||||
width=30
|
||||
height=30
|
||||
rx=5
|
||||
ry=5
|
||||
x=-5
|
||||
y=-6 />
|
||||
<path
|
||||
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI_chevron--pressed' : actionIcon.mouse_over ? 'NetworkUI_chevron--hover' : 'NetworkUI_chevron'}}"
|
||||
ng-attr-class="{{actionIcon.is_pressed ? 'NetworkUI__chevron--pressed' : actionIcon.mouse_over ? 'NetworkUI__chevron--hover' : 'NetworkUI__chevron'}}"
|
||||
ng-attr-transform="scale(0.01)"
|
||||
d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"/>
|
||||
|
||||
@ -88,6 +88,13 @@ inherits(_Placing, _State);
|
||||
var Placing = new _Placing();
|
||||
exports.Placing = Placing;
|
||||
|
||||
function _ContextMenu () {
|
||||
this.name = 'ContextMenu';
|
||||
}
|
||||
inherits(_ContextMenu, _State);
|
||||
var ContextMenu = new _ContextMenu();
|
||||
exports.ContextMenu = ContextMenu;
|
||||
|
||||
_State.prototype.onUnselectAll = function (controller, msg_type, $event) {
|
||||
|
||||
controller.changeState(Ready);
|
||||
@ -244,12 +251,21 @@ _Selected3.prototype.onMouseMove = function (controller) {
|
||||
};
|
||||
_Selected3.prototype.onMouseMove.transitions = ['Move'];
|
||||
|
||||
_Selected3.prototype.onMouseUp = function (controller) {
|
||||
_Selected3.prototype.onMouseUp = function (controller, msg_type, $event) {
|
||||
let context_menu = controller.scope.context_menus[0];
|
||||
context_menu.enabled = true;
|
||||
context_menu.x = $event.x;
|
||||
context_menu.y = $event.y;
|
||||
context_menu.buttons.forEach(function(button, index){
|
||||
button.x = $event.x;
|
||||
let menuPaddingTop = 5;
|
||||
button.y = $event.y + menuPaddingTop + (button.height * index);
|
||||
});
|
||||
|
||||
controller.changeState(EditLabel);
|
||||
controller.changeState(ContextMenu);
|
||||
|
||||
};
|
||||
_Selected3.prototype.onMouseUp.transitions = ['EditLabel'];
|
||||
_Selected3.prototype.onMouseUp.transitions = ['ContextMenu'];
|
||||
|
||||
|
||||
_Move.prototype.onMouseMove = function (controller) {
|
||||
@ -505,27 +521,7 @@ _Selected2.prototype.onKeyDown = function (controller, msg_type, $event) {
|
||||
|
||||
if ($event.keyCode === 8) {
|
||||
//Delete
|
||||
controller.changeState(Ready);
|
||||
|
||||
var i = 0;
|
||||
var index = -1;
|
||||
var groups = controller.scope.selected_groups;
|
||||
controller.scope.selected_groups = [];
|
||||
for (i = 0; i < groups.length; i++) {
|
||||
index = controller.scope.groups.indexOf(groups[i]);
|
||||
if (index !== -1) {
|
||||
groups[i].selected = false;
|
||||
groups[i].remote_selected = false;
|
||||
controller.scope.groups.splice(index, 1);
|
||||
}
|
||||
controller.scope.send_control_message(new messages.GroupDestroy(controller.scope.client_id,
|
||||
groups[i].id,
|
||||
groups[i].x1,
|
||||
groups[i].y1,
|
||||
groups[i].x2,
|
||||
groups[i].y2,
|
||||
groups[i].name));
|
||||
}
|
||||
controller.scope.deleteGroup();
|
||||
} else {
|
||||
controller.delegate_channel.send(msg_type, $event);
|
||||
}
|
||||
@ -575,3 +571,22 @@ _Placing.prototype.onMouseDown = function (controller) {
|
||||
};
|
||||
_Placing.prototype.onMouseDown.transitions = ['Resize'];
|
||||
|
||||
|
||||
_ContextMenu.prototype.end = function (controller) {
|
||||
|
||||
controller.scope.removeContextMenu();
|
||||
};
|
||||
|
||||
_ContextMenu.prototype.onLabelEdit = function (controller) {
|
||||
|
||||
controller.changeState(EditLabel);
|
||||
|
||||
};
|
||||
_ContextMenu.prototype.onLabelEdit.transitions = ['EditLabel'];
|
||||
|
||||
_ContextMenu.prototype.onMouseDown = function (controller) {
|
||||
|
||||
controller.changeState(Ready);
|
||||
|
||||
};
|
||||
_ContextMenu.prototype.onMouseDown.transitions = ['Ready'];
|
||||
|
||||
@ -114,19 +114,18 @@
|
||||
ng-attr-x="{{item.left_extent(scaledX)}}"
|
||||
ng-attr-y="{{item.top_extent(scaledY)}}"
|
||||
class="NetworkUI__group"/>
|
||||
|
||||
<g ng-attr-transform="translate({{item.left_extent(scaledX)}},{{item.top_extent(scaledY)}})">
|
||||
<g ng-if="current_scale > 0.5 || item.type == 'site' || item.type == 'rack'">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__group-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
text-anchor="left"
|
||||
x="20"
|
||||
y="32"> {{item.name}} </text>
|
||||
<text class="NetworkUI__group-text" text-anchor="left" x="20" y="32">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
<g ng-if="current_scale > 0.5 && item.type == 'group'">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__group-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#background)"
|
||||
text-anchor="left"
|
||||
x="20"
|
||||
y="32"> {{item.name}} </text>
|
||||
<text class="NetworkUI__group-text" filter="url(#background)" text-anchor="left" x="20" y="32">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
|
||||
<g awx-net-rack></g>
|
||||
<g awx-net-site></g>
|
||||
<g awx-net-rack></g>
|
||||
<g awx-net-site></g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
@ -1,87 +1,89 @@
|
||||
<!-- Copyright (c) 2017 Red Hat, Inc. -->
|
||||
<g transform="scale(0.75)">
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-40"
|
||||
x2="0"
|
||||
y2="40"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-40"
|
||||
x2="0"
|
||||
y2="40"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-30"
|
||||
width="100"
|
||||
height="60"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-30)">
|
||||
<rect
|
||||
ry=15
|
||||
rx=15
|
||||
width=100
|
||||
height=60
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__host--selected-conflict' : item.selected ? 'NetworkUI__host--selected' : 'NetworkUI__host--remote-selected' : 'NetworkUI__host--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__host"
|
||||
d="M17.8,14.7c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,14.7,17.8,14.7z"/>
|
||||
<path
|
||||
class="NetworkUI__host"
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v11.5C0,25.8,4.2,30,9.2,30h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
|
||||
C50,4.2,45.8,0,40.8,0z M37.8,17.9c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8V13c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8
|
||||
V17.9z"/>
|
||||
<path
|
||||
class="NetworkUI__host"
|
||||
d="M36,12.5H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,12.7,36.3,12.5,36,12.5z M17.8,17.2c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,17.2,17.8,17.2z
|
||||
M28.2,17.1h-0.9c-0.3,0-0.6-0.2-0.6-0.6s0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,16.8,28.6,17.1,28.2,17.1z M28.2,14.9
|
||||
h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,14.7,28.6,14.9,28.2,14.9z M30.9,17.1H30
|
||||
c-0.3,0-0.6-0.2-0.6-0.6s0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,16.8,31.3,17.1,30.9,17.1z M30.9,14.9H30
|
||||
c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6S31.3,14.9,30.9,14.9z M33.6,17.1h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6s0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,16.8,33.9,17.1,33.6,17.1z M33.6,14.9h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-30"
|
||||
width="100"
|
||||
height="60"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-30)">
|
||||
<rect
|
||||
ry=20
|
||||
rx=20
|
||||
width=100
|
||||
height=60
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__host--selected-conflict' : item.selected ? 'NetworkUI__host--selected' : 'NetworkUI__host--remote-selected' : 'NetworkUI__host--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__host"
|
||||
d="M17.8,14.7c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,14.7,17.8,14.7z"/>
|
||||
<path
|
||||
class="NetworkUI__host"
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v11.5C0,25.8,4.2,30,9.2,30h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
|
||||
C50,4.2,45.8,0,40.8,0z M37.8,17.9c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8V13c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8
|
||||
V17.9z"/>
|
||||
<path
|
||||
class="NetworkUI__host"
|
||||
d="M36,12.5H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,12.7,36.3,12.5,36,12.5z M17.8,17.2c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,17.2,17.8,17.2z
|
||||
M28.2,17.1h-0.9c-0.3,0-0.6-0.2-0.6-0.6s0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,16.8,28.6,17.1,28.2,17.1z M28.2,14.9
|
||||
h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,14.7,28.6,14.9,28.2,14.9z M30.9,17.1H30
|
||||
c-0.3,0-0.6-0.2-0.6-0.6s0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,16.8,31.3,17.1,30.9,17.1z M30.9,14.9H30
|
||||
c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6S31.3,14.9,30.9,14.9z M33.6,17.1h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6s0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,16.8,33.9,17.1,33.6,17.1z M33.6,14.9h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-show="item.icon || current_scale > 0.5">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__host-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
x="0"
|
||||
y="50"> {{item.name}}
|
||||
</text>
|
||||
<text class="NetworkUI__host-text" filter="url(#background)" text-anchor="middle" x="0" y="50">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-show="item.icon || current_scale > 0.5">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__host-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
x="-25"
|
||||
y="50"> {{item.name}}
|
||||
</text>
|
||||
<text class="NetworkUI__host-text" x="-25" y="50">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
|
||||
@ -48,6 +48,10 @@ _Enabled.prototype.onKeyDown = function(controller, msg_type, $event) {
|
||||
scope.first_channel.send("CopySelected", $event);
|
||||
}
|
||||
|
||||
if ($event.key === 'r' && ($event.ctrlKey || $event.metaKey)) {
|
||||
location.reload();
|
||||
}
|
||||
|
||||
if ($event.key === 'l') {
|
||||
scope.first_channel.send("NewLink", $event);
|
||||
return;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<g ng-if="overall_toolbox_collapsed">
|
||||
<rect class="NetworkUI__toolbox-collapsed"
|
||||
x=0
|
||||
y=40
|
||||
ng-attr-y={{toolbox.y}}
|
||||
width=45
|
||||
ng-attr-height={{toolbox.height}}>
|
||||
</rect>
|
||||
|
||||
@ -68,13 +68,13 @@
|
||||
rotate({{-link.slope()}})
|
||||
translate(0, -5)
|
||||
">
|
||||
<text ng-attr-class="{{link.selected && ! link.edit_label ? 'selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
<text ng-attr-class="{{link.selected && ! link.edit_label ? 'NetworkUI__interface-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
font-size="8"
|
||||
x="0"
|
||||
y="0"> {{link.name}}</text>
|
||||
<text class="NetworkUI__link-text" text-anchor="middle" x="0" y="0">{{link.name}}{{link.edit_label?'_':''}}</text>
|
||||
<text class="NetworkUI__link-text" filter="url(#background)" text-anchor="middle" x="0" y="0">{{link.name}}{{link.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
|
||||
<g ng-if="current_scale > 1.0 && link.to_device !== null"
|
||||
@ -85,12 +85,12 @@
|
||||
rotate({{-link.slope()}})
|
||||
">
|
||||
<text ng-attr-class="{{link.from_interface.selected && ! link.from_interface.edit_label ? 'NetworkUI__interface-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
font-size="8"
|
||||
x="0"
|
||||
y="0"> {{link.from_interface.name}}</text>
|
||||
<text class="NetworkUI__interface-text" text-anchor="middle" x="0" y="0">{{link.from_interface.name}}{{link.from_interface.edit_label ?'_':''}}</text>
|
||||
<text class="NetworkUI__interface-text" filter="url(#background)" text-anchor="middle" x="0" y="0">{{link.from_interface.name}}{{link.from_interface.edit_label ?'_':''}}</text>
|
||||
</g>
|
||||
|
||||
<g ng-if="current_scale > 1.0 && link.to_device !== null"
|
||||
@ -101,11 +101,11 @@
|
||||
rotate({{-link.slope()}})
|
||||
">
|
||||
<text ng-attr-class="{{link.to_interface.selected && ! link.to_interface.edit_label ? 'NetworkUI__interface-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
x="0"
|
||||
y="0"> {{link.to_interface.name}}</text>
|
||||
<text class="NetworkUI__interface-text" text-anchor="middle" x="0" y="0">{{link.to_interface.name}}{{link.to_interface.edit_label?'_':''}}</text>
|
||||
<text class="NetworkUI__interface-text" filter="url(#background)" text-anchor="middle" x="0" y="0">{{link.to_interface.name}}{{link.to_interface.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
<g ng-if="current_scale > 1.0 && link.to_device !== null">
|
||||
<circle ng-attr-cx="{{link.from_interface.dot_x}}"
|
||||
|
||||
@ -10,9 +10,9 @@ function Device(id, name, x, y, type, host_id) {
|
||||
this.name = name;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.height = type === "host" ? 30 : 50;
|
||||
this.width = 50;
|
||||
this.size = 50;
|
||||
this.height = type === "host" ? 20 : 37.5;
|
||||
this.width = 37.5;
|
||||
this.size = 37.5;
|
||||
this.type = type;
|
||||
this.selected = false;
|
||||
this.remote_selected = false;
|
||||
|
||||
@ -207,10 +207,13 @@ _Ready.prototype.onMouseDown = function (controller, msg_type, $event) {
|
||||
|
||||
if (last_selected.last_selected_device !== null) {
|
||||
controller.changeState(Selected1);
|
||||
controller.scope.onDetailsContextButton();
|
||||
} else if (last_selected.last_selected_link !== null) {
|
||||
controller.changeState(Selected1);
|
||||
controller.scope.onDetailsContextButton();
|
||||
} else if (last_selected.last_selected_interface !== null) {
|
||||
controller.changeState(Selected1);
|
||||
controller.scope.onDetailsContextButton();
|
||||
} else {
|
||||
controller.delegate_channel.send(msg_type, $event);
|
||||
}
|
||||
@ -295,53 +298,7 @@ _Selected2.prototype.onKeyDown = function (controller, msg_type, $event) {
|
||||
|
||||
if ($event.keyCode === 8) {
|
||||
//Delete
|
||||
controller.changeState(Ready);
|
||||
|
||||
var i = 0;
|
||||
var j = 0;
|
||||
var index = -1;
|
||||
var devices = controller.scope.selected_devices;
|
||||
var links = controller.scope.selected_links;
|
||||
var all_links = controller.scope.links.slice();
|
||||
controller.scope.selected_devices = [];
|
||||
controller.scope.selected_links = [];
|
||||
for (i = 0; i < links.length; i++) {
|
||||
index = controller.scope.links.indexOf(links[i]);
|
||||
if (index !== -1) {
|
||||
links[i].selected = false;
|
||||
links[i].remote_selected = false;
|
||||
controller.scope.links.splice(index, 1);
|
||||
controller.scope.send_control_message(new messages.LinkDestroy(controller.scope.client_id,
|
||||
links[i].id,
|
||||
links[i].from_device.id,
|
||||
links[i].to_device.id,
|
||||
links[i].from_interface.id,
|
||||
links[i].to_interface.id,
|
||||
links[i].name));
|
||||
}
|
||||
}
|
||||
for (i = 0; i < devices.length; i++) {
|
||||
index = controller.scope.devices.indexOf(devices[i]);
|
||||
if (index !== -1) {
|
||||
controller.scope.devices.splice(index, 1);
|
||||
controller.scope.send_control_message(new messages.DeviceDestroy(controller.scope.client_id,
|
||||
devices[i].id,
|
||||
devices[i].x,
|
||||
devices[i].y,
|
||||
devices[i].name,
|
||||
devices[i].type,
|
||||
devices[i].host_id));
|
||||
}
|
||||
for (j = 0; j < all_links.length; j++) {
|
||||
if (all_links[j].to_device === devices[i] ||
|
||||
all_links[j].from_device === devices[i]) {
|
||||
index = controller.scope.links.indexOf(all_links[j]);
|
||||
if (index !== -1) {
|
||||
controller.scope.links.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
controller.scope.deleteDevice();
|
||||
}
|
||||
|
||||
controller.delegate_channel.send(msg_type, $event);
|
||||
@ -534,8 +491,10 @@ _Placing.prototype.onMouseMove = function (controller) {
|
||||
_Placing.prototype.onMouseMove.transitions = ['Move'];
|
||||
|
||||
|
||||
_ContextMenu.prototype.end = function (controller) {
|
||||
|
||||
|
||||
controller.scope.removeContextMenu();
|
||||
};
|
||||
|
||||
_ContextMenu.prototype.onLabelEdit = function (controller) {
|
||||
|
||||
@ -546,8 +505,6 @@ _ContextMenu.prototype.onLabelEdit.transitions = ['EditLabel'];
|
||||
|
||||
_ContextMenu.prototype.onMouseDown = function (controller) {
|
||||
|
||||
var item = controller.scope.context_menus[0];
|
||||
item.enabled = false;
|
||||
controller.changeState(Ready);
|
||||
|
||||
};
|
||||
|
||||
@ -38,9 +38,17 @@ var NetworkUIController = function($scope, $document, $location, $window, $http,
|
||||
|
||||
$scope.inventory_id = $state.params.inventory_id;
|
||||
|
||||
var protocol = null;
|
||||
|
||||
if ($location.protocol() === 'http') {
|
||||
protocol = 'ws';
|
||||
} else if ($location.protocol() === 'https') {
|
||||
protocol = 'wss';
|
||||
}
|
||||
|
||||
$scope.initial_messages = [];
|
||||
if (!$scope.disconnected) {
|
||||
$scope.control_socket = new ReconnectingWebSocket("wss://" + window.location.host + "/network_ui/topology?inventory_id=" + $scope.inventory_id,
|
||||
$scope.control_socket = new ReconnectingWebSocket(protocol + "://" + window.location.host + "/network_ui/topology?inventory_id=" + $scope.inventory_id,
|
||||
null,
|
||||
{debug: false, reconnectInterval: 300});
|
||||
} else {
|
||||
@ -159,8 +167,12 @@ var NetworkUIController = function($scope, $document, $location, $window, $http,
|
||||
$scope.app_toolbox_controller = new fsm.FSMController($scope, "toolbox_fsm", toolbox_fsm.Start, $scope);
|
||||
|
||||
//App Toolbox Setup
|
||||
$scope.app_toolbox = new models.ToolBox(0, 'Process', 'app', 0, 40, 200, $scope.graph.height - 40);
|
||||
$scope.app_toolbox.title_coordinates = {x: 70, y: 70};
|
||||
// const toolboxTopMargin = 115;
|
||||
var toolboxTopMargin = $('.Networking-top').height();
|
||||
var toolboxTitleMargin = toolboxTopMargin + 35;
|
||||
var toolboxHeight = $scope.graph.height - $('.Networking-top').height();
|
||||
$scope.app_toolbox = new models.ToolBox(0, 'Process', 'app', 0, toolboxTopMargin, 200, toolboxHeight);
|
||||
$scope.app_toolbox.title_coordinates = {x: 70, y: toolboxTitleMargin};
|
||||
$scope.app_toolbox.spacing = 150;
|
||||
$scope.app_toolbox.enabled = false;
|
||||
$scope.app_toolbox_controller.toolbox = $scope.app_toolbox;
|
||||
@ -182,7 +194,7 @@ var NetworkUIController = function($scope, $document, $location, $window, $http,
|
||||
|
||||
|
||||
//Inventory Toolbox Setup
|
||||
$scope.inventory_toolbox = new models.ToolBox(0, 'Inventory', 'device', 0, 40, 200, $scope.graph.height - 40);
|
||||
$scope.inventory_toolbox = new models.ToolBox(0, 'Inventory', 'device', 0, toolboxTopMargin, 200, toolboxHeight);
|
||||
if (!$scope.disconnected) {
|
||||
console.log($location.protocol() + "://" + $location.host() + ':' + $location.port());
|
||||
console.log($scope.my_location);
|
||||
@ -210,7 +222,7 @@ var NetworkUIController = function($scope, $document, $location, $window, $http,
|
||||
}
|
||||
$scope.inventory_toolbox.spacing = 150;
|
||||
$scope.inventory_toolbox.enabled = true;
|
||||
$scope.inventory_toolbox.title_coordinates = {x: 60, y: 70};
|
||||
$scope.inventory_toolbox.title_coordinates = {x: 60, y: toolboxTitleMargin};
|
||||
$scope.inventory_toolbox_controller.toolbox = $scope.inventory_toolbox;
|
||||
$scope.inventory_toolbox_controller.remove_on_drop = true;
|
||||
$scope.inventory_toolbox_controller.debug = true;
|
||||
@ -221,8 +233,8 @@ var NetworkUIController = function($scope, $document, $location, $window, $http,
|
||||
//End Inventory Toolbox Setup
|
||||
$scope.rack_toolbox_controller = new fsm.FSMController($scope, "toolbox_fsm", toolbox_fsm.Start, $scope);
|
||||
//Rack Toolbox Setup
|
||||
$scope.rack_toolbox = new models.ToolBox(0, 'Rack', 'rack', 0, 40, 200, $scope.graph.height - 40);
|
||||
$scope.rack_toolbox.title_coordinates = {x: 80, y: 70};
|
||||
$scope.rack_toolbox = new models.ToolBox(0, 'Rack', 'rack', 0, toolboxTopMargin, 200, toolboxHeight);
|
||||
$scope.rack_toolbox.title_coordinates = {x: 80, y: toolboxTitleMargin};
|
||||
$scope.rack_toolbox.spacing = 200;
|
||||
$scope.rack_toolbox.enabled = false;
|
||||
$scope.rack_toolbox_controller.remove_on_drop = false;
|
||||
@ -238,8 +250,8 @@ var NetworkUIController = function($scope, $document, $location, $window, $http,
|
||||
//End Rack Toolbox Setup
|
||||
$scope.site_toolbox_controller = new fsm.FSMController($scope, "toolbox_fsm", toolbox_fsm.Start, $scope);
|
||||
//Site Toolbox Setup
|
||||
$scope.site_toolbox = new models.ToolBox(0, 'Sites', 'sites', 0, 40, 200, $scope.graph.height - 40);
|
||||
$scope.site_toolbox.title_coordinates = {x: 80, y: 70};
|
||||
$scope.site_toolbox = new models.ToolBox(0, 'Sites', 'sites', 0, toolboxTopMargin, 200, toolboxHeight);
|
||||
$scope.site_toolbox.title_coordinates = {x: 80, y: toolboxTitleMargin};
|
||||
$scope.site_toolbox.spacing = 200;
|
||||
$scope.site_toolbox.enabled = false;
|
||||
$scope.site_toolbox_controller.remove_on_drop = false;
|
||||
@ -576,40 +588,194 @@ var NetworkUIController = function($scope, $document, $location, $window, $http,
|
||||
$document.bind("keydown", $scope.onKeyDown);
|
||||
|
||||
// Conext Menu Button Handlers
|
||||
|
||||
$scope.removeContextMenu = function(){
|
||||
let context_menu = $scope.context_menus[0];
|
||||
context_menu.enabled = false;
|
||||
context_menu.x = -100000;
|
||||
context_menu.y = -100000;
|
||||
context_menu.buttons.forEach(function(button, index){
|
||||
button.enabled = false;
|
||||
button.x = -100000;
|
||||
button.y = -100000;
|
||||
});
|
||||
}
|
||||
|
||||
$scope.onDetailsContextButton = function (panelBoolean) {
|
||||
if (!$scope.disconnected) {
|
||||
if ($scope.selected_items.length === 1){
|
||||
if ($scope.selected_items[0].host_id === 0){
|
||||
$scope.$emit('retrievedHostData', {}, panelBoolean !== null ? panelBoolean: true);
|
||||
$scope.removeContextMenu();
|
||||
// show details for devices
|
||||
if ($scope.selected_devices.length === 1){
|
||||
|
||||
// following block is intended for devices added in the network UI but not in Tower
|
||||
if ($scope.selected_devices[0].host_id === 0){
|
||||
let host = $scope.selected_devices[0];
|
||||
$scope.update_toolbox_heights();
|
||||
$scope.$emit('showDetails', host, panelBoolean !== null ? panelBoolean: true);
|
||||
}
|
||||
if ($scope.selected_items[0].host_id !== 0){
|
||||
let host_id = $scope.selected_items[0].host_id;
|
||||
|
||||
// following block is intended for devices that are saved in the API
|
||||
if ($scope.selected_devices[0].host_id !== 0){
|
||||
let host_id = $scope.selected_devices[0].host_id;
|
||||
let url = `/api/v2/hosts/${host_id}/`;
|
||||
$http.get(url)
|
||||
.then(function(response) {
|
||||
let host = response.data;
|
||||
$scope.$emit('retrievedHostData', host, panelBoolean !== null ? panelBoolean: true);
|
||||
$scope.context_menus[0].enabled = false;
|
||||
host.host_id = host.id;
|
||||
$scope.update_toolbox_heights();
|
||||
$scope.$emit('showDetails', host, panelBoolean !== null ? panelBoolean: true);
|
||||
|
||||
})
|
||||
.catch(({data, status}) => {
|
||||
ProcessErrors($scope, data, status, null, { hdr: 'Error!', msg: 'Failed to get host data: ' + status });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// show details for interfaces
|
||||
else if($scope.selected_interfaces.length === 1){
|
||||
let selected_interface = $scope.selected_interfaces[0];
|
||||
$scope.update_toolbox_heights();
|
||||
$scope.$emit('showDetails', selected_interface, panelBoolean !== null ? panelBoolean: true);
|
||||
}
|
||||
|
||||
// show details for links
|
||||
else if($scope.selected_links.length === 1){
|
||||
let link = $scope.selected_links[0];
|
||||
$scope.update_toolbox_heights();
|
||||
$scope.$emit('showDetails', link, panelBoolean !== null ? panelBoolean: true);
|
||||
}
|
||||
|
||||
//show details for groups, racks, and sites
|
||||
else if ($scope.selected_groups.length === 1){
|
||||
let group = $scope.selected_groups[0];
|
||||
$scope.update_toolbox_heights();
|
||||
$scope.$emit('showDetails', group, panelBoolean !== null ? panelBoolean: true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.onRenameContextButton = function (button) {
|
||||
$scope.context_menus[0].enabled = false;
|
||||
$scope.removeContextMenu();
|
||||
$scope.first_channel.send("LabelEdit", {});
|
||||
};
|
||||
|
||||
$scope.deleteDevice = function(){
|
||||
var i = 0;
|
||||
var j = 0;
|
||||
var index = -1;
|
||||
var devices = $scope.selected_devices;
|
||||
var links = $scope.selected_links;
|
||||
var all_links = $scope.links.slice();
|
||||
$scope.selected_devices = [];
|
||||
$scope.selected_links = [];
|
||||
$scope.move_controller.changeState(move.Ready);
|
||||
for (i = 0; i < links.length; i++) {
|
||||
index = $scope.links.indexOf(links[i]);
|
||||
if (index !== -1) {
|
||||
links[i].selected = false;
|
||||
links[i].remote_selected = false;
|
||||
$scope.links.splice(index, 1);
|
||||
$scope.send_control_message(new messages.LinkDestroy($scope.client_id,
|
||||
links[i].id,
|
||||
links[i].from_device.id,
|
||||
links[i].to_device.id,
|
||||
links[i].from_interface.id,
|
||||
links[i].to_interface.id,
|
||||
links[i].name));
|
||||
}
|
||||
}
|
||||
for (i = 0; i < devices.length; i++) {
|
||||
index = $scope.devices.indexOf(devices[i]);
|
||||
if (index !== -1) {
|
||||
$scope.devices.splice(index, 1);
|
||||
$scope.send_control_message(new messages.DeviceDestroy($scope.client_id,
|
||||
devices[i].id,
|
||||
devices[i].x,
|
||||
devices[i].y,
|
||||
devices[i].name,
|
||||
devices[i].type,
|
||||
devices[i].host_id));
|
||||
}
|
||||
for (j = 0; j < all_links.length; j++) {
|
||||
if (all_links[j].to_device === devices[i] ||
|
||||
all_links[j].from_device === devices[i]) {
|
||||
index = $scope.links.indexOf(all_links[j]);
|
||||
if (index !== -1) {
|
||||
$scope.links.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.deleteGroup = function(){
|
||||
var i = 0;
|
||||
var index = -1;
|
||||
var selected_groups = $scope.selected_groups;
|
||||
$scope.selected_groups = [];
|
||||
$scope.group_controller.changeState(group.Ready);
|
||||
|
||||
function removeSingleGroup(group){
|
||||
index = $scope.groups.indexOf(group);
|
||||
if (index !== -1) {
|
||||
group.selected = false;
|
||||
group.remote_selected = false;
|
||||
$scope.groups.splice(index, 1);
|
||||
}
|
||||
$scope.send_control_message(new messages.GroupDestroy($scope.client_id,
|
||||
group.id,
|
||||
group.x1,
|
||||
group.y1,
|
||||
group.x2,
|
||||
group.y2,
|
||||
group.name));
|
||||
}
|
||||
|
||||
if($scope.current_scale <= 0.5){
|
||||
// current scale is in racks mode or sites mode
|
||||
for (i = 0; i < selected_groups.length; i++) {
|
||||
let group = selected_groups[i];
|
||||
if(group.groups.length > 0){
|
||||
for(var k = 0; k < group.groups.length; k++){
|
||||
let nested_group = group.groups[k];
|
||||
removeSingleGroup(nested_group);
|
||||
}
|
||||
}
|
||||
// remove all the nested devices and links
|
||||
$scope.selected_devices = group.devices;
|
||||
$scope.selected_links = group.links;
|
||||
$scope.deleteDevice();
|
||||
|
||||
removeSingleGroup(group);
|
||||
}
|
||||
}
|
||||
if($scope.current_scale > 0.5){
|
||||
// current scale is in devices mode
|
||||
for (i = 0; i < selected_groups.length; i++) {
|
||||
let group = selected_groups[i];
|
||||
removeSingleGroup(group);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.onDeleteContextMenu = function($event){
|
||||
$scope.removeContextMenu();
|
||||
if($scope.selected_devices.length === 1){
|
||||
$scope.deleteDevice();
|
||||
}
|
||||
else if($scope.selected_groups.length === 1){
|
||||
$scope.deleteGroup();
|
||||
}
|
||||
};
|
||||
|
||||
// Button Event Handlers
|
||||
$scope.onToggleToolboxButtonLeft = function (button) {
|
||||
$scope.first_channel.send("ToggleToolbox", {});
|
||||
$scope.action_icons[0].fsm.handle_message("Disable", {});
|
||||
$scope.action_icons[1].fsm.handle_message("Enable", {});
|
||||
$scope.overall_toolbox_collapsed = !$scope.overall_toolbox_collapsed;
|
||||
$scope.$emit('overall_toolbox_collapsed');
|
||||
};
|
||||
|
||||
$scope.onToggleToolboxButtonRight = function (button) {
|
||||
@ -617,8 +783,37 @@ var NetworkUIController = function($scope, $document, $location, $window, $http,
|
||||
$scope.action_icons[0].fsm.handle_message("Enable", {});
|
||||
$scope.action_icons[1].fsm.handle_message("Disable", {});
|
||||
$scope.overall_toolbox_collapsed = !$scope.overall_toolbox_collapsed;
|
||||
$scope.$emit('overall_toolbox_collapsed');
|
||||
};
|
||||
|
||||
$scope.$on('toolbarButtonEvent', function(e, functionName){
|
||||
$scope[`on${functionName}Button`]();
|
||||
});
|
||||
|
||||
$scope.$on('jumpTo', function(e, zoomLevel){
|
||||
switch (zoomLevel){
|
||||
case 'site':
|
||||
$scope.current_scale = 0.051;
|
||||
break;
|
||||
case 'rack':
|
||||
$scope.current_scale = 0.11;
|
||||
break;
|
||||
case 'inventory':
|
||||
$scope.current_scale = 0.51;
|
||||
break;
|
||||
case 'process':
|
||||
$scope.current_scale = 1.1;
|
||||
break;
|
||||
}
|
||||
// var new_panX = controller.scope.{{somethinghere}} - new_scale * ((controller.scope.mouseX - controller.scope.panX) / controller.scope.current_scale);
|
||||
// var new_panY = controller.scope.mouseY - new_scale * ((controller.scope.mouseY - controller.scope.panY) / controller.scope.current_scale);
|
||||
// // controller.scope.updateScaledXY();
|
||||
// // controller.scope.current_scale = new_scale;
|
||||
// controller.scope.panX = new_panX;
|
||||
// controller.scope.panY = new_panY;
|
||||
$scope.updateScaledXY();
|
||||
$scope.updatePanAndScale();
|
||||
});
|
||||
|
||||
$scope.onDeployButton = function (button) {
|
||||
$scope.send_control_message(new messages.Deploy($scope.client_id));
|
||||
@ -724,18 +919,20 @@ var NetworkUIController = function($scope, $document, $location, $window, $http,
|
||||
// Context Menu Buttons
|
||||
$scope.context_menu_buttons = [
|
||||
new models.ContextMenuButton("Rename", 210, 200, 160, 26, $scope.onRenameContextButton, $scope),
|
||||
new models.ContextMenuButton("Details", 236, 231, 160, 26, $scope.onDetailsContextButton, $scope)
|
||||
new models.ContextMenuButton("Details", 236, 231, 160, 26, $scope.onDetailsContextButton, $scope),
|
||||
new models.ContextMenuButton("Delete", 256, 231, 160, 26, $scope.onDeleteContextMenu, $scope)
|
||||
];
|
||||
|
||||
// Context Menus
|
||||
$scope.context_menus = [
|
||||
new models.ContextMenu('HOST', 210, 200, 160, 64, $scope.contextMenuCallback, false, $scope.context_menu_buttons, $scope)
|
||||
new models.ContextMenu('HOST', 210, 200, 160, 90, $scope.contextMenuCallback, false, $scope.context_menu_buttons, $scope)
|
||||
];
|
||||
|
||||
// Icons
|
||||
var actionIconVerticalOffset = toolboxTopMargin + (toolboxHeight/2);
|
||||
$scope.action_icons = [
|
||||
new models.ActionIcon("chevron-left", 170, $scope.graph.height/2, 16, $scope.onToggleToolboxButtonLeft, true, $scope),
|
||||
new models.ActionIcon("chevron-right", 15, $scope.graph.height/2, 16, $scope.onToggleToolboxButtonRight, false, $scope)
|
||||
new models.ActionIcon("chevron-left", 170, actionIconVerticalOffset, 16, $scope.onToggleToolboxButtonLeft, true, $scope),
|
||||
new models.ActionIcon("chevron-right", 15, actionIconVerticalOffset, 16, $scope.onToggleToolboxButtonRight, false, $scope)
|
||||
];
|
||||
|
||||
$scope.onDownloadTraceButton = function (button) {
|
||||
@ -761,18 +958,18 @@ var NetworkUIController = function($scope, $document, $location, $window, $http,
|
||||
var button_offset = 200;
|
||||
|
||||
$scope.buttons = [
|
||||
new models.Button("DEPLOY", button_offset + 10, 48, 70, 30, $scope.onDeployButton, $scope),
|
||||
new models.Button("DESTROY", button_offset + 90, 48, 80, 30, $scope.onDestroyButton, $scope),
|
||||
new models.Button("RECORD", button_offset + 180, 48, 80, 30, $scope.onRecordButton, $scope),
|
||||
new models.Button("EXPORT", button_offset + 270, 48, 70, 30, $scope.onExportButton, $scope),
|
||||
new models.Button("DISCOVER", button_offset + 350, 48, 80, 30, $scope.onDiscoverButton, $scope),
|
||||
new models.Button("LAYOUT", button_offset + 440, 48, 70, 30, $scope.onLayoutButton, $scope),
|
||||
new models.Button("CONFIGURE", button_offset + 520, 48, 90, 30, $scope.onConfigureButton, $scope),
|
||||
new models.Button("EXPORT YAML", button_offset + 620, 48, 120, 30, $scope.onExportYamlButton, $scope),
|
||||
new models.Button("DOWNLOAD TRACE", button_offset + 750, 48, 150, 30, $scope.onDownloadTraceButton, $scope),
|
||||
new models.Button("DOWNLOAD RECORDING", button_offset + 910, 48, 170, 30, $scope.onDownloadRecordingButton, $scope),
|
||||
new models.Button("UPLOAD TEST", button_offset + 10, 88, 100, 30, $scope.onUploadTestButton, $scope),
|
||||
new models.Button("RUN TESTS", button_offset + 120, 88, 100, 30, $scope.onRunTestsButton, $scope),
|
||||
// new models.Button("DEPLOY", button_offset + 10, 48, 70, 30, $scope.onDeployButton, $scope),
|
||||
// new models.Button("DESTROY", button_offset + 90, 48, 80, 30, $scope.onDestroyButton, $scope),
|
||||
// new models.Button("RECORD", button_offset + 180, 48, 80, 30, $scope.onRecordButton, $scope),
|
||||
// new models.Button("EXPORT", button_offset + 270, 48, 70, 30, $scope.onExportButton, $scope),
|
||||
// new models.Button("DISCOVER", button_offset + 350, 48, 80, 30, $scope.onDiscoverButton, $scope),
|
||||
// new models.Button("LAYOUT", button_offset + 440, 48, 70, 30, $scope.onLayoutButton, $scope),
|
||||
// new models.Button("CONFIGURE", button_offset + 520, 48, 90, 30, $scope.onConfigureButton, $scope),
|
||||
// new models.Button("EXPORT YAML", button_offset + 620, 48, 120, 30, $scope.onExportYamlButton, $scope),
|
||||
// new models.Button("DOWNLOAD TRACE", button_offset + 750, 48, 150, 30, $scope.onDownloadTraceButton, $scope),
|
||||
// new models.Button("DOWNLOAD RECORDING", button_offset + 910, 48, 170, 30, $scope.onDownloadRecordingButton, $scope),
|
||||
// new models.Button("UPLOAD TEST", button_offset + 10, 88, 100, 30, $scope.onUploadTestButton, $scope),
|
||||
// new models.Button("RUN TESTS", button_offset + 120, 88, 100, 30, $scope.onRunTestsButton, $scope),
|
||||
];
|
||||
|
||||
$scope.all_buttons = [];
|
||||
@ -1580,7 +1777,29 @@ var NetworkUIController = function($scope, $document, $location, $window, $http,
|
||||
$document.unbind('keydown', $scope.onKeyDown);
|
||||
});
|
||||
|
||||
$scope.update_toolbox_heights = function(){
|
||||
toolboxTopMargin = $('.Networking-top').height();
|
||||
toolboxTitleMargin = toolboxTopMargin + 35;
|
||||
toolboxHeight = $scope.graph.height - toolboxTopMargin;
|
||||
|
||||
let toolboxes = ['site_toolbox', 'rack_toolbox', 'inventory_toolbox', 'app_toolbox'];
|
||||
toolboxes.forEach((toolbox) => {
|
||||
$scope[toolbox].y = toolboxTopMargin;
|
||||
$scope[toolbox].height = toolboxHeight;
|
||||
$scope[toolbox].title_coordinates.y = toolboxTitleMargin;
|
||||
});
|
||||
|
||||
$scope.action_icons.forEach((icon) => {
|
||||
actionIconVerticalOffset = toolboxTopMargin + (toolboxHeight/2);
|
||||
icon.y = actionIconVerticalOffset;
|
||||
});
|
||||
|
||||
$('.Networking-detailPanel').height(toolboxHeight);
|
||||
$('.Networking-detailPanel').css('top', toolboxTopMargin);
|
||||
};
|
||||
|
||||
$scope.update_size = function () {
|
||||
$scope.update_toolbox_heights();
|
||||
};
|
||||
|
||||
$scope.update_offsets = function () {
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
</filter>
|
||||
<filter x="0" y="0" width="1" height="1" id="background">
|
||||
<feFlood flood-color="#ffffff"/>
|
||||
<feComposite in="SourceGraphic" operator="xor"/>
|
||||
<feComposite in="SourceGraphic"/>
|
||||
</filter>
|
||||
<clipPath id="inventory-toolbox-clip-path">
|
||||
<rect ng-attr-x="{{inventory_toolbox.x}}"
|
||||
@ -51,15 +51,15 @@
|
||||
ng-attr-class="{{item.type}}"
|
||||
ng-switch on="item.type">
|
||||
<g ng-switch-when="router"><!-- begin router -->
|
||||
<g awx-net-router></g>
|
||||
<g awx-net-router name="{{item.type + '_' + item.id + '_' + item.name}}"></g>
|
||||
</g> <!-- end router -->
|
||||
|
||||
<g ng-switch-when="switch"> <!-- begin switch -->
|
||||
<g awx-net-switch> </g>
|
||||
<g awx-net-switch name="{{item.type + '_' + item.id + '_' + item.name}}"> </g>
|
||||
</g> <!-- end switch -->
|
||||
|
||||
<g ng-switch-when="host"> <!-- begin host -->
|
||||
<g awx-net-host> </g>
|
||||
<g awx-net-host name="{{item.type + '_' + item.id + '_' + item.name}}"> </g>
|
||||
|
||||
</g> <!-- end host -->
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
</g>
|
||||
</g>
|
||||
<g ng-repeat="item in groups">
|
||||
<g awx-net-group></g>
|
||||
<g awx-net-group name="{{item.type + '_' + item.id + '_' + item.name}}"></g>
|
||||
</g>
|
||||
<g ng-attr-transform="translate({{scaledX}},{{scaledY}})" ng-attr-class="{{debug.hidden && 'hidden' || ''}} debug-cursor" >
|
||||
<line x1="-5" y1="0" x2="5" y2="0"/>
|
||||
|
||||
@ -67,7 +67,12 @@ inherits(_Move, _State);
|
||||
var Move = new _Move();
|
||||
exports.Move = Move;
|
||||
|
||||
|
||||
function _ContextMenu () {
|
||||
this.name = 'ContextMenu';
|
||||
}
|
||||
inherits(_ContextMenu, _State);
|
||||
var ContextMenu = new _ContextMenu();
|
||||
exports.ContextMenu = ContextMenu;
|
||||
|
||||
|
||||
_Start.prototype.start = function (controller) {
|
||||
@ -323,14 +328,20 @@ _Selected2.prototype.onMouseDown = function (controller, msg_type, $event) {
|
||||
};
|
||||
_Selected2.prototype.onMouseDown.transitions = ['Selected3', 'Ready'];
|
||||
|
||||
_Selected3.prototype.onMouseUp = function (controller, msg_type, $event) {
|
||||
let context_menu = controller.scope.context_menus[0];
|
||||
context_menu.enabled = true;
|
||||
context_menu.x = $event.x;
|
||||
context_menu.y = $event.y;
|
||||
context_menu.buttons.forEach(function(button, index){
|
||||
button.x = $event.x;
|
||||
let menuPaddingTop = 5;
|
||||
button.y = $event.y + menuPaddingTop + (button.height * index);
|
||||
});
|
||||
|
||||
|
||||
_Selected3.prototype.onMouseUp = function (controller) {
|
||||
|
||||
controller.changeState(EditLabel);
|
||||
|
||||
controller.changeState(ContextMenu);
|
||||
};
|
||||
_Selected3.prototype.onMouseUp.transitions = ['EditLabel'];
|
||||
_Selected3.prototype.onMouseUp.transitions = ['ContextMenu'];
|
||||
|
||||
|
||||
_Selected3.prototype.onMouseMove = function (controller) {
|
||||
@ -407,6 +418,7 @@ _Ready.prototype.onMouseDown = function (controller, msg_type, $event) {
|
||||
|
||||
if (selected) {
|
||||
controller.changeState(Selected1);
|
||||
controller.scope.onDetailsContextButton();
|
||||
} else {
|
||||
controller.delegate_channel.send(msg_type, $event);
|
||||
}
|
||||
@ -510,3 +522,24 @@ _Move.prototype.onMouseMove = function (controller) {
|
||||
controller.scope.pressedScaledY = controller.scope.scaledY;
|
||||
|
||||
};
|
||||
|
||||
_Move.prototype.onTouchMove = _Move.prototype.onMouseMove;
|
||||
|
||||
_ContextMenu.prototype.end = function (controller) {
|
||||
|
||||
controller.scope.removeContextMenu();
|
||||
};
|
||||
|
||||
_ContextMenu.prototype.onLabelEdit = function (controller) {
|
||||
|
||||
controller.changeState(EditLabel);
|
||||
|
||||
};
|
||||
_ContextMenu.prototype.onLabelEdit.transitions = ['EditLabel'];
|
||||
|
||||
_ContextMenu.prototype.onMouseDown = function (controller) {
|
||||
|
||||
controller.changeState(Ready);
|
||||
|
||||
};
|
||||
_ContextMenu.prototype.onMouseDown.transitions = ['Ready'];
|
||||
|
||||
@ -1,118 +1,242 @@
|
||||
<!-- Copyright (c) 2017 Red Hat, Inc. -->
|
||||
<g ng-if="current_scale >= 0.1 && current_scale <= 0.5 && item.type == 'rack'" ng-attr-transform="translate({{item.width()/2}}, {{item.height()/2}})">
|
||||
<g ng-attr-transform="scale({{1/0.5}})">
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
<!-- <g transform="scale(0.75)"> -->
|
||||
<g ng-if="current_scale >= 0.1 && current_scale <= 0.5 && item.type == 'rack'" ng-attr-transform="translate({{item.width()/2}}, {{item.height()/2}})">
|
||||
<g ng-attr-transform="scale({{1/0.5}})">
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-50)">
|
||||
<rect
|
||||
ry=15
|
||||
rx=15
|
||||
width=100
|
||||
height=100
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__rack--selected-conflict' : item.selected ? 'NetworkUI__rack--selected' : 'NetworkUI__rack--remote-selected' : 'NetworkUI__rack--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,31.7H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,31.9,36.3,31.7,36,31.7z M17.8,36.5c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,36.5,17.8,36.5z
|
||||
M28.2,36.3h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,36,28.6,36.3,28.2,36.3z
|
||||
M28.2,34.2h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,33.9,28.6,34.2,28.2,34.2z
|
||||
M30.9,36.3H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,36,31.3,36.3,30.9,36.3z M30.9,34.2
|
||||
H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,33.9,31.3,34.2,30.9,34.2z M33.6,36.3h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,36,33.9,36.3,33.6,36.3z M33.6,34.2h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,33.9,33.9,34.2,33.6,34.2z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,34c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,34,17.8,34z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,14.7c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,14.7,17.8,14.7z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,24.4c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,24.4,17.8,24.4z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,22.1H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,22.3,36.3,22.1,36,22.1z M17.8,26.9c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9
|
||||
C19.7,26,18.9,26.9,17.8,26.9z M28.2,26.7h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C28.8,26.4,28.6,26.7,28.2,26.7z M28.2,24.5h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C28.8,24.3,28.6,24.5,28.2,24.5z M30.9,26.7H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C31.5,26.4,31.3,26.7,30.9,26.7z M30.9,24.5H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C31.5,24.3,31.3,24.5,30.9,24.5z M33.6,26.7h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C34.2,26.4,33.9,26.7,33.6,26.7z M33.6,24.5h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C34.2,24.3,33.9,24.5,33.6,24.5z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
|
||||
C50,4.2,45.8,0,40.8,0z M37.8,37.1c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8
|
||||
V37.1z M37.8,27.5c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V27.5z M37.8,17.9
|
||||
c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V17.9z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,12.5H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,12.7,36.3,12.5,36,12.5z M17.8,17.2c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,17.2,17.8,17.2z
|
||||
M28.2,17.1h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,16.8,28.6,17.1,28.2,17.1z
|
||||
M28.2,14.9h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,14.7,28.6,14.9,28.2,14.9z
|
||||
M30.9,17.1H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,16.8,31.3,17.1,30.9,17.1z
|
||||
M30.9,14.9H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,14.7,31.3,14.9,30.9,14.9z
|
||||
M33.6,17.1h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,16.8,33.9,17.1,33.6,17.1z
|
||||
M33.6,14.9h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-50)">
|
||||
<rect
|
||||
ry=15
|
||||
rx=15
|
||||
width=100
|
||||
height=100
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__rack--selected-conflict' : item.selected ? 'NetworkUI__rack--selected' : 'NetworkUI__rack--remote-selected' : 'NetworkUI__rack--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,31.7H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,31.9,36.3,31.7,36,31.7z M17.8,36.5c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,36.5,17.8,36.5z
|
||||
M28.2,36.3h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,36,28.6,36.3,28.2,36.3z
|
||||
M28.2,34.2h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,33.9,28.6,34.2,28.2,34.2z
|
||||
M30.9,36.3H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,36,31.3,36.3,30.9,36.3z M30.9,34.2
|
||||
H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,33.9,31.3,34.2,30.9,34.2z M33.6,36.3h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,36,33.9,36.3,33.6,36.3z M33.6,34.2h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,33.9,33.9,34.2,33.6,34.2z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,34c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,34,17.8,34z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,14.7c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,14.7,17.8,14.7z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,24.4c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,24.4,17.8,24.4z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,22.1H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,22.3,36.3,22.1,36,22.1z M17.8,26.9c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9
|
||||
C19.7,26,18.9,26.9,17.8,26.9z M28.2,26.7h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C28.8,26.4,28.6,26.7,28.2,26.7z M28.2,24.5h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C28.8,24.3,28.6,24.5,28.2,24.5z M30.9,26.7H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C31.5,26.4,31.3,26.7,30.9,26.7z M30.9,24.5H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C31.5,24.3,31.3,24.5,30.9,24.5z M33.6,26.7h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C34.2,26.4,33.9,26.7,33.6,26.7z M33.6,24.5h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C34.2,24.3,33.9,24.5,33.6,24.5z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
|
||||
C50,4.2,45.8,0,40.8,0z M37.8,37.1c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8
|
||||
V37.1z M37.8,27.5c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V27.5z M37.8,17.9
|
||||
c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V17.9z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,12.5H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,12.7,36.3,12.5,36,12.5z M17.8,17.2c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,17.2,17.8,17.2z
|
||||
M28.2,17.1h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,16.8,28.6,17.1,28.2,17.1z
|
||||
M28.2,14.9h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,14.7,28.6,14.9,28.2,14.9z
|
||||
M30.9,17.1H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,16.8,31.3,17.1,30.9,17.1z
|
||||
M30.9,14.9H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,14.7,31.3,14.9,30.9,14.9z
|
||||
M33.6,17.1h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,16.8,33.9,17.1,33.6,17.1z
|
||||
M33.6,14.9h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-attr-transform="scale({{1/current_scale}})">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__rack-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
x="0"
|
||||
ng-attr-y="{{180*current_scale}}"> {{item.name}}
|
||||
</text>
|
||||
<text class="NetworkUI__rack-text" filter="url(#background)" text-anchor="middle" x="0" ng-attr-y="{{180*current_scale}}">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-attr-transform="scale({{1/current_scale}})">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__rack-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
x="-20"
|
||||
ng-attr-y="{{180*current_scale}}"> {{item.name}}
|
||||
</text>
|
||||
<text class="NetworkUI__rack-text" x="-20" ng-attr-y="{{180*current_scale}}">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
<!-- </g> -->
|
||||
|
||||
<g transform="scale(0.75)">
|
||||
<g ng-if="current_scale >= 0.5 && current_scale <= 5 && item.type == 'rack'">
|
||||
<g ng-attr-transform="scale({{1}})">
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-50)">
|
||||
<rect
|
||||
ry=15
|
||||
rx=15
|
||||
width=100
|
||||
height=100
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__rack--selected-conflict' : item.selected ? 'NetworkUI__rack--selected' : 'NetworkUI__rack--remote-selected' : 'NetworkUI__rack--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,31.7H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,31.9,36.3,31.7,36,31.7z M17.8,36.5c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,36.5,17.8,36.5z
|
||||
M28.2,36.3h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,36,28.6,36.3,28.2,36.3z
|
||||
M28.2,34.2h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,33.9,28.6,34.2,28.2,34.2z
|
||||
M30.9,36.3H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,36,31.3,36.3,30.9,36.3z M30.9,34.2
|
||||
H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,33.9,31.3,34.2,30.9,34.2z M33.6,36.3h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,36,33.9,36.3,33.6,36.3z M33.6,34.2h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,33.9,33.9,34.2,33.6,34.2z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,34c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,34,17.8,34z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,14.7c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,14.7,17.8,14.7z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,24.4c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,24.4,17.8,24.4z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,22.1H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,22.3,36.3,22.1,36,22.1z M17.8,26.9c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9
|
||||
C19.7,26,18.9,26.9,17.8,26.9z M28.2,26.7h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C28.8,26.4,28.6,26.7,28.2,26.7z M28.2,24.5h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C28.8,24.3,28.6,24.5,28.2,24.5z M30.9,26.7H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C31.5,26.4,31.3,26.7,30.9,26.7z M30.9,24.5H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C31.5,24.3,31.3,24.5,30.9,24.5z M33.6,26.7h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C34.2,26.4,33.9,26.7,33.6,26.7z M33.6,24.5h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C34.2,24.3,33.9,24.5,33.6,24.5z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
|
||||
C50,4.2,45.8,0,40.8,0z M37.8,37.1c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8
|
||||
V37.1z M37.8,27.5c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V27.5z M37.8,17.9
|
||||
c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V17.9z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,12.5H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,12.7,36.3,12.5,36,12.5z M17.8,17.2c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,17.2,17.8,17.2z
|
||||
M28.2,17.1h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,16.8,28.6,17.1,28.2,17.1z
|
||||
M28.2,14.9h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,14.7,28.6,14.9,28.2,14.9z
|
||||
M30.9,17.1H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,16.8,31.3,17.1,30.9,17.1z
|
||||
M30.9,14.9H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,14.7,31.3,14.9,30.9,14.9z
|
||||
M33.6,17.1h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,16.8,33.9,17.1,33.6,17.1z
|
||||
M33.6,14.9h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-attr-transform="scale({{1}})">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__rack-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
x="0"
|
||||
y="70"> {{item.name}}
|
||||
</text>
|
||||
<text class="NetworkUI__rack-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
@ -1,116 +1,117 @@
|
||||
<!-- Copyright (c) 2017 Red Hat, Inc. -->
|
||||
<g transform="scale(0.75)">
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-50)">
|
||||
<rect
|
||||
ry=15
|
||||
rx=15
|
||||
width=100
|
||||
height=100
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__rack--selected-conflict' : item.selected ? 'NetworkUI__rack--selected' : 'NetworkUI__rack--remote-selected' : 'NetworkUI__rack--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,31.7H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,31.9,36.3,31.7,36,31.7z M17.8,36.5c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,36.5,17.8,36.5z
|
||||
M28.2,36.3h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,36,28.6,36.3,28.2,36.3z
|
||||
M28.2,34.2h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,33.9,28.6,34.2,28.2,34.2z
|
||||
M30.9,36.3H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,36,31.3,36.3,30.9,36.3z M30.9,34.2
|
||||
H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,33.9,31.3,34.2,30.9,34.2z M33.6,36.3h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,36,33.9,36.3,33.6,36.3z M33.6,34.2h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,33.9,33.9,34.2,33.6,34.2z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,34c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,34,17.8,34z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,14.7c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,14.7,17.8,14.7z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,24.4c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,24.4,17.8,24.4z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,22.1H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,22.3,36.3,22.1,36,22.1z M17.8,26.9c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9
|
||||
C19.7,26,18.9,26.9,17.8,26.9z M28.2,26.7h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C28.8,26.4,28.6,26.7,28.2,26.7z M28.2,24.5h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C28.8,24.3,28.6,24.5,28.2,24.5z M30.9,26.7H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C31.5,26.4,31.3,26.7,30.9,26.7z M30.9,24.5H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C31.5,24.3,31.3,24.5,30.9,24.5z M33.6,26.7h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C34.2,26.4,33.9,26.7,33.6,26.7z M33.6,24.5h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C34.2,24.3,33.9,24.5,33.6,24.5z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
|
||||
C50,4.2,45.8,0,40.8,0z M37.8,37.1c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8
|
||||
V37.1z M37.8,27.5c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V27.5z M37.8,17.9
|
||||
c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V17.9z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,12.5H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,12.7,36.3,12.5,36,12.5z M17.8,17.2c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,17.2,17.8,17.2z
|
||||
M28.2,17.1h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,16.8,28.6,17.1,28.2,17.1z
|
||||
M28.2,14.9h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,14.7,28.6,14.9,28.2,14.9z
|
||||
M30.9,17.1H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,16.8,31.3,17.1,30.9,17.1z
|
||||
M30.9,14.9H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,14.7,31.3,14.9,30.9,14.9z
|
||||
M33.6,17.1h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,16.8,33.9,17.1,33.6,17.1z
|
||||
M33.6,14.9h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-50)">
|
||||
<rect
|
||||
ry=15
|
||||
rx=15
|
||||
width=100
|
||||
height=100
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__rack--selected-conflict' : item.selected ? 'NetworkUI__rack--selected' : 'NetworkUI__rack--remote-selected' : 'NetworkUI__rack--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,31.7H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,31.9,36.3,31.7,36,31.7z M17.8,36.5c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,36.5,17.8,36.5z
|
||||
M28.2,36.3h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,36,28.6,36.3,28.2,36.3z
|
||||
M28.2,34.2h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,33.9,28.6,34.2,28.2,34.2z
|
||||
M30.9,36.3H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,36,31.3,36.3,30.9,36.3z M30.9,34.2
|
||||
H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,33.9,31.3,34.2,30.9,34.2z M33.6,36.3h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,36,33.9,36.3,33.6,36.3z M33.6,34.2h-0.9
|
||||
c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,33.9,33.9,34.2,33.6,34.2z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,34c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,34,17.8,34z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,14.7c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,14.7,17.8,14.7z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M17.8,24.4c-0.3,0-0.6,0.2-0.6,0.6c0,0.3,0.2,0.6,0.6,0.6c0.3,0,0.6-0.2,0.6-0.6S18.1,24.4,17.8,24.4z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,22.1H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,22.3,36.3,22.1,36,22.1z M17.8,26.9c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9
|
||||
C19.7,26,18.9,26.9,17.8,26.9z M28.2,26.7h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C28.8,26.4,28.6,26.7,28.2,26.7z M28.2,24.5h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C28.8,24.3,28.6,24.5,28.2,24.5z M30.9,26.7H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C31.5,26.4,31.3,26.7,30.9,26.7z M30.9,24.5H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C31.5,24.3,31.3,24.5,30.9,24.5z M33.6,26.7h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C34.2,26.4,33.9,26.7,33.6,26.7z M33.6,24.5h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6
|
||||
C34.2,24.3,33.9,24.5,33.6,24.5z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
|
||||
C50,4.2,45.8,0,40.8,0z M37.8,37.1c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8
|
||||
V37.1z M37.8,27.5c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V27.5z M37.8,17.9
|
||||
c0,1-0.8,1.8-1.8,1.8H14c-1,0-1.8-0.8-1.8-1.8v-4.9c0-1,0.8-1.8,1.8-1.8h22c1,0,1.8,0.8,1.8,1.8V17.9z"/>
|
||||
<path
|
||||
class="NetworkUI__rack"
|
||||
d="M36,12.5H14c-0.3,0-0.4,0.2-0.4,0.4v4.9c0,0.3,0.2,0.4,0.4,0.4h22c0.3,0,0.4-0.2,0.4-0.4v-4.9
|
||||
C36.4,12.7,36.3,12.5,36,12.5z M17.8,17.2c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9s1.9,0.9,1.9,1.9S18.9,17.2,17.8,17.2z
|
||||
M28.2,17.1h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,16.8,28.6,17.1,28.2,17.1z
|
||||
M28.2,14.9h-0.9c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C28.8,14.7,28.6,14.9,28.2,14.9z
|
||||
M30.9,17.1H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,16.8,31.3,17.1,30.9,17.1z
|
||||
M30.9,14.9H30c-0.3,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C31.5,14.7,31.3,14.9,30.9,14.9z
|
||||
M33.6,17.1h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,16.8,33.9,17.1,33.6,17.1z
|
||||
M33.6,14.9h-0.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6h0.9c0.4,0,0.6,0.2,0.6,0.6C34.2,14.7,33.9,14.9,33.6,14.9z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-show="item.icon || current_scale > 0.5">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__rack-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
x="0"
|
||||
y="70"> {{item.name}}
|
||||
</text>
|
||||
<text class="NetworkUI__rack-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-show="item.icon || current_scale > 0.5">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__rack-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
x="-25"
|
||||
y="70"> {{item.name}}
|
||||
</text>
|
||||
<text class="NetworkUI__rack-text" x="-25" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
|
||||
@ -1,79 +1,81 @@
|
||||
<!-- Copyright (c) 2017 Red Hat, Inc. -->
|
||||
<g transform="scale(0.75)">
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-50)">
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="50"
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__router--selected-conflict' : item.selected ? 'NetworkUI__router--selected' : 'NetworkUI__router--remote-selected' : 'NetworkUI__router--background'}}">
|
||||
</circle>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__router"
|
||||
d="M42.7,7.3c-9.8-9.8-25.6-9.8-35.4,0c-9.8,9.8-9.8,25.6,0,35.4c9.8,9.8,25.6,9.8,35.4,0
|
||||
C52.4,32.9,52.4,17.1,42.7,7.3z M20,12.3l4.2-4.2c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3l4.2,4.2c0.4,0.4,0.4,1.2,0,1.6
|
||||
c-0.4,0.4-1.2,0.4-1.6,0l-2.3-2.3v10c0,0.6-0.5,1.1-1.1,1.1c-0.6,0-1.1-0.5-1.1-1.1l0-10L21.6,14c-0.4,0.4-1.2,0.4-1.6,0
|
||||
C19.5,13.5,19.5,12.8,20,12.3z M15.6,29.8c-0.4-0.4-0.4-1.2,0-1.6l0,0l2.1-2.1l-8.7,0c-0.6,0-1.1-0.5-1.1-1.1c0-0.3,0.1-0.6,0.3-0.8
|
||||
C8.4,24,8.7,23.8,9,23.8l8.7,0l-2.1-2.1c-0.4-0.4-0.4-1.2,0-1.6c0.4-0.4,1.2-0.4,1.6,0l4,4c0.2,0.2,0.3,0.5,0.3,0.8
|
||||
c0,0.3-0.1,0.6-0.3,0.8l0,0l-4,4C16.8,30.3,16.1,30.3,15.6,29.8z M30,37.7l-4.2,4.2c-0.2,0.2-0.5,0.3-0.8,0.3
|
||||
c-0.3,0-0.6-0.1-0.8-0.3L20,37.7c-0.4-0.4-0.4-1.2,0-1.6c0.4-0.4,1.2-0.4,1.6,0l2.3,2.3l0-10.2c0-0.3,0.1-0.6,0.3-0.8
|
||||
c0.2-0.2,0.5-0.3,0.8-0.3c0.6,0,1.1,0.5,1.1,1.1l0,10.2l2.3-2.3c0.4-0.4,1.2-0.4,1.6,0C30.5,36.5,30.5,37.2,30,37.7z M41,26.2
|
||||
l-8.9,0l2.1,2.1c0.4,0.4,0.5,1.2,0,1.6c-0.4,0.4-1.2,0.4-1.6,0l-4-4c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.3,0.1-0.6,0.3-0.8l0,0l4-4
|
||||
c0.4-0.4,1.2-0.4,1.6,0c0.4,0.4,0.4,1.2,0,1.6l0,0l-2.1,2.1l8.8,0c0.6,0,1.1,0.5,1.1,1.1C42.1,25.6,41.6,26.2,41,26.2z"/>
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-50)">
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="50"
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__router--selected-conflict' : item.selected ? 'NetworkUI__router--selected' : 'NetworkUI__router--remote-selected' : 'NetworkUI__router--background'}}">
|
||||
</circle>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__router"
|
||||
d="M42.7,7.3c-9.8-9.8-25.6-9.8-35.4,0c-9.8,9.8-9.8,25.6,0,35.4c9.8,9.8,25.6,9.8,35.4,0
|
||||
C52.4,32.9,52.4,17.1,42.7,7.3z M20,12.3l4.2-4.2c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3l4.2,4.2c0.4,0.4,0.4,1.2,0,1.6
|
||||
c-0.4,0.4-1.2,0.4-1.6,0l-2.3-2.3v10c0,0.6-0.5,1.1-1.1,1.1c-0.6,0-1.1-0.5-1.1-1.1l0-10L21.6,14c-0.4,0.4-1.2,0.4-1.6,0
|
||||
C19.5,13.5,19.5,12.8,20,12.3z M15.6,29.8c-0.4-0.4-0.4-1.2,0-1.6l0,0l2.1-2.1l-8.7,0c-0.6,0-1.1-0.5-1.1-1.1c0-0.3,0.1-0.6,0.3-0.8
|
||||
C8.4,24,8.7,23.8,9,23.8l8.7,0l-2.1-2.1c-0.4-0.4-0.4-1.2,0-1.6c0.4-0.4,1.2-0.4,1.6,0l4,4c0.2,0.2,0.3,0.5,0.3,0.8
|
||||
c0,0.3-0.1,0.6-0.3,0.8l0,0l-4,4C16.8,30.3,16.1,30.3,15.6,29.8z M30,37.7l-4.2,4.2c-0.2,0.2-0.5,0.3-0.8,0.3
|
||||
c-0.3,0-0.6-0.1-0.8-0.3L20,37.7c-0.4-0.4-0.4-1.2,0-1.6c0.4-0.4,1.2-0.4,1.6,0l2.3,2.3l0-10.2c0-0.3,0.1-0.6,0.3-0.8
|
||||
c0.2-0.2,0.5-0.3,0.8-0.3c0.6,0,1.1,0.5,1.1,1.1l0,10.2l2.3-2.3c0.4-0.4,1.2-0.4,1.6,0C30.5,36.5,30.5,37.2,30,37.7z M41,26.2
|
||||
l-8.9,0l2.1,2.1c0.4,0.4,0.5,1.2,0,1.6c-0.4,0.4-1.2,0.4-1.6,0l-4-4c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.3,0.1-0.6,0.3-0.8l0,0l4-4
|
||||
c0.4-0.4,1.2-0.4,1.6,0c0.4,0.4,0.4,1.2,0,1.6l0,0l-2.1,2.1l8.8,0c0.6,0,1.1,0.5,1.1,1.1C42.1,25.6,41.6,26.2,41,26.2z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-show="item.icon || current_scale > 0.5">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__router-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
x="0"
|
||||
y="70"> {{item.name}}</text>
|
||||
<text class="NetworkUI__router-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-show="item.icon || current_scale > 0.5">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__router-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
x="-30"
|
||||
y="70"> {{item.name}}</text>
|
||||
<text class="NetworkUI__router-text" x="-30" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
|
||||
@ -68,6 +68,13 @@ var Move = new _Move();
|
||||
exports.Move = Move;
|
||||
|
||||
|
||||
function _ContextMenu () {
|
||||
this.name = 'ContextMenu';
|
||||
}
|
||||
inherits(_ContextMenu, _State);
|
||||
var ContextMenu = new _ContextMenu();
|
||||
exports.ContextMenu = ContextMenu;
|
||||
|
||||
|
||||
|
||||
_Start.prototype.start = function (controller) {
|
||||
@ -408,12 +415,21 @@ _Selected2.prototype.onMouseDown.transitions = ['Selected3', 'Ready'];
|
||||
|
||||
|
||||
|
||||
_Selected3.prototype.onMouseUp = function (controller) {
|
||||
_Selected3.prototype.onMouseUp = function (controller, msg_type, $event) {
|
||||
let context_menu = controller.scope.context_menus[0];
|
||||
context_menu.enabled = true;
|
||||
context_menu.x = $event.x;
|
||||
context_menu.y = $event.y;
|
||||
context_menu.buttons.forEach(function(button, index){
|
||||
button.x = $event.x;
|
||||
let menuPaddingTop = 5;
|
||||
button.y = $event.y + menuPaddingTop + (button.height * index);
|
||||
});
|
||||
|
||||
controller.changeState(EditLabel);
|
||||
controller.changeState(ContextMenu);
|
||||
|
||||
};
|
||||
_Selected3.prototype.onMouseUp.transitions = ['EditLabel'];
|
||||
_Selected3.prototype.onMouseUp.transitions = ['ContextMenu'];
|
||||
|
||||
|
||||
_Selected3.prototype.onMouseMove = function (controller) {
|
||||
@ -490,6 +506,7 @@ _Ready.prototype.onMouseDown = function (controller, msg_type, $event) {
|
||||
|
||||
if (selected) {
|
||||
controller.changeState(Selected1);
|
||||
controller.scope.onDetailsContextButton();
|
||||
} else {
|
||||
controller.delegate_channel.send(msg_type, $event);
|
||||
}
|
||||
@ -614,3 +631,24 @@ _Move.prototype.onMouseMove = function (controller) {
|
||||
controller.scope.pressedScaledY = controller.scope.scaledY;
|
||||
|
||||
};
|
||||
|
||||
_Move.prototype.onTouchMove = _Move.prototype.onMouseMove;
|
||||
|
||||
_ContextMenu.prototype.end = function (controller) {
|
||||
|
||||
controller.scope.removeContextMenu();
|
||||
};
|
||||
|
||||
_ContextMenu.prototype.onLabelEdit = function (controller) {
|
||||
|
||||
controller.changeState(EditLabel);
|
||||
|
||||
};
|
||||
_ContextMenu.prototype.onLabelEdit.transitions = ['EditLabel'];
|
||||
|
||||
_ContextMenu.prototype.onMouseDown = function (controller) {
|
||||
|
||||
controller.changeState(Ready);
|
||||
|
||||
};
|
||||
_ContextMenu.prototype.onMouseDown.transitions = ['Ready'];
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<!-- Copyright (c) 2017 Red Hat, Inc. -->
|
||||
|
||||
<g ng-if="current_scale <= 0.1 && item.type == 'site'" ng-attr-transform="translate({{item.width()/2}}, {{item.height()/2}})">
|
||||
<g ng-attr-transform="scale({{1/(0.1)}})">
|
||||
<g ng-if="item.moving">
|
||||
@ -94,10 +95,115 @@
|
||||
</g>
|
||||
<g ng-attr-transform="scale({{1/current_scale}})">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__site-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
ng-attr-x="0"
|
||||
ng-attr-y="{{1200*current_scale}}"> {{item.name}} </text>
|
||||
<text class="NetworkUI__site-text" text-anchor="middle" x="0" ng-attr-y="{{1200*current_scale}}">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
<text class="NetworkUI__site-text" filter="url(#background)" text-anchor="middle" x="0" ng-attr-y="{{1200*current_scale}}">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g transform="scale(0.75)">
|
||||
<g ng-if="current_scale >= 0.1 && item.type == 'site'">
|
||||
<g transform="scale(1)">
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-50)">
|
||||
<rect
|
||||
ry=15
|
||||
rx=15
|
||||
width=100
|
||||
height=100
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__site--selected-conflict' : item.selected ? 'NetworkUI__site--selected' : 'NetworkUI__site--remote-selected' : 'NetworkUI__site--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__site--fill0"
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
|
||||
C50,4.2,45.8,0,40.8,0z"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill1"
|
||||
d="M38.5,30.5v5c0,2.8-2.2,5-5,5h-17c-2.8,0-5-2.2-5-5v-5"/>
|
||||
<rect
|
||||
x="24"
|
||||
y="32.1"
|
||||
class="NetworkUI__site--fill2"
|
||||
width="2"
|
||||
height="8"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill2"
|
||||
d="M26,34.5h-2c-2.8,0-5-2.2-5-5v-17c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v17C31,32.2,28.7,34.5,26,34.5z"/>
|
||||
<circle
|
||||
class="NetworkUI__site--fill0"
|
||||
cx="25" cy="28.9" r="2.5"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill2"
|
||||
d="M39.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C44.5,32.2,42.2,34.5,39.5,34.5z"/>
|
||||
<circle
|
||||
class="NetworkUI__site--fill0"
|
||||
cx="38.5" cy="28.9" r="2.5"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill2"
|
||||
d="M12.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C17.5,32.2,15.2,34.5,12.5,34.5z"/>
|
||||
<circle
|
||||
class="NetworkUI__site--fill0"
|
||||
cx="11.5" cy="28.9" r="2.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="scale(1)">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__site-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
x="0"
|
||||
y="70"> {{item.name}} </text>
|
||||
<text class="NetworkUI__site-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
@ -1,100 +1,102 @@
|
||||
<!-- Copyright (c) 2017 Red Hat, Inc. -->
|
||||
<g transform="scale(0.75)">
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-50)">
|
||||
<rect
|
||||
ry=15
|
||||
rx=15
|
||||
width=100
|
||||
height=100
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__site--selected-conflict' : item.selected ? 'NetworkUI__site--selected' : 'NetworkUI__site--remote-selected' : 'NetworkUI__site--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__site--fill0"
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
|
||||
C50,4.2,45.8,0,40.8,0z"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill1"
|
||||
d="M38.5,30.5v5c0,2.8-2.2,5-5,5h-17c-2.8,0-5-2.2-5-5v-5"/>
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
<g transform="translate(-50,-50)">
|
||||
<rect
|
||||
x="24"
|
||||
y="32.1"
|
||||
class="NetworkUI__site--fill2"
|
||||
width="2"
|
||||
height="8"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill2"
|
||||
d="M26,34.5h-2c-2.8,0-5-2.2-5-5v-17c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v17C31,32.2,28.7,34.5,26,34.5z"/>
|
||||
<circle
|
||||
ry=15
|
||||
rx=15
|
||||
width=100
|
||||
height=100
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__site--selected-conflict' : item.selected ? 'NetworkUI__site--selected' : 'NetworkUI__site--remote-selected' : 'NetworkUI__site--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__site--fill0"
|
||||
cx="25" cy="28.9" r="2.5"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill2"
|
||||
d="M39.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C44.5,32.2,42.2,34.5,39.5,34.5z"/>
|
||||
<circle
|
||||
class="NetworkUI__site--fill0"
|
||||
cx="38.5" cy="28.9" r="2.5"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill2"
|
||||
d="M12.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C17.5,32.2,15.2,34.5,12.5,34.5z"/>
|
||||
<circle
|
||||
class="NetworkUI__site--fill0"
|
||||
cx="11.5" cy="28.9" r="2.5"/>
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2
|
||||
C50,4.2,45.8,0,40.8,0z"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill1"
|
||||
d="M38.5,30.5v5c0,2.8-2.2,5-5,5h-17c-2.8,0-5-2.2-5-5v-5"/>
|
||||
<rect
|
||||
x="24"
|
||||
y="32.1"
|
||||
class="NetworkUI__site--fill2"
|
||||
width="2"
|
||||
height="8"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill2"
|
||||
d="M26,34.5h-2c-2.8,0-5-2.2-5-5v-17c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v17C31,32.2,28.7,34.5,26,34.5z"/>
|
||||
<circle
|
||||
class="NetworkUI__site--fill0"
|
||||
cx="25" cy="28.9" r="2.5"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill2"
|
||||
d="M39.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C44.5,32.2,42.2,34.5,39.5,34.5z"/>
|
||||
<circle
|
||||
class="NetworkUI__site--fill0"
|
||||
cx="38.5" cy="28.9" r="2.5"/>
|
||||
<path
|
||||
class="NetworkUI__site--fill2"
|
||||
d="M12.5,34.5h-2c-2.8,0-5-2.2-5-5v-12c0-2.8,2.2-5,5-5h2c2.8,0,5,2.2,5,5v12C17.5,32.2,15.2,34.5,12.5,34.5z"/>
|
||||
<circle
|
||||
class="NetworkUI__site--fill0"
|
||||
cx="11.5" cy="28.9" r="2.5"/>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-if="current_scale <= 0.1 && item.type == 'site'">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__site-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
x="0"
|
||||
y="70"> {{item.name}}
|
||||
</text>
|
||||
<text class="NetworkUI__site-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-if="current_scale <= 0.1 && item.type == 'site'">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__site-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
x="-20"
|
||||
y="70"> {{item.name}}
|
||||
</text>
|
||||
<text class="NetworkUI__site-text" x="-20" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
|
||||
@ -124,11 +124,11 @@
|
||||
translate(0, {{stream.flip_text_offset()}})
|
||||
">
|
||||
<text ng-attr-class="{{stream.selected && ! stream.edit_label ? 'NetworkUI__stream-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
x="0"
|
||||
y="0"> {{stream.label}}</text>
|
||||
<text class="NetworkUI__stream-text" text-anchor="middle" x="0" y="0">{{stream.label}}{{stream.edit_label?'_':''}}</text>
|
||||
<text class="NetworkUI__stream-text" filter="url(#background)" text-anchor="middle" x="0" y="0">{{stream.label}}{{stream.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
</g>
|
||||
<!-- End Text -->
|
||||
|
||||
@ -31,12 +31,9 @@
|
||||
@button-body-pressed: #848992;
|
||||
@button-text-pressed: #ffffff;
|
||||
@green: #5CB85C;
|
||||
@host-green: #449D44;
|
||||
@red: #D9534F;
|
||||
@blue: #337AB7;
|
||||
@light-toolbox-background: #f6f6f6;
|
||||
@rack-orange: #F0AD4E;
|
||||
@site-orange: #EC971F;
|
||||
@icon-background-hover:@blue;
|
||||
|
||||
.NetworkUI {
|
||||
@ -118,7 +115,7 @@
|
||||
}
|
||||
|
||||
.NetworkUI__router {
|
||||
fill: @green;
|
||||
fill: @blue;
|
||||
}
|
||||
|
||||
.NetworkUI__router--background{
|
||||
@ -197,7 +194,7 @@
|
||||
}
|
||||
|
||||
.NetworkUI__rack {
|
||||
fill: @rack-orange;
|
||||
fill: @blue;
|
||||
}
|
||||
|
||||
.NetworkUI__rack--background {
|
||||
@ -243,13 +240,13 @@
|
||||
}
|
||||
|
||||
.NetworkUI__site {
|
||||
fill: @widget-body;
|
||||
fill: @blue;
|
||||
stroke: @dark-widget-detail;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.NetworkUI__site--fill0{
|
||||
fill:@site-orange;
|
||||
fill:@blue;
|
||||
}
|
||||
|
||||
.NetworkUI__site--fill1{
|
||||
@ -348,7 +345,7 @@
|
||||
}
|
||||
|
||||
.NetworkUI__host {
|
||||
fill: @host-green;
|
||||
fill: @blue;
|
||||
}
|
||||
|
||||
.NetworkUI__host--background {
|
||||
@ -470,7 +467,7 @@
|
||||
|
||||
|
||||
.NetworkUI__interface {
|
||||
fill: @dark-widget-detail;
|
||||
fill: @button-outline;
|
||||
}
|
||||
|
||||
.NetworkUI__interface--selected {
|
||||
@ -551,7 +548,7 @@
|
||||
stroke: @button-outline;
|
||||
stroke-width: 1;
|
||||
rx: 0;
|
||||
stroke-dasharray: calc(~"100vh - 40px");
|
||||
stroke-dasharray: calc(~"100vh - 115px");
|
||||
stroke-dashoffset: -45;
|
||||
}
|
||||
|
||||
@ -560,7 +557,7 @@
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
rx: 0;
|
||||
stroke-dasharray: calc(~"100vh - 40px");
|
||||
stroke-dasharray: calc(~"100vh - 115px");
|
||||
stroke-dashoffset: -200;
|
||||
}
|
||||
|
||||
@ -636,23 +633,27 @@
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.NetworkUI_chevron{
|
||||
.NetworkUI__chevron{
|
||||
fill: @button-body-pressed;
|
||||
}
|
||||
|
||||
.NetworkUI_chevron--hover{
|
||||
.NetworkUI__chevron--hover,
|
||||
.NetworkUI__chevron--pressed{
|
||||
cursor: pointer;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.NetworkUI_iconBackground{
|
||||
.NetworkUI__iconBackground{
|
||||
fill:@button-body;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.NetworkUI_iconBackground--hover{
|
||||
fill:@icon-background-hover;
|
||||
.NetworkUI__iconBackground--hover,
|
||||
.NetworkUI__iconBackground--pressed{
|
||||
fill: @icon-background-hover;
|
||||
}
|
||||
|
||||
|
||||
.NetworkUI__toolbox--title{
|
||||
fill: @dark-widget-detail;
|
||||
text-transform: uppercase;
|
||||
|
||||
@ -1,81 +1,83 @@
|
||||
<!-- Copyright (c) 2017 Red Hat, Inc. -->
|
||||
<g transform="scale(0.75)">
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<g ng-if="item.moving">
|
||||
<!--horizontal line -->
|
||||
<line x1="-150"
|
||||
y1="0"
|
||||
x2="150"
|
||||
y2="0"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
|
||||
<g transform="translate(-50,-50)">
|
||||
<rect
|
||||
ry=15
|
||||
rx=15
|
||||
width=100
|
||||
height=100
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__switch--selected-conflict' : item.selected ? 'NetworkUI__switch--selected' : 'NetworkUI__switch--remote-selected' : 'NetworkUI__switch--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__switch"
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2C50,4.2,45.8,0,40.8,0
|
||||
z M22.2,12.6l11.1,0l-2.3-2.3c-0.4-0.4-0.4-1.2,0-1.6c0.4-0.4,1.2-0.4,1.6,0l4.2,4.2c0.2,0.2,0.3,0.5,0.3,0.8c0,0.3-0.1,0.6-0.3,0.8
|
||||
l-4.2,4.2c-0.4,0.4-1.2,0.4-1.6,0c-0.4-0.4-0.4-1.2,0-1.6l2.3-2.3H22.2c-0.6,0-1.1-0.5-1.1-1.1C21.1,13.1,21.6,12.6,22.2,12.6z
|
||||
M10,21.2c0-0.3,0.1-0.6,0.3-0.8l4.2-4.2c0.4-0.4,1.2-0.4,1.6,0c0.4,0.4,0.4,1.2,0,1.6l-2.3,2.3H25c0.6,0,1.1,0.5,1.1,1.1
|
||||
c0,0.6-0.5,1.1-1.1,1.1l-11.1,0l2.3,2.3c0.4,0.4,0.4,1.2,0,1.6c-0.4,0.4-1.2,0.4-1.6,0L10.3,22C10.1,21.8,10,21.5,10,21.2z
|
||||
M27.8,37.4l-11.1,0l2.3,2.3c0.4,0.4,0.4,1.2,0,1.6c-0.4,0.4-1.2,0.4-1.6,0l-4.2-4.2c-0.2-0.2-0.3-0.5-0.3-0.8
|
||||
c0-0.3,0.1-0.6,0.3-0.8l4.2-4.2c0.4-0.4,1.2-0.4,1.6,0c0.4,0.4,0.4,1.2,0,1.6l-2.3,2.3h11.1c0.6,0,1.1,0.5,1.1,1.1
|
||||
C28.9,36.9,28.4,37.4,27.8,37.4z M39.7,29.6l-4.2,4.2c-0.4,0.4-1.2,0.4-1.6,0c-0.4-0.4-0.4-1.2,0-1.6l2.3-2.3H25
|
||||
c-0.6,0-1.1-0.5-1.1-1.1c0-0.6,0.5-1.1,1.1-1.1l11.1,0l-2.3-2.3c-0.4-0.4-0.4-1.2,0-1.6c0.4-0.4,1.2-0.4,1.6,0l4.2,4.2
|
||||
c0.2,0.2,0.3,0.5,0.3,0.8C40,29.1,39.9,29.4,39.7,29.6z"/>
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-150"
|
||||
x2="0"
|
||||
y2="150"
|
||||
class="NetworkUI--construction">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
</g>
|
||||
</g>
|
||||
<g ng-show="item.icon || current_scale > 0.5">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__switch-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#selected)"
|
||||
x="-25"
|
||||
y="70"> {{item.name}}</text>
|
||||
<text class="NetworkUI__switch-text" x="-25" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
|
||||
<g ng-if="!debug.hidden">
|
||||
<!--horizontal line -->
|
||||
<line x1="-60"
|
||||
y1="0"
|
||||
x2="60"
|
||||
y2="0"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end horizontal line -->
|
||||
|
||||
<!-- vertical line -->
|
||||
<line x1="0"
|
||||
y1="-60"
|
||||
x2="0"
|
||||
y2="60"
|
||||
class="NetworkUI--debug">
|
||||
</line>
|
||||
<!-- end vertical line -->
|
||||
|
||||
<!-- debug rectangle -->
|
||||
<rect x="-50"
|
||||
y="-50"
|
||||
width="100"
|
||||
height="100"
|
||||
class="NetworkUI--debug">
|
||||
</rect>
|
||||
<!-- end debug rectangle -->
|
||||
</g>
|
||||
|
||||
<g transform="translate(-50,-50)">
|
||||
<rect
|
||||
ry=20
|
||||
rx=20
|
||||
width=100
|
||||
height=100
|
||||
ng-attr-class="{{item.selected || item.remote_selected ? item.selected && item.remote_selected ? 'NetworkUI__switch--selected-conflict' : item.selected ? 'NetworkUI__switch--selected' : 'NetworkUI__switch--remote-selected' : 'NetworkUI__switch--background'}}">
|
||||
</rect>
|
||||
<g transform="scale(2)">
|
||||
<path
|
||||
class="NetworkUI__switch"
|
||||
d="M40.8,0H9.2C4.2,0,0,4.2,0,9.2v31.5C0,45.8,4.2,50,9.2,50h31.5c5.1,0,9.2-4.2,9.2-9.2V9.2C50,4.2,45.8,0,40.8,0
|
||||
z M22.2,12.6l11.1,0l-2.3-2.3c-0.4-0.4-0.4-1.2,0-1.6c0.4-0.4,1.2-0.4,1.6,0l4.2,4.2c0.2,0.2,0.3,0.5,0.3,0.8c0,0.3-0.1,0.6-0.3,0.8
|
||||
l-4.2,4.2c-0.4,0.4-1.2,0.4-1.6,0c-0.4-0.4-0.4-1.2,0-1.6l2.3-2.3H22.2c-0.6,0-1.1-0.5-1.1-1.1C21.1,13.1,21.6,12.6,22.2,12.6z
|
||||
M10,21.2c0-0.3,0.1-0.6,0.3-0.8l4.2-4.2c0.4-0.4,1.2-0.4,1.6,0c0.4,0.4,0.4,1.2,0,1.6l-2.3,2.3H25c0.6,0,1.1,0.5,1.1,1.1
|
||||
c0,0.6-0.5,1.1-1.1,1.1l-11.1,0l2.3,2.3c0.4,0.4,0.4,1.2,0,1.6c-0.4,0.4-1.2,0.4-1.6,0L10.3,22C10.1,21.8,10,21.5,10,21.2z
|
||||
M27.8,37.4l-11.1,0l2.3,2.3c0.4,0.4,0.4,1.2,0,1.6c-0.4,0.4-1.2,0.4-1.6,0l-4.2-4.2c-0.2-0.2-0.3-0.5-0.3-0.8
|
||||
c0-0.3,0.1-0.6,0.3-0.8l4.2-4.2c0.4-0.4,1.2-0.4,1.6,0c0.4,0.4,0.4,1.2,0,1.6l-2.3,2.3h11.1c0.6,0,1.1,0.5,1.1,1.1
|
||||
C28.9,36.9,28.4,37.4,27.8,37.4z M39.7,29.6l-4.2,4.2c-0.4,0.4-1.2,0.4-1.6,0c-0.4-0.4-0.4-1.2,0-1.6l2.3-2.3H25
|
||||
c-0.6,0-1.1-0.5-1.1-1.1c0-0.6,0.5-1.1,1.1-1.1l11.1,0l-2.3-2.3c-0.4-0.4-0.4-1.2,0-1.6c0.4-0.4,1.2-0.4,1.6,0l4.2,4.2
|
||||
c0.2,0.2,0.3,0.5,0.3,0.8C40,29.1,39.9,29.4,39.7,29.6z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g ng-show="item.icon || current_scale > 0.5">
|
||||
<text ng-attr-class="{{item.selected && ! item.edit_label ? 'NetworkUI__switch-text--selected' : 'NetworkUI--hidden'}}"
|
||||
filter="url(#background)"
|
||||
text-anchor="middle"
|
||||
x="0"
|
||||
y="70"> {{item.name}}</text>
|
||||
<text class="NetworkUI__switch-text" filter="url(#background)" text-anchor="middle" x="0" y="70">{{item.name}}{{item.edit_label?'_':''}}</text>
|
||||
</g>
|
||||
<g>
|
||||
|
||||
@ -80,6 +80,8 @@ _Scale.prototype.onMouseWheel = function (controller, msg_type, message) {
|
||||
controller.scope.current_scale = new_scale;
|
||||
controller.scope.panX = new_panX;
|
||||
controller.scope.panY = new_panY;
|
||||
var item = controller.scope.context_menus[0];
|
||||
item.enabled = false;
|
||||
controller.scope.updatePanAndScale();
|
||||
controller.changeState(Ready);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user