mirror of
https://github.com/ansible/awx.git
synced 2026-01-16 04:10:44 -03:30
Merge pull request #1470 from kensible/1045-systemTracking
1045 System Tracking restyle
This commit is contained in:
kensible
commit
4f2b245f71
@ -50,6 +50,8 @@ function InventoriesManage($log, $scope, $rootScope, $location,
|
||||
// you need this so that the event doesn't bubble to the watcher above
|
||||
// for the host list
|
||||
e.stopPropagation();
|
||||
var trackingButton = angular.element(document.querySelector('.system-tracking'));
|
||||
trackingButton.html('SYSTEM TRACKING');
|
||||
if (selection.length === 0) {
|
||||
$scope.hostsSelected = false;
|
||||
} else if (selection.length === 1) {
|
||||
|
||||
@ -91,6 +91,7 @@ export default
|
||||
dataPlacement: 'top',
|
||||
awFeature: 'system_tracking',
|
||||
ngDisabled: 'systemTrackingDisabled',
|
||||
actionClass: 'btn List-buttonDefault system-tracking',
|
||||
ngShow: 'hostsSelected'
|
||||
},
|
||||
refresh: {
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
/** @define FactDataError */
|
||||
|
||||
@import "../../shared/branding/colors.less";
|
||||
|
||||
.FactDataError {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// background-color: @ansible-red;
|
||||
|
||||
&-message {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
width: 75%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
&-note {
|
||||
|
||||
&--full {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
/*************************************************
|
||||
* Copyright (c) 2015 Ansible, Inc.
|
||||
*
|
||||
* All Rights Reserved
|
||||
*************************************************/
|
||||
|
||||
/** @define FactDataGroup */
|
||||
|
||||
@import '../../shared/text-label.less';
|
||||
|
||||
.FactDataGroup {
|
||||
&-headings {
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
/** @define FactDataTableHeading */
|
||||
|
||||
.FactDataTableHeading {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1em;
|
||||
align-items: flex-end;
|
||||
font-weight: bold;
|
||||
|
||||
&-host {
|
||||
margin-bottom: 3px; // just some breathing room
|
||||
|
||||
&:after {
|
||||
content: " scanned on";
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
&-date {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
// Override some global styling on h3 tags
|
||||
h3 {
|
||||
margin: 1em initial;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
/** @define FactDataTable */
|
||||
@import "../../shared/branding/colors.default.less";
|
||||
|
||||
.FactDataTable {
|
||||
&-row, &-headingRow, &-groupHeadingRow {
|
||||
@ -6,14 +7,18 @@
|
||||
}
|
||||
|
||||
&-row {
|
||||
margin-bottom: 0.5em;
|
||||
padding: .5em 0;
|
||||
align-items: center;
|
||||
transition: background-color 100ms, border-color 100ms;
|
||||
// max-height: 36px;
|
||||
border: solid 1px #fff;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: @default-no-items-bord;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #ebebeb;
|
||||
border-color: #adadad;
|
||||
background-color: @default-list-header-bg;
|
||||
border-color: @default-border;
|
||||
}
|
||||
|
||||
&--flexible {
|
||||
@ -23,15 +28,39 @@
|
||||
|
||||
}
|
||||
|
||||
&-repeat {
|
||||
&:nth-child(even) {
|
||||
background-color: @default-no-items-bord;
|
||||
}
|
||||
}
|
||||
|
||||
&-headingRow {
|
||||
border-bottom: 1px solid #adadad;
|
||||
margin-bottom: 1.5em;
|
||||
background-color: @default-icon-hov;
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
|
||||
.FactDataTable-column.FactDataTableHeading:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-groupHeadingRow {
|
||||
background-color: @default-icon-hov;
|
||||
padding: 1em 12px;
|
||||
color: @default-as-detail-txt;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&-column {
|
||||
padding: 8px;
|
||||
flex: 1 0 33%;
|
||||
align-self: flex-start;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
word-wrap: break-word;
|
||||
&--offsetLeft {
|
||||
margin-left: 33%;
|
||||
}
|
||||
@ -49,3 +78,71 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.FactDataError {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&-message {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
width: 75%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
&-note {
|
||||
&--full {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.FactDataGroup {
|
||||
&-headings {
|
||||
&:hover {
|
||||
background-color: @default-bg;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.FactDataTableHeading {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
font-size: 14px;
|
||||
color: @default-as-detail-txt;
|
||||
text-transform: uppercase;
|
||||
|
||||
&-host {
|
||||
margin: 0;
|
||||
}
|
||||
&-date {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
// Override some global styling on h3 tags
|
||||
h3 {
|
||||
margin: 1em initial;
|
||||
}
|
||||
}
|
||||
|
||||
.FactDatum {
|
||||
&--divergent {
|
||||
//margin-bottom: 0.5rem;
|
||||
background-color: @default-err;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:hover {
|
||||
background-color: @default-err;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,29 +3,29 @@
|
||||
The selected fact scans were identical for this module. Showing all facts from the latest selected scan instead.
|
||||
</div>
|
||||
<div class="FactDataTable-headingRow">
|
||||
<h3 class="FactDataTable-column FactDataTableHeading">
|
||||
<span class="FactDataTable-column FactDataTableHeading">
|
||||
<span class="FactDataTableHeading-label">
|
||||
Comparing facts collected from:
|
||||
Comparing facts from:
|
||||
</span>
|
||||
</h3>
|
||||
<h3 class="FactDataTable-column FactDataTableHeading">
|
||||
</span>
|
||||
<span class="FactDataTable-column FactDataTableHeading">
|
||||
<span ng-if="leftDataNoScans">
|
||||
<span class="u-unbold">No scans for</span>
|
||||
{{leftHostname}}
|
||||
<span class="u-unbold">on</span>
|
||||
</span>
|
||||
<span class="FactDataTableHeading-host" ng-if="!leftDataNoScans">{{leftHostname}}</span>
|
||||
<span class="FactDataTableHeading-date" ng-if="!singleResultView">{{leftScanDate|longDate}}</span>
|
||||
<span class="FactDataTableHeading-date" ng-if="singleResultView">{{rightScanDate|longDate}}</span>
|
||||
</h3>
|
||||
<h3 class="FactDataTable-column FactDataTableHeading" ng-if="!singleResultView">
|
||||
<span class="FactDataTableHeading-host" ng-if="!leftDataNoScans">{{leftHostname}} - </span>
|
||||
<span class="FactDataTableHeading-date" ng-if="!singleResultView"> {{leftScanDate|longDate}}</span>
|
||||
<span class="FactDataTableHeading-date" ng-if="singleResultView"> {{rightScanDate|longDate}}</span>
|
||||
</span>
|
||||
<span class="FactDataTable-column FactDataTableHeading" ng-if="!singleResultView">
|
||||
<span ng-if="rightDataNoScans">No scans for {{rightHostname}} on</span>
|
||||
<span class="FactDataTableHeading-host" ng-if="!rightDataNoScans">{{rightHostname}}</span>
|
||||
<span class="FactDataTableHeading-host" ng-if="!rightDataNoScans">{{rightHostname}} - </span>
|
||||
<span class="FactDataTableHeading-date">{{rightScanDate|longDate}}</span>
|
||||
</h3>
|
||||
</span>
|
||||
</div>
|
||||
<div ng-if="!isNestedDisplay">
|
||||
<div ng-repeat="group in factData | orderBy: 'displayKeyPath'">
|
||||
<div class="FactDataTable-repeat" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
|
||||
<div class="FactDataTable-row FactDataTable-row--flexible" ng-if="group.containsValueArray">
|
||||
<span class="FactDataTable-column">{{group.facts.keyName}}</span>
|
||||
<span class="FactDataTable-column FactDataTable-columnArray">
|
||||
@ -51,9 +51,9 @@
|
||||
<div class="FactDataTable-factGroup FactDataGroup" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
|
||||
|
||||
<div class="FactDataTable-groupHeadingRow" ng-if="group.displayKeyPath">
|
||||
<h2 class="FactDataTable-column FactDataTable-column--full FactDataGroup-header">
|
||||
<span class="FactDataTable-column FactDataTable-column--full FactDataGroup-header">
|
||||
{{group.displayKeyPath}}
|
||||
</h2>
|
||||
</span>
|
||||
</div>
|
||||
<div class="FactDataGroup-facts" data-facts="{{group.facts}}">
|
||||
<div class="FactDataTable-arrayGroup" ng-if="group.isFactArray" ng-repeat="arrayGroup in group.facts" data-array-group="{{arrayGroup}}">
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
/** @define FactDatum */
|
||||
|
||||
.FactDatum {
|
||||
&--divergent {
|
||||
margin-bottom: 0;
|
||||
background-color: #ffb2ae;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #ffb2ae;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.FactDataTable-column:first-child {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,8 @@
|
||||
/** @define FactModuleFilter */
|
||||
|
||||
@import "../shared/branding/colors.less";
|
||||
@import "../shared/branding/colors.default.less";
|
||||
|
||||
|
||||
.FactModuleFilter {
|
||||
width: 100%;
|
||||
@ -8,19 +10,23 @@
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: 2.8rem;
|
||||
|
||||
.btn, .btn-default {
|
||||
margin-right: 20px;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
&-module {
|
||||
|
||||
background-color: @disabled-item-background;
|
||||
color: @disabled-item-text;
|
||||
border-color: @disabled-item-border;
|
||||
background-color: @enabled-item-background;
|
||||
border-color: @enabled-item-border;
|
||||
color: @default-interface-txt;
|
||||
|
||||
flex: 1 1 20%;
|
||||
@media screen and (max-width: 750px) {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
&:active, &:focus {
|
||||
// copied from bootstrap's .btn:focus
|
||||
background-color: @enabled-item-background;
|
||||
background-color: @default-icon-hov;
|
||||
border-color: @enabled-item-border;
|
||||
color: @enabled-item-text;
|
||||
box-shadow: none;
|
||||
@ -30,17 +36,19 @@
|
||||
|
||||
&-module.is-active {
|
||||
cursor: default;
|
||||
background-color: @enabled-item-background;
|
||||
border-color: @enabled-item-border;
|
||||
color: @enabled-item-text;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
background-color: @default-icon;
|
||||
color: #fff;
|
||||
border-color: @default-icon;
|
||||
|
||||
&:active, &:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @enabled-item-background;
|
||||
background-color: @default-as-detail-txt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,27 +1,38 @@
|
||||
/** @define FactModulePickers */
|
||||
// /** @define FactModulePickers */
|
||||
//
|
||||
// .FactModulePickers {
|
||||
// //width: 100%;
|
||||
// display: flex;
|
||||
// margin-bottom: 15px;
|
||||
//
|
||||
// &-dateContainer {
|
||||
// flex: 1 0 auto;
|
||||
// display: flex;
|
||||
// flex-direction: column
|
||||
// }
|
||||
//
|
||||
// &-dateContainer--left {
|
||||
// margin-right: 7px;
|
||||
// }
|
||||
//
|
||||
// &-dateContainer--right {
|
||||
// margin-left: 7px;
|
||||
// }
|
||||
//
|
||||
// &-label {
|
||||
// flex: 1 0 auto;
|
||||
// font-weight: 700;
|
||||
// padding-bottom: 5px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.FactModulePickers {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
@import "../../shared/branding/colors.default.less";
|
||||
|
||||
&-dateContainer {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
&-dateContainer--left {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
&-dateContainer--right {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
&-label {
|
||||
flex: 1 0 auto;
|
||||
font-weight: 700;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.FactModulePickers-label {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: @default-interface-txt;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../shared/branding/colors.default.less";
|
||||
.SystemTrackingContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
min-height: 85vh;
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
@ -11,4 +11,27 @@
|
||||
flex: 1 0 auto;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.DatePicker {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.DatePicker-input {
|
||||
width: 100%;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.DatePicker-icon {
|
||||
i {
|
||||
color: @default-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.SystemTrackingContainer-main {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.FactDatum--divergent {
|
||||
background-color: @default-err;
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,7 +89,15 @@ function controller($rootScope,
|
||||
leftRange,
|
||||
rightRange)
|
||||
.then(function(responses) {
|
||||
var data = _.pluck(responses, 'fact');
|
||||
var data = [];
|
||||
_.each(responses, function(response) {
|
||||
if(response.fact) {
|
||||
data.push(response.fact);
|
||||
} else if (response.facts) {
|
||||
data.push(response.facts);
|
||||
}
|
||||
});
|
||||
|
||||
if (_.isEmpty(data[0]) && _.isEmpty(data[1])) {
|
||||
return _.reject({
|
||||
name: 'NoScanData',
|
||||
@ -253,7 +261,6 @@ function controller($rootScope,
|
||||
$scope.factData = info.factData;
|
||||
$scope.isNestedDisplay = info.isNestedDisplay;
|
||||
}
|
||||
|
||||
return info;
|
||||
|
||||
}).catch(function(error) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<section class="SystemTrackingContainer" ng-if="noModuleData">
|
||||
<section class="SystemTrackingContainer Panel" ng-if="noModuleData">
|
||||
|
||||
<section class="FactDataError SystemTrackingContainer-main">
|
||||
<p class="FactDataError-note--full">
|
||||
@ -6,45 +6,38 @@
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
<section class="SystemTrackingContainer" ng-hide="noModuleData">
|
||||
|
||||
<div class="FactModulePickers">
|
||||
<div class="FactModulePickers-dateContainer FactModulePickers-dateContainer--left">
|
||||
<span class="FactModulePickers-label">{{ factModulePickersLabelLeft }}</span>
|
||||
<date-picker
|
||||
date="leftDate"
|
||||
input-class='{ "u-input-info-alert": leftDateWarning }'>
|
||||
</date-picker>
|
||||
<span
|
||||
class="FactModulePickers-warning"
|
||||
ng-class='{ "u-hiddenVisually": !leftDateWarning, "u-info-alert": leftDateWarning }'>
|
||||
There were no fact scans on this date, using a prior scan instead.
|
||||
</span>
|
||||
</div>
|
||||
<div class="FactModulePickers-dateContainer FactModulePickers-dateContainer--right" ng-show="compareMode == 'single-host'">
|
||||
<span class="FactModulePickers-label">{{ factModulePickersLabelRight }}</span>
|
||||
<date-picker
|
||||
date="rightDate"
|
||||
min-date="leftDate"
|
||||
input-class='{ "u-input-info-alert": rightDateWarning }'>
|
||||
</date-picker>
|
||||
<span
|
||||
class="FactModulePickers-warning"
|
||||
ng-class='{ "u-hiddenVisually": !rightDateWarning, "u-info-alert": rightDateWarning }'>
|
||||
There were no fact scans on this date, using a prior scan instead.
|
||||
</span>
|
||||
<section class="SystemTrackingContainer Panel" ng-hide="noModuleData">
|
||||
<div class="row">
|
||||
<div class="Form-title ng-binding col-md-3">SYSTEM TRACKING | {{inventory.name}}</div>
|
||||
<div class="FactModulePickers row col-md-8 col-md-offset-1">
|
||||
<div class="row">
|
||||
<div class="FactModulePickers-dateContainer FactModulePickers-dateContainer--left col-md-6">
|
||||
<span class="FactModulePickers-label col-md-6">{{ factModulePickersLabelLeft }}</span>
|
||||
<date-picker date="leftDate" input-class='{ "u-input-info-alert": leftDateWarning }' class="col-md-5">
|
||||
</date-picker>
|
||||
<span class="FactModulePickers-warning" ng-class='{ "u-hiddenVisually": !leftDateWarning, "u-info-alert": leftDateWarning }'>
|
||||
There were no fact scans on this date, using a prior scan instead.
|
||||
</span>
|
||||
</div>
|
||||
<div class="FactModulePickers-dateContainer FactModulePickers-dateContainer--right col-md-6" ng-show="compareMode == 'single-host'">
|
||||
<span class="FactModulePickers-label col-md-6">{{ factModulePickersLabelRight }}</span>
|
||||
<date-picker date="rightDate" min-date="leftDate" input-class='{ "u-input-info-alert": rightDateWarning }' class="col-md-5">
|
||||
</date-picker>
|
||||
<span class="FactModulePickers-warning" ng-class='{ "u-hiddenVisually": !rightDateWarning, "u-info-alert": rightDateWarning }'>
|
||||
There were no fact scans on this date, using a prior scan instead.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="btn-group FactModuleFilter">
|
||||
<button
|
||||
ng-class="{ 'btn': true,
|
||||
<nav class="FactModuleFilter">
|
||||
<button ng-class="{ 'btn': true,
|
||||
'btn-default': true,
|
||||
'FactModuleFilter-module': true,
|
||||
'is-active': module.isActive,
|
||||
}"
|
||||
ng-click="setActiveModule(module.name)"
|
||||
ng-repeat="module in modules | orderBy: 'sortKey' track by $index">
|
||||
}" ng-click="setActiveModule(module.name)" ng-repeat="module in modules | orderBy: 'sortKey' track by $index">
|
||||
{{module.displayName}}
|
||||
</button>
|
||||
</nav>
|
||||
@ -65,19 +58,10 @@
|
||||
The two fact scans were identical for this module.
|
||||
</p>
|
||||
<p class="FactDataError-note" ng-switch-default>
|
||||
We were not able to find any facts collected for this inventory or module. To setup or run scan jobs, edit the "<a link-to="inventoryEdit" model="{ inventory_id: inventory }">{{inventory.name}}</a>" inventory and select "Scan Jobs Templates."
|
||||
We were not able to find any facts collected for this inventory or module. To setup or run scan jobs, edit the "<a link-to="inventoryEdit" model="{ inventory_id: inventory }">{{inventory.name}}</a>" inventory and select "Scan Jobs Templates."
|
||||
</p>
|
||||
</section>
|
||||
<fact-data-table
|
||||
ng-if="!error"
|
||||
left-hostname="leftHostname"
|
||||
right-hostname="rightHostname"
|
||||
left-scan-date="leftScanDate"
|
||||
right-scan-date="rightScanDate"
|
||||
left-data-no-scans="leftDataNoScans"
|
||||
right-data-no-scans="rightDataNoScans"
|
||||
is-nested-display="isNestedDisplay"
|
||||
single-result-view="singleFactOnly"
|
||||
fact-data="factData">
|
||||
<fact-data-table ng-if="!error" left-hostname="leftHostname" right-hostname="rightHostname" left-scan-date="leftScanDate" right-scan-date="rightScanDate" left-data-no-scans="leftDataNoScans" right-data-no-scans="rightDataNoScans" is-nested-display="isNestedDisplay"
|
||||
single-result-view="singleFactOnly" fact-data="factData">
|
||||
</fact-data-table>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user