Skip to content

Commit

Permalink
hub ui improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrewmyhre
andrewmyhre committed Jul 18, 2012
1 parent fc3f322 commit 80f7fdc
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 51 deletions.
18 changes: 11 additions & 7 deletions DeployD/DeployD.Hub/Content/views/home.css
View file
Expand Up @@ -17,9 +17,9 @@ li.agent {
margin-bottom: 2px;
}

li.agent:hover{
background-color: #E6E4DE;
}
/*li.agent:hover{
background-color: #f3f3f3;
}*/
ul.packages {
list-style: none;
}
Expand Down Expand Up @@ -51,14 +51,18 @@ ul.tasks li {
color: green;
}

span.notinstalled {
.notinstalled {
color: #888888;
}
span.uptodate {
.uptodate {
color: green;
}
span.outofdate {
color: orangered;
.Running {
color: rgb(0, 131, 215);
}
.outofdate {
color: rgb(255, 168, 0);
font-weight: bold;
}
div.agent-detail {
display: none;
Expand Down
10 changes: 7 additions & 3 deletions DeployD/DeployD.Hub/Scripts/Views/home.js
View file
Expand Up @@ -156,7 +156,8 @@ var _manageAgentDialogOpen = false;
events: {
'click a.unregister-agent': 'unregister',
'click a.manage-agent': 'manage',
'click li.agent' :'toggleDetail'/*,
'click li.agent' :'toggleDetail',
'click a.outofdate': 'toggleDetail'/*,
'click a.agent-logs': 'viewLogs'*/
},
initialize: function () {
Expand Down Expand Up @@ -218,7 +219,11 @@ var _manageAgentDialogOpen = false;
return true;
},
toggleDetail: function (event) {
$('div.agent-detail', event.target).toggle();
if (event.currentTarget.nodeName=="A") { // 'updates available' link
$('div.agent-detail', $(event.currentTarget).parent().parent()).toggle();
} else if (event.currentTarget.nodeName=="LI") { // agent header
$('div.agent-detail', event.target).toggle();
}
}
});

Expand Down Expand Up @@ -647,7 +652,6 @@ $(document).ready(function () {
_agentPackageLogFolderTemplate = $('#agent-log-packages-list-template').html();
_addAgentFormTemplate = $('#add-agent-form-template').html();

$('div#app').append(addAgentFormView.$el);
$('div#app').append(updateAgentsToVersionView.$el);
$('div#app').append(agentsListView.$el);

Expand Down
101 changes: 60 additions & 41 deletions DeployD/DeployD.Hub/Views/Home/Index.cshtml
View file
Expand Up @@ -33,56 +33,69 @@

<script type="text/template" id="agent-row-template">
<li class="agent" id="<%=hostname%>">
<input type="checkbox" id="select-<%=hostname%>" data-value="<%=hostname%>" name="select-agent" />
<label for="select-<%=hostname%>" class="agent-hostname <%if (stale) {%>stale<%}%>">
<%=hostname%>
</label> (<%=environment%>)
<%if (approved) {
if (contacted && !stale) {%>
<a class="manage-agent" data-id="<%=hostname%>" href="javascript:void(0);">Start Deployment...</a>&nbsp;
<a class="agent-logs" href="#/logs/<%=hostname%>">Logs</a>&nbsp;
<a class="unregister-agent" href="javascript:void(0);"><img src="/content/images/delete.png" alt="unregister agent" title="unregister agent" /></a>
<%if (packages&&packages.length>0) {
var distinctVersions=[];
var installedVersions = new jsinq.Enumerable(packages)
.where(function(p) { return p.installed; })
.groupBy(function(p) { return p.installedVersion; })
.select(function(g) { return { version: g.key, count: g.count()}; });
installedVersions.each(function(version, index) {%>
<%=version.version%> (<%=version.count%>)
<%});%>
<%}
<%
var headerClass = "uptodate";
if (currentTasks && currentTasks.length > 0)
headerClass = "Running";
else if (outOfDate)
headerClass = "outofdate";
%>
<span class="agent-header <%=headerClass%>">
<input type="checkbox" id="select-<%=hostname%>" data-value="<%=hostname%>" name="select-agent" />
<label for="select-<%=hostname%>" class="agent-hostname <%if (stale) {%>stale<%}%>">
<%=hostname%>
</label> (<%=environment%>)
<%if (approved) {
if (contacted && !stale) {%>
<a class="unregister-agent" href="javascript:void(0);"><img src="/content/images/delete.png" alt="unregister agent" title="unregister agent" /></a>
<%if (packages&&packages.length>0) {
var distinctVersions=[];
var installedVersions = new jsinq.Enumerable(packages)
.where(function(p) { return p.installed; })
.groupBy(function(p) { return p.installedVersion; })
.select(function(g) { return { version: g.key, count: g.count()}; });
installedVersions.each(function(version, index) {%>
<%=version.version%> (<%=version.count%>)
<%});%>
<%}%>

if (currentTasks && currentTasks.length>0) {%>
<img src='/content/images/working.gif' />
<%}
}%>
<%if (outOfDate) {%><a class="outofdate" href="#<%=hostname%>"><strong>Updates available</strong></a><%}%>

<%if (currentTasks && currentTasks.length>0) {%>
<img src='/content/images/working.gif' />
<%}
}%>
</span>
<div class="agent-detail">
<p>
<%if (stale) {%>
Last contact <%=moment(lastContact).format("dddd Do MMM YYYY HH:mm")%>
<%}%>
<a class="manage-agent" data-id="<%=hostname%>" href="javascript:void(0);">Start Deployment...</a>&nbsp;
<a class="agent-logs" href="#/logs/<%=hostname%>">Logs</a>&nbsp;
</p>

<p>Packages: (<span class="uptodate">Up to date</span> / <span class="outofdate">Out of date</span>)</p>
<ul class="packages">
<%_.each(packages, function(package) {
var listClass="";
if (package.currentTask) {
listClass=package.currentTask.status;
}%>

<li class="package <%=listClass%>">
<%if (package.currentTask) {%>
<span class="working">
<%=package.packageId%> <%=package.currentTask.status%> <%=package.installedVersion%> -> <%=package.currentTask.version%> <%if (package.currentTask.lastMessage) {%><%=package.currentTask.lastMessage%><%}%>
</span>
<%} else if (package.installed){%>
<span class="<%if (package.outOfDate) {%>outofdate<%} else {%>uptodate<%}%>">
<%=package.packageId%> <%=package.installedVersion%>
</span>
<%if (package.installed || package.currentTask) {%>
<li class="package <%=listClass%>">
<%=package.packageId%>
<%if (package.currentTask) {%>
<span class="working">
<%=package.currentTask.status%> <%=package.installedVersion%> -> <%=package.currentTask.version%> <%if (package.currentTask.lastMessage) {%><%=package.currentTask.lastMessage%><%}%>
</span>
<%} else if (package.installed){%>
<span class="<%if (package.outOfDate) {%>outofdate<%} else {%>uptodate<%}%>">
<%=package.installedVersion%>
</span>
<%}%>
</li>
<%}%>
</li>
<%});%>
</ul>

Expand All @@ -96,8 +109,6 @@
<%} else {%>
Not approved (<a href="/agents">Manage Agents</a>)
<%}%>

<%if (outOfDate) {%>Out of date<%}%>
</div>
</li>
</script>
Expand All @@ -117,10 +128,18 @@
<h2><%=hostname%></h2>
<ul class="manage-agent">
<form id="apply-versions-form" method="POST" action="/api/agent/<%=hostname%>/applyVersions">
<%_.each(packages, function(package) {%>
<%_.each(packages, function(package) {
var statusClass="";
if (package.currentTask) {
statusClass=package.currentTask.status;
} else if (package.outOfDate) {
statusClass="outofdate";
} else {
statusClass="uptodate";
}%>
<li>
<input type="checkbox" id="select-<%=package.packageId%>" name="select-<%=package.packageId%>" data-id="<%=package.packageId%>" class="select-package" />
<label for="select-<%=package.packageId%>" data-id="<%=package.packageId%>"><%=package.packageId%> <%if (package.installed) {%>(<%=package.installedVersion%>)<%}%></label>
<label for="select-<%=package.packageId%>" data-id="<%=package.packageId%>" class="<%=statusClass%>"><%=package.packageId%> <%if (package.installed) {%>(<%=package.installedVersion%>)<%}%><%if (package.outOfDate) {%>*<%}%></label>
&nbsp; <a href="/#/logs/<%=hostname%>/<%=package.packageId%>">Logs</a>
<div class="package-control" style="display:none">
<select name="<%=package.packageId%>">
Expand All @@ -129,8 +148,8 @@
<%});%>
</select> <button style="display:none" class="update-agent" data-packageid="<%=package.packageId%>">Update</button>
</div>
<%if (package.outOfDate) {%>Out of date (latest: <%=package.latestVersion%>)<%}%>
<div class="manage-agent-current-task"><%if (package.currentTask!= null) {%>-> <%=package.currentTask.version%>: <%=package.currentTask.status%>, <%=package.currentTask.lastMessage%><%}%></div>

<div class="manage-agent-current-task <%=statusClass%>"><%if (package.currentTask!= null) {%>-> <%=package.currentTask.version%>: <%=package.currentTask.status%>, <%=package.currentTask.lastMessage%><%}%></div>
</li>
<%});%>
<input type="submit" value="Start deployment on <%=hostname%>" />
Expand All @@ -145,7 +164,7 @@

<script type="text/template" id="agent-log-packages-list-template">
<p><a href="/#">&lt; up to agent list</a></p>
<h2>Server logs for <%=hostname%></h2>
<h2>Agent logs for <%=hostname%></h2>
<ul>
<% _(serverLogCollection.models).each(function(log) {%>
<%console.log('log file: ' + log.get('LogFileName'));%>
Expand Down

0 comments on commit 80f7fdc

Please sign in to comment.