mirror of
https://github.com/ansible/awx.git
synced 2026-01-20 14:11:24 -03:30
2736aecfb2
* 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
199 lines
10 KiB
HTML
199 lines
10 KiB
HTML
<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>
|
|
</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>
|
|
|
|
<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 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>
|
|
|
|
|
|
|
|
<div id="alert-modal" class="modal fade">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" ng-hide="disableButtons" data-target="#alert-modal" data-dismiss="modal" class="modal" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
|
|
<h3 id="alertHeader" ng-bind="alertHeader"></h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="alert-modal-msg" class="alert" ng-bind-html="alertBody"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#" ng-hide="disableButtons" data-target="#form-modal" data-dismiss="modal" id="alert_ok_btn" class="btn btn-default" translate>OK</a>
|
|
</div>
|
|
</div>
|
|
<!-- modal-content -->
|
|
</div>
|
|
<!-- modal-dialog -->
|
|
</div>
|