openstack
/
stackviz
Code Issues Proposed changes

Added initial homepage using the new dataset service. 

This homepage implements a sample layout that uses real example
data, but is still a WIP and has a number of empty stub UI
elements.

Change-Id: Icf5afdfd1d078e250bec29af828ea63f78ee0a9e
This commit is contained in:
Tim Buckley 2015-10-05 15:50:47 -06:00
parent 37e06a5723
commit 865837da38
5 changed files with 89 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/js/controllers/home.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
var controllersModule = require('./_index');
/**
* @ngInject
*/
function HomeCtrl(datasetService) {
// ViewModel
var vm = this;
datasetService.list().then(function(response) {
vm.tempest = response.data.tempest;
});
}
controllersModule.controller('HomeCtrl', HomeCtrl);

24
app/js/directives/tempest-summary.js Normal file
View File

@ -0,0 +1,24 @@
'use strict';
var directivesModule = require('./_index.js');
/**
* @ngInject
*/
function tempestSummary() {
var controller = function($scope, $attrs, datasetService) {
// TODO get extra data here
// (may require raw details, or extra metadata inside config.json)
};
return {
restrict: 'EA',
scope: {
'dataset': '='
},
controller: controller,
templateUrl: 'directives/tempest-summary.html'
};
}
directivesModule.directive('tempestSummary', tempestSummary);

7
app/js/on_config.js
View File

@ -7,10 +7,9 @@ function OnConfig($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('Home', {
$stateProvider.state('home', {
url: '/',
controller: 'ExampleCtrl as home',
controller: 'HomeCtrl as home',
templateUrl: 'home.html',
title: 'Home'
});
@ -19,4 +18,4 @@ function OnConfig($stateProvider, $locationProvider, $urlRouterProvider) {
}
module.exports = OnConfig;
module.exports = OnConfig;

18
app/views/directives/tempest-summary.html Normal file
View File

@ -0,0 +1,18 @@
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ dataset.name }}</h3>
</div>
<div class="panel-body">
More details go here
</div>
<div class="panel-footer clearfix">
<div class="btn-group pull-right">
<a type="button"
class="btn btn-default"
ui-sref="timeline({datasetId: dataset.id})">Timeline</a>
<a type="button"
class="btn btn-default"
ui-sref="sunburst({datasetId: dataset.id})">Sunburst</a>
</div>
</div>
</div>

31
app/views/home.html
View File

@ -1,18 +1,37 @@
<header class="bs-header">
<div class="container">
<h1 class="page-header">{{ home.title }}</h1>
<h1 class="page-header">Datasets</h1>
</div>
</header>
<div class="container">
<div class="row">
<div class="row" ng-if="!home.tempest.length">
<div class="col-lg-12">
<h3 class="heading -medium">Here is a fancy number served up courtesy of Angular: <span class="number-example">{{ home.number }}</span></h3>
<div class="alert alert-danger">
No tempest datasets could be loaded!
</div>
</div>
</div>
<div class="row" ng-if="!!home.tempest.length">
<div class="col-lg-8">
<tempest-summary ng-if="home.tempest.length >= 1" dataset="home.tempest[0]"></tempest-summary>
</div>
<div class="col-lg-4" ng-if="home.tempest.length > 1">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Additional Datasets</h3>
</div>
<img src="images/angular.png" height="100" example-directive />
<img src="images/gulp.png" height="100" />
<img src="images/browserify.png" height="100" />
<div class="list-group">
<a class="list-group-item"
ng-repeat="dataset in home.tempest"
ng-if="$index > 0"
ui-sref="timeline({datasetId: dataset.id})">
{{ dataset.name }}
</a>
</div>
</div>
</div>
</div>
</div>