Merge branch 'datasource-lists-cards'

pkg/api/datasources.go

 package api
 
 import (
+	"sort"
+
 	"github.com/grafana/grafana/pkg/api/dtos"
 	"github.com/grafana/grafana/pkg/bus"
+	"github.com/grafana/grafana/pkg/plugins"
 	//"github.com/grafana/grafana/pkg/log"
 	"github.com/grafana/grafana/pkg/middleware"
 	m "github.com/grafana/grafana/pkg/models"
@@ -17,9 +20,10 @@ func GetDataSources(c *middleware.Context) {
 		return
 	}
 
-	result := make([]*dtos.DataSource, len(query.Result))
-	for i, ds := range query.Result {
-		result[i] = &dtos.DataSource{
+	result := make(dtos.DataSourceList, 0)
+	for _, ds := range query.Result {
+
+		dsItem := dtos.DataSource{
 			Id:        ds.Id,
 			OrgId:     ds.OrgId,
 			Name:      ds.Name,
@@ -32,8 +36,17 @@ func GetDataSources(c *middleware.Context) {
 			BasicAuth: ds.BasicAuth,
 			IsDefault: ds.IsDefault,
 		}
+
+		if plugin, exists := plugins.DataSources[ds.Type]; exists {
+			dsItem.TypeLogoUrl = plugin.Info.Logos.Small
+		} else {
+			dsItem.TypeLogoUrl = "public/img/plugin-default-logo_dark.svg"
+		}
+
+		result = append(result, dsItem)
 	}
 
+	sort.Sort(result)
 	c.JSON(200, result)
 }
 

pkg/api/dtos/models.go

@@ -62,6 +62,7 @@ type DataSource struct {
 	OrgId             int64            `json:"orgId"`
 	Name              string           `json:"name"`
 	Type              string           `json:"type"`
+	TypeLogoUrl       string           `json:"typeLogoUrl"`
 	Access            m.DsAccess       `json:"access"`
 	Url               string           `json:"url"`
 	Password          string           `json:"password"`
@@ -75,6 +76,20 @@ type DataSource struct {
 	JsonData          *simplejson.Json `json:"jsonData,omitempty"`
 }
 
+type DataSourceList []DataSource
+
+func (slice DataSourceList) Len() int {
+	return len(slice)
+}
+
+func (slice DataSourceList) Less(i, j int) bool {
+	return slice[i].Name < slice[j].Name
+}
+
+func (slice DataSourceList) Swap(i, j int) {
+	slice[i], slice[j] = slice[j], slice[i]
+}
+
 type MetricQueryResultDto struct {
 	Data []MetricQueryResultDataDto `json:"data"`
 }

public/app/features/plugins/ds_edit_ctrl.ts

@@ -134,6 +134,24 @@ export class DataSourceEditCtrl {
         });
       }
     };
+
+    confirmDelete() {
+      this.backendSrv.delete('/api/datasources/' + this.current.id).then(() => {
+        this.$location.path('datasources');
+      });
+    }
+
+    delete(s) {
+      this.$scope.appEvent('confirm-modal', {
+        title: 'Delete',
+        text: 'Are you sure you want to delete this datasource?',
+        yesText: "Delete",
+        icon: "fa-trash",
+        onConfirm: () => {
+          this.confirmDelete();
+        }
+      });
+    }
 }
 
 coreModule.controller('DataSourceEditCtrl', DataSourceEditCtrl);

public/app/features/plugins/partials/ds_edit.html

@@ -67,6 +67,9 @@
         <button type="submit" class="btn btn-secondary" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges(true)">
           Test Connection
         </button>
+				<button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
+					Delete
+        </button>
         <a class="btn btn-link" href="datasources">Cancel</a>
       </div>
 

public/app/features/plugins/partials/ds_list.html

@@ -13,55 +13,39 @@
 		</a>
 	</div>
 
-		<br>
+	<section class="card-section" layout-mode>
+    <layout-selector></layout-selector>
 
-		<div ng-if="ctrl.datasources.length === 0">
-			<em>No data sources defined</em>
-		</div>
-
-		<table class="filter-table" ng-if="ctrl.datasources.length > 0">
-			<thead>
-				<tr>
-					<th><strong>name</strong></th>
-					<th><strong>type</strong></th>
-					<th><strong>url</strong></th>
-					<th style="width: 60px;"></th>
-					<th style="width: 85px;"></th>
-					<th style="width: 44px;"></th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr ng-repeat="ds in ctrl.datasources">
-					<td>
-						<a href="datasources/edit/{{ds.id}}">
-							<i class="icon-gf inline-icon-gf icon-gf-datasources"></i> &nbsp; {{ds.name}}
-						</a>
-					</td>
-					<td>
-						<span>{{ds.type}}</span>
-					</td>
-					<td>
-						<span>{{ds.url}}</span>
-					</td>
-					<td class="text-center">
-						<span ng-if="ds.isDefault">
-							<span class="btn btn-secondary btn-mini">default</span>
-						</span>
-					</td>
-					<td class="text-right">
-						<a href="datasources/edit/{{ds.id}}" class="btn btn-inverse btn-small">
-							<i class="fa fa-edit"></i>
-							Edit
-						</a>
-					</td>
-					<td class="text-right">
-						<a ng-click="ctrl.removeDataSource(ds)" class="btn btn-danger btn-small">
-							<i class="fa fa-remove"></i>
-						</a>
-					</td>
-				</tr>
-			</tbody>
-		</table>
+		<ol class="card-list" >
+			<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
+				<a class="card-item" href="datasources/edit/{{ds.id}}/">
+					<div class="card-item-header">
+						<i class="icon-gf icon-gf-{{ds.type}}"></i>
+						{{ds.type}}
+					</div>
+					<div class="card-item-body">
+						<figure class="card-item-figure">
+							<img ng-src="{{ds.typeLogoUrl}}">
+						</figure>
+						<div class="card-item-details">
+							<div class="card-item-name">
+								{{ds.name}}
+								<span ng-if="ds.isDefault">
+									<span class="btn btn-secondary btn-mini">default</span>
+								</span>
+							</div>
+							<div class="card-item-sub-name">
+								{{ds.url}}
+							</div>
+						</div>
+					</div>
+				</a>
+			</li>
+		</ol>
+	</section>
 
+	<div ng-if="ctrl.datasources.length === 0">
+		<em>No data sources defined</em>
 	</div>
+
 </div>

public/app/features/plugins/partials/plugin_list.html

@@ -41,7 +41,7 @@
 							<img ng-src="{{plugin.info.logos.small}}">
 						</figure>
 						<div class="card-item-details">
-							<div class="card-item-name" href="plugins/{{plugin.id}}/edit">{{plugin.name}}</div>
+							<div class="card-item-name">{{plugin.name}}</div>
 							<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
 						</div>
 					</div>

public/sass/components/_cards.scss

@@ -56,7 +56,10 @@
 
 .card-item-header {
   color: $text-color-weak;
+  text-transform: uppercase;
   margin-bottom: $spacer;
+  font-size: $font-size-sm;
+  font-weight: bold;
 }
 
 .card-item-name {
@@ -103,8 +106,14 @@
 .card-list-layout-list {
 
   .card-item-wrapper {
+    padding: 0;
     width: 100%;
-    padding: 0 0 1.5rem 0rem;
+  }
+
+  .card-item {
+    border-bottom: .2rem solid $page-bg;
+    border-radius: 0;
+    box-shadow: none;
   }
 
   .card-item-header {