feat(apps): WIP progress app views

public/app/core/routes/all.js

@@ -134,11 +134,13 @@ define([
       .when('/org/apps', {
         templateUrl: 'app/features/org/partials/app_list.html',
         controller: 'AppListCtrl',
+        controllerAs: 'ctrl',
         resolve: loadOrgBundle,
       })
       .when('/org/apps/edit/:type', {
         templateUrl: 'app/features/org/partials/app_edit.html',
         controller: 'AppEditCtrl',
+        controllerAs: 'ctrl',
         resolve: loadOrgBundle,
       })
       .when('/global-alerts', {

public/app/features/org/app_edit_ctrl.ts

@@ -2,36 +2,26 @@
 
 import config = require('app/core/config');
 import angular from 'angular';
+import * as _ from 'lodash';
 
 export class AppEditCtrl {
+  appModel: any;
 
   /** @ngInject */
-  constructor(private $scope: any, private appSrv: any, private $routeParams: any) {
+  constructor(private appSrv: any, private $routeParams: any) {}
 
-    $scope.init = function() {
-      $scope.current = {};
-      $scope.getApps();
-    };
-
-    $scope.getApps = function() {
-      appSrv.get($routeParams.type).then(function(result) {
-        $scope.current = _.clone(result);
-      });
-    };
-
-    $scope.update = function() {
-      $scope._update();
-    };
-
-    $scope._update = function() {
-      appSrv.update($scope.current).then(function() {
-        window.location.href = config.appSubUrl + "org/apps";
-      });
-    };
-
-    $scope.init();
+  init() {
+    this.appModel = {};
+    this.appSrv.get(this.$routeParams.type).then(result => {
+      this.appModel = _.clone(result);
+    });
   }
 
+  update() {
+    this.appSrv.update(this.appModel).then(function() {
+      window.location.href = config.appSubUrl + "org/apps";
+    });
+  }
 }
 
 angular.module('grafana.controllers').controller('AppEditCtrl', AppEditCtrl);

public/app/features/org/app_list_ctrl.ts

@@ -4,28 +4,15 @@ import config = require('app/core/config');
 import angular from 'angular';
 
 export class AppListCtrl {
+  apps: any[];
 
   /** @ngInject */
-  constructor($scope: any, appSrv: any, $location: any) {
+  constructor(private appSrv: any) {}
 
-    $scope.init = function() {
-      $scope.apps = {};
-      $scope.getApps();
-    };
-
-    $scope.getApps = function() {
-      appSrv.getAll().then(function(result) {
-        $scope.apps = result;
-      });
-    };
-
-    $scope.update = function(app) {
-      appSrv.update(app).then(function() {
-        window.location.href = config.appSubUrl + $location.path();
-      });
-    };
-
-    $scope.init();
+  init() {
+    this.appSrv.getAll().then(result => {
+      this.apps = result;
+    });
   }
 }
 

public/app/features/org/app_srv.ts

@@ -23,7 +23,6 @@ export class AppSrv {
     });
   }
 
-
   getAll() {
     if (!_.isEmpty(this.apps)) {
       return this.$q.when(this.apps);

public/app/features/org/partials/app_edit.html

@@ -5,10 +5,9 @@
 	</ul>
 </topnav>
 
-<div class="page-container">
-	<div class="page">
-		<h2>Edit App</h2>
-
+<div class="page-container" style="background: transparent; border: 0;">
+  <div class="page-wide" ng-init="ctrl.init()">
+		<h2>{{ctrl.appModel.type}}</h2>
 
 		<form name="editForm">
 			<div class="tight-form">
@@ -34,14 +33,9 @@
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<br>
+
 			<app-config-loader></app-config-loader>
-			<div class="pull-right" style="margin-top: 35px">
-				<button type="submit" class="btn btn-success" ng-click="update()">Save</button>
-				<a class="btn btn-inverse" href="org/apps">Cancel</a>
-			</div>
-			<br>
 		</form>
 
 	</div>
-</div>
+</div>

public/app/features/org/partials/app_list.html

@@ -4,33 +4,32 @@
 	</ul>
 </topnav>
 
-<div class="page-container">
-	<div class="page">
-		<h2>Apps</h2>
+<div class="page-container" style="background: transparent; border: 0;">
+  <div class="page-wide" ng-init="ctrl.init()">
+    <h2>Apps</h2>
 
-		<div ng-if="!apps">
+		<div ng-if="!ctrl.apps">
 			<em>No apps defined</em>
 		</div>
 
-		<table class="grafana-options-table" ng-if="apps">
-			<tr>
-				<td><strong>Name</strong></td>
-				<td></td>
-				<td></td>
-			</tr>
-			<tr ng-repeat="(type, p) in apps">
-				<td style="width:99%">
-					<i class="fa fa-cubes"></i> &nbsp;
-					{{p.type}}
-				</td>
-				<td style="width: 1%">
-					<a href="org/apps/edit/{{p.type}}" class="btn btn-inverse btn-mini">
-						<i class="fa fa-edit"></i>
-						Configure
-					</a>
-				</td>
-			</tr>
-		</table>
-
+		<ul class="filter-list">
+      <li ng-repeat="app in ctrl.apps">
+        <ul class="filter-list-card">
+          <li>
+            <div class="filter-list-card-controls">
+              <div class="filter-list-card-config">
+								<a href="org/apps/edit/{{app.type}}">
+									<i class="fa fa-cog"></i>
+								</a>
+              </div>
+            </div>
+						<span class="filter-list-card-title">Litmus{{app.type}}</span>
+            <span class="filter-list-card-status">
+              <span class="filter-list-card-state">Dashboards: 1</span>
+            </span>
+          </li>
+        </ul>
+      </li>
+		</ul>
 	</div>
 </div>