Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Improve bundle list view via auto column directive, also add a popove…
…r directive that works with a template, general layout tidying between list and detailed list views.
  • Loading branch information
gashcrumb committed Oct 26, 2013
1 parent 9d16679 commit accb1d5
Show file tree
Hide file tree
Showing 9 changed files with 355 additions and 259 deletions.
108 changes: 75 additions & 33 deletions hawtio-web/src/main/webapp/app/osgi/html/bundle-list.html
@@ -1,41 +1,83 @@
<div class="controller-section" ng-controller="Osgi.BundleListController">
<div class="row-fluid">
<div id="alert-area" class="span9 pull-left"/>
<div id="tab" class="btn-group pull-right" data-toggle="buttons-radio">
<button onclick="location.href='#/osgi/bundle-list'" type="button" class="btn active" title="List view"><i class="icon-list"></i></button>
<button onclick="location.href='#/osgi/bundles'" type="button" class="btn" title="Table view"><i class="icon-table"></i></button>
</div>
<div class="row-fluid">

<div class="pull-left">
<form class="form-inline no-bottom-margin">
<fieldset>
<div class="btn-group inline-block">
<button onclick="location.href='#/osgi/bundle-list'"
type="button"
class="btn active"
title="List view">
<i class="icon-list"></i>
</button>
<button onclick="location.href='#/osgi/bundles'"
type="button"
class="btn"
title="Table view">
<i class="icon-table"></i>
</button>
</div>

<div class="input-append">
<input class="input-large" type="text" placeholder="Install Bundle..." ng-model="bundleUrl">
<button ng-disabled="installDisabled()" class="btn" ng-click="install()" title="Install"><i
class="icon-ok"></i></button>
</div>
</fieldset>
</form>

</div>

<div class="row-fluid">
<div class="control-group">
<form class="form-inline">
<div class="input-append pull-left">
<input class="input-large" type="text" placeholder="Install Bundle..." ng-model="bundleUrl">
<button ng-disabled="installDisabled()" class="btn" ng-click="install()" title="Install"><i class="icon-ok"></i></button>
</div>

<div class="pull-right">
<select class="input-large" ng-model="display.sortField" id="sortField">
<option value="Identifier">Sort by ID</option>
<option value="Name">Sort by Name</option>
<option value="SymbolicName">Sort by Symbolic Name</option>
</select>
<select class="input-large" ng-model="display.bundleField" id="bundleField">
<option value="Name">Display Name</option>
<option value="SymbolicName">Display Symbolic Name</option>
</select>
<input class="input-small search-query" type="number" min="0" ng-model="display.startLevelFilter" placeholder="Start Level..."/>
<input class="input-small search-query" type="text" ng-model="display.bundleFilter" placeholder="Filter..."/>
</div>
</form>
</div>

<div class="pull-right">
<select class="input-large no-bottom-margin" ng-model="display.sortField" id="sortField">
<option value="Identifier">Sort by ID</option>
<option value="Name">Sort by Name</option>
<option value="SymbolicName">Sort by Symbolic Name</option>
</select>
<select class="input-large no-bottom-margin" ng-model="display.bundleField" id="bundleField">
<option value="Name">Display Name</option>
<option value="SymbolicName">Display Symbolic Name</option>
</select>
<input class="input-small search-query" type="number" min="0"
ng-model="display.startLevelFilter"
placeholder="Start Level..."/>
<input class="input-large search-query" type="text"
ng-model="display.bundleFilter"
placeholder="Filter..."/>
</div>

<div class="row-fluid" id="bundleTableHolder">
<!-- Just create a bit of space between the form and the controls -->
<p/>
</div>

<div class="row-fluid" id="bundleTableHolder">
<!-- Just create a bit of space between the form and the controls -->
<p></p>

<script type="text/ng-template" id="popoverTemplate">
<small>
<table>
<tbody>
<tr ng-repeat="(k, v) in bundle track by $index">
<td>{{k}}</td>
<td>{{v}}</td>
</tr>
</tbody>
</table>
</small>
</script>

<table id="bundleTable"/>
<div class="bundle-list"
hawtio-auto-columns=".bundle-item">
<div ng-repeat="bundle in bundles"
class="bundle-item"
ng-show="filterBundle(bundle)"
hawtio-template-popover title="Bundle Details">
<a id="{{bundle.Identifier}}"
ng-href="#/osgi/bundle/{{bundle.Identifier}}">
<span class="badge" ng-class="getStateStyle(bundle.State)">{{getLabel(bundle)}}</span>
</a>
</div>
</div>
</div>
</div>
33 changes: 23 additions & 10 deletions hawtio-web/src/main/webapp/app/osgi/html/bundles.html
@@ -1,16 +1,25 @@
<div class="controller-section" ng-controller="Osgi.BundlesController">
<div class="row-fluid">
<div class="btn-group pull-right" data-toggle="buttons-radio">
<button onclick="location.href='#/osgi/bundle-list'" type="button" class="btn" title="List view"><i class="icon-list"></i></button>
<button onclick="location.href='#/osgi/bundles'" type="button" class="btn active" title="Table view"><i class="icon-table"></i></button>
</div>
</div>

<p/>
<div class="row-fluid">
<div class="row-fluid">
<div class="pull-left">

<form class="form-inline no-bottom-margin">
<fieldset>

<div class="btn-group inline-block">
<button onclick="location.href='#/osgi/bundle-list'"
type="button"
class="btn"
title="List view">
<i class="icon-list"></i>
</button>
<button onclick="location.href='#/osgi/bundles'"
type="button"
class="btn active"
title="Table view">
<i class="icon-table"></i>
</button>
</div>

<div class="controls control-group inline-block controls-row">
<div class="btn-group">
<button ng-disabled="selected.length == 0" class="btn" ng-click="stop()" title="Stop"><i class="icon-off"></i></button>
Expand All @@ -33,10 +42,14 @@
<form class="form-inline no-bottom-margin">
<fieldset>
<div class="control-group inline-block">
<input type="text" class="search-query" placeholder="Filter..." ng-model="gridOptions.filterOptions.filterText">
<input type="text"
class="input-large search-query"
placeholder="Filter..."
ng-model="gridOptions.filterOptions.filterText">
</div>
</fieldset>
</form>

</div>
</div>

Expand Down

0 comments on commit accb1d5

Please sign in to comment.