yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add button to check all groups + a bit of style polish

Browse Source
This commit is contained in:
Mads Rasmussen
2016-07-27 09:31:01 +02:00
parent 8fd1743bce
commit 29be571afd
3 changed files with 83 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/Umbraco.Web.UI.Client/src/less/healthcheck.less
View File

@@ -1,12 +1,20 @@
/* Vars */
@red-orange: #FF3F34;
@sunrise: #F5D226;
@emerald: #50C878;
.umb-healthcheck {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
}
.umb-healthcheck-help-text {
line-height: 1.6em;
margin-bottom: 30px;
}
.umb-healthcheck-action-bar {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
}
@@ -42,7 +50,6 @@
/* Title */
.umb-healthcheck-title {
margin-bottom: 15px;
font-size: 14px;
font-weight: bold;
}
@@ -50,28 +57,26 @@
/* Messages */
.umb-healthcheck-messages {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 15px;
}
.umb-healthcheck-message {
position: relative;
background: #fff;
border-radius: 50px;
display: flex;
align-items: center;
flex: 1 1 auto;
padding: 5px 10px;
display: inline-flex;
align-items: center;
padding-left: 8px;
padding-right: 8px;
margin-bottom: 5px;
color: #000;
font-weight: bold;
font-size: 13px;
}
.umb-healthcheck-message i {
font-size: 20px;
margin-right: 5px;
font-size: 15px;
margin-right: 3px;
}
.umb-healthcheck-details-link {
@@ -99,11 +104,11 @@
font-size: 14px;
font-weight: bold;
height: 38px;
height: 30px;
line-height: 1;
max-width: 100%;
padding: 0 18px;
padding: 0 15px;
color: #484848;
background-color: #e0e0e0;
@@ -235,7 +240,7 @@
}
.umb-healthcheck-group__details-checks {
border: 2px solid @grayLight;
border: 1px solid @grayLight;
border-top: none;
border-radius: 0 0 3px 3px;
}
@@ -252,13 +257,13 @@
font-size: 14px;
color: @black;
font-weight: bold;
margin-bottom: 2px;
}
.umb-healthcheck-group__details-check-description {
font-size: 12px;
color: @grayMed;
line-height: 1.6rem;
//margin-top: 10px;
line-height: 1.6em;
}
.umb-healthcheck-group__details-status {
@@ -328,6 +333,6 @@
}
.umb-healthcheck-group__details-status-action-description {
margin-top: 10px;
font-size: 13px;
margin-top: 5px;
font-size: 11px;
}

20
src/Umbraco.Web.UI.Client/src/views/dashboard/developer/healthcheck.controller.js
View File

@@ -16,6 +16,7 @@
vm.getStatus = getStatus;
vm.executeAction = executeAction;
vm.checkAllGroups = checkAllGroups;
vm.checkAllInGroup = checkAllInGroup;
vm.openGroup = openGroup;
vm.setViewState = setViewState;
@@ -23,16 +24,7 @@
// Get a (grouped) list of all health checks
healthCheckResource.getAllChecks().then(
function(response) {
// set number of checks which has been executed
for (var i = 0; i < response.length; i++) {
var group = response[i];
group.checkCounter = 0;
checkAllInGroup(group, group.checks);
}
vm.groups = response;
}
);
@@ -86,6 +78,16 @@
});
}
function checkAllGroups(groups) {
// set number of checks which has been executed
for (var i = 0; i < groups.length; i++) {
var group = groups[i];
console.log(group);
checkAllInGroup(group, group.checks);
}
vm.groups = groups;
}
function checkAllInGroup(group, checks) {
group.checkCounter = 0;

76
src/Umbraco.Web.UI.Client/src/views/dashboard/developer/healthcheck.html
View File

@@ -1,43 +1,55 @@
<div ng-controller="Umbraco.Dashboard.HealthCheckController as vm">
<h3 class="bold">Health Check</h3>
<p class="faded">The health checker evaluates various areas of your site for best practice settings, configuration, potential problems, etc. You can easily fix problems by pressing a button. <br/>
You can add your own health checks, have a look at <a href="https://our.umbraco.org/documentation/Extending/Healthcheck/" class="btn-link -underline">the documentation for more information</a> about custom health checks.</p>
<div class="umb-healthcheck" ng-if="vm.viewState === 'list'">
<div ng-if="vm.viewState === 'list'">
<div class="umb-air" ng-repeat="group in vm.groups" ng-click="vm.openGroup(group);">
<div class="umb-healthcheck-group">
<div class="umb-healthcheck-title">{{group.name}}</div>
<h3 class="bold">Health Check</h3>
<div class="umb-healthcheck-help-text faded">
<p>The health checker evaluates various areas of your site for best practice settings, configuration, potential problems, etc. You can easily fix problems by pressing a button.
You can add your own health checks, have a look at <a href="https://our.umbraco.org/documentation/Extending/Healthcheck/" class="btn-link -underline">the documentation for more information</a> about custom health checks.</p>
</div>
<div class="umb-healthcheck-group__load-container" ng-if="group.loading">
<umb-load-indicator></umb-load-indicator>
</div>
<div class="umb-healthcheck-action-bar">
<button class="umb-era-button -blue" type="button" ng-click="vm.checkAllGroups(vm.groups);">Check All Groups</button>
</div>
<div class="umb-healthcheck-messages" ng-if="!group.loading">
<div class="umb-healthcheck">
<div class="umb-healthcheck-message" ng-if="group.totalSuccess > 0">
<i class="icon-check color-green"></i>
{{ group.totalSuccess }}
<div class="umb-air" ng-repeat="group in vm.groups" ng-click="vm.openGroup(group);">
<div class="umb-healthcheck-group">
<div class="umb-healthcheck-title">{{group.name}}</div>
<div class="umb-healthcheck-group__load-container" ng-if="group.loading">
<umb-load-indicator></umb-load-indicator>
</div>
<div class="umb-healthcheck-message" ng-if="group.totalWarning > 0">
<i class="icon-alert color-yellow"></i>
{{ group.totalWarning }}
</div>
<div class="umb-healthcheck-messages" ng-if="!group.loading && group.totalSuccess > 0 || group.totalWarning > 0 || group.totalError > 0 || group.totalInfo > 0">
<div class="umb-healthcheck-message" ng-if="group.totalError > 0">
<i class="icon-delete color-red"></i>
{{ group.totalError }}
</div>
<div class="umb-healthcheck-message" ng-if="group.totalSuccess > 0">
<i class="icon-check color-green"></i>
{{ group.totalSuccess }}
</div>
<div class="umb-healthcheck-message" ng-if="group.totalWarning > 0">
<i class="icon-alert color-yellow"></i>
{{ group.totalWarning }}
</div>
<div class="umb-healthcheck-message" ng-if="group.totalError > 0">
<i class="icon-delete color-red"></i>
{{ group.totalError }}
</div>
<div class="umb-healthcheck-message" ng-if="group.totalInfo > 0">
<i class="umb-healthcheck-status-icon icon-info"></i>
{{ group.totalInfo }}
</div>
<div class="umb-healthcheck-message" ng-if="group.totalInfo > 0">
<i class="umb-healthcheck-status-icon icon-info"></i>
{{ group.totalInfo }}
</div>
</div>
</div>
</div>
</div>
@@ -46,7 +58,7 @@
<umb-editor-sub-header>
<umb-editor-sub-header-content-left>
<a class="umb-healthcheck-back-link" href="" ng-click="vm.setViewState('list');">&larr; Take me back</a>
<a class="umb-healthcheck-back-link" href="" ng-click="vm.setViewState('list');">&larr; Back to overview</a>
</umb-editor-sub-header-content-left>
</umb-editor-sub-header>
@@ -55,7 +67,7 @@
<div class="umb-healthcheck-group__details-group-title">
<div class="umb-healthcheck-group__details-group-name">{{ vm.selectedGroup.name }}</div>
<button class="umb-era-button -white -text-black" type="button" ng-click="vm.checkAllInGroup(vm.selectedGroup, vm.selectedGroup.checks);">Check all</button>
<button class="umb-era-button -white -text-black" type="button" ng-click="vm.checkAllInGroup(vm.selectedGroup, vm.selectedGroup.checks);">Check group</button>
</div>
<div class="umb-healthcheck-group__details-checks">
@@ -85,11 +97,11 @@
<div class="umb-healthcheck-group__details-status-actions" ng-if="status.actions">
<div class="umb-healthcheck-group__details-status-action" ng-repeat="action in status.actions">
<span ng-show="action.valueRequired">
Set new value:
<div ng-show="action.valueRequired">
<div><label class="bold">Set new value:</label></div>
<input type="text" ng-model="action.providedValue" required/>
</span>
<button type="button" class="umb-era-button" ng-click="vm.executeAction(check, $index, action);">{{action.name}}</button>
</div>
<button type="button" class="umb-era-button -blue" ng-click="vm.executeAction(check, $index, action);">{{action.name}}</button>
<div class="umb-healthcheck-group__details-status-action-description" ng-if="action.description" ng-bind-html="action.description"></div>
</div>
</div>