1
0
Fork 0

Indicate app problems more clearly.

This commit is contained in:
Alan Plum 2015-04-23 17:03:24 +02:00
parent 18a11a72d4
commit c16388024f
8 changed files with 84 additions and 24 deletions

View File

@ -60,10 +60,22 @@
sendRequest(this, callback, "DELETE");
},
isBroken: function () {
return false;
},
needsAttention: function () {
return this.isBroken() || this.needsConfiguration() || this.hasUnconfiguredDependencies();
},
needsConfiguration: function () {
return _.any(this.get('config'), function (cfg) {
return cfg.current === undefined;
}) || _.any(this.get('deps'), function (dep) {
});
},
hasUnconfiguredDependencies: function () {
return _.any(this.get('deps'), function (dep) {
return dep.current === undefined;
});
},

View File

@ -77,12 +77,14 @@
<span class="version"><%= app.attributes.version %></span>
</h3>
</div>
<p id="app-unconfigured-warning" class="app-warning" style="display:<%=app.needsConfiguration()?'inline-block':'none' %>;">
<strong>This app has not yet been configured properly.</strong><br>
Please check the app configuration and/or dependencies.
</p>
<p class="description"><%= app.attributes.description %></p>
</div>
<div id="app-warning" class="app-warning" style="display:<%=app.needsAttention()?'block':'none' %>;">
<h4>Out of order</h4>
<p id="app-warning-broken" style="display:<%=app.isBroken()?'block':'none' %>;">This app has failed to mount due to an error.</p>
<p id="app-warning-config" style="display:<%=app.needsConfiguration()?'block':'none' %>;">This app has not yet been configured properly.</p>
<p id="app-warning-deps" style="display:<%=app.hasUnconfiguredDependencies()?'block':'block' %>;">Some dependencies have not yet been set up.</p>
</div>
</div>
<div class="swagger">
<iframe src="/_db/<%= db%>/_admin/aardvark/documentation.html?path=<%= encodeURIComponent(app.encodedMount()) %>" name="Documentation"></iframe>

View File

@ -1,5 +1,18 @@
<script id="foxxActiveView.ejs" type="text/template">
<img src="foxxes/thumbnail?mount=<%= model.encodedMount() %>" height="50" width="50" alt="Icon for App" class="icon">
<% if (model.needsAttention()) { %>
<span class="warning-icons">
<% if (model.isBroken()) { %>
<span class="fa fa-warning" title="Mount error"></span>
<% } %>
<% if (model.needsConfiguration()) { %>
<span class="fa fa-cog" title="Needs configuration">!</span>
<% } %>
<% if (model.hasUnconfiguredDependencies()) { %>
<span class="fa fa-cubes" title="Unconfigured dependencies">!</span>
<% } %>
</span>
<% } %>
<% if(model.isDevelopment()) { %>
<div class="tileBadge">
<span>

View File

@ -37,13 +37,15 @@
updateConfig: function() {
this.model.getConfiguration(function () {
$('#app-unconfigured-warning')[this.model.needsConfiguration() ? 'show' : 'hide']();
$('#app-warning')[this.model.needsAttention() ? 'show' : 'hide']();
$('#app-warning-config')[this.model.needsConfiguration() ? 'show' : 'hide']();
}.bind(this));
},
updateDeps: function() {
this.model.getDependencies(function () {
$('#app-unconfigured-warning')[this.model.needsConfiguration() ? 'show' : 'hide']();
$('#app-warning')[this.model.needsAttention() ? 'show' : 'hide']();
$('#app-warning-deps')[this.model.hasUnconfiguredDependencies() ? 'show' : 'hide']();
}.bind(this));
},

View File

@ -4,7 +4,6 @@
padding: 13px 0 0;
.header {
float: left;
height: 200px;
margin-bottom: 10px;
position: relative;
@ -38,9 +37,8 @@
}
.header_right {
left: 300px;
margin-left: 300px;
padding: 5px;
position: relative;
.header_line {
h3 {
@ -66,12 +64,21 @@
clear: both;
}
}
}
.app-warning {
@include border-radius(6px);
border: 1px solid $c-negative;
color: $c-negative;
padding: 0 8px;
.app-warning {
position: absolute;
top: 0;
right: 20px;
@include border-radius(6px);
border: 1px solid $c-negative-hover;
color: $c-negative;
background: $c-negative-bg;
padding: 4px 8px;
h4, p {
margin: 0;
font-size: 1em;
}
}
}

View File

@ -5,6 +5,7 @@ $c-positive-hover: #788f3d;
$c-negative: #da4f49;
$c-negative-hover: #be342e;
$c-negative-bg: desaturate(lighten($c-negative-hover, 40%), 50%);
$c-neutral: #8f8d8c;
$c-neutral-hover: #736b68;

View File

@ -480,16 +480,8 @@ div.resizecontainer {
section.info {
@if $i < 3 {
width: $content-size;
.header_right {
width: $content-size - 170px;
}
} @else {
width: $content-size - 200px;
.header_right {
width: $content-size - 370px;
}
}
}

View File

@ -25,6 +25,37 @@ $iconsize: 50px;
position: relative;
text-align: center;
.warning-icons {
position: absolute;
left: 0;
top: 0;
background-color: $c-negative;
color: white;
font-size: 11px;
height: 17px;
line-height: 13px;
padding-left: 9px;
padding-right: 4px;
&:before {
content: '';
position: absolute;
right: -17px;
border-top: 17px solid $c-negative;
border-right: 17px solid transparent;
}
.fa {
&+.fa {
margin-left: 1px;
}
&:before {
font-size: 8px;
}
}
}
img {
&.icon {
height: $iconsize;
@ -169,7 +200,7 @@ $iconsize: 50px;
height: 0;
padding-left: 4px;
padding-right: 9px;
&.loading {
border-bottom-color: $c-unloaded;
}