diff --git a/pkg/plugins/frontend_plugin.go b/pkg/plugins/frontend_plugin.go index aab3f851f60..5e1b4556a16 100644 --- a/pkg/plugins/frontend_plugin.go +++ b/pkg/plugins/frontend_plugin.go @@ -24,14 +24,22 @@ func (fp *FrontendPluginBase) initFrontendPlugin() { fp.handleModuleDefaults() - fp.Info.Logos.Small = evalRelativePluginUrlPath(fp.Info.Logos.Small, fp.BaseUrl) - fp.Info.Logos.Large = evalRelativePluginUrlPath(fp.Info.Logos.Large, fp.BaseUrl) + fp.Info.Logos.Small = getPluginLogoUrl(fp.Info.Logos.Small, fp.BaseUrl) + fp.Info.Logos.Large = getPluginLogoUrl(fp.Info.Logos.Large, fp.BaseUrl) for i := 0; i < len(fp.Info.Screenshots); i++ { fp.Info.Screenshots[i].Path = evalRelativePluginUrlPath(fp.Info.Screenshots[i].Path, fp.BaseUrl) } } +func getPluginLogoUrl(path, baseUrl string) string { + if path == "" { + return "public/img/plugin-default-logo_dark.svg" + } + + return evalRelativePluginUrlPath(path, baseUrl) +} + func (fp *FrontendPluginBase) setPathsBasedOnApp(app *AppPlugin) { appSubPath := strings.Replace(fp.PluginDir, app.StaticRootAbs, "", 1) fp.IncludedInAppId = app.Id diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html index 5c3d38b3459..e11860235e5 100644 --- a/public/app/features/plugins/partials/plugin_list.html +++ b/public/app/features/plugins/partials/plugin_list.html @@ -26,37 +26,26 @@ - - - - - - - - - - - - - - - - - -
NameType
- - {{plugin.name}} - - - {{plugin.type}} - - Enabled - Pinned - - - - Edit - -
- +
+
    +
  1. + +
    + + {{plugin.type}} +
    +
    +
    + +
    +
    +
    {{plugin.name}}
    +
    By {{plugin.info.author.name}}
    +
    +
    +     +
    2. +
+
+ diff --git a/public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png b/public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png new file mode 100644 index 00000000000..f11f4034751 Binary files /dev/null and b/public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png differ diff --git a/public/app/plugins/datasource/cloudwatch/plugin.json b/public/app/plugins/datasource/cloudwatch/plugin.json index 49c5341bd21..eb2f97335da 100644 --- a/public/app/plugins/datasource/cloudwatch/plugin.json +++ b/public/app/plugins/datasource/cloudwatch/plugin.json @@ -4,5 +4,16 @@ "id": "cloudwatch", "metrics": true, - "annotations": true + "annotations": true, + + "info": { + "author": { + "name": "Grafana Project", + "url": "http://grafana.org" + }, + "logos": { + "small": "img/amazon-web-services.png", + "large": "img/amazon-web-services.png" + } + } } diff --git a/public/app/plugins/datasource/elasticsearch/plugin.json b/public/app/plugins/datasource/elasticsearch/plugin.json index 3cd345e5cdf..d4b07ac8e00 100644 --- a/public/app/plugins/datasource/elasticsearch/plugin.json +++ b/public/app/plugins/datasource/elasticsearch/plugin.json @@ -6,7 +6,7 @@ "info": { "description": "Elasticsearch Data Source for Grafana", "author": { - "name": "Grafana Core", + "name": "Grafana Project", "url": "http://grafana.org" }, "keywords": ["elasticsearch"], diff --git a/public/app/plugins/datasource/graphite/plugin.json b/public/app/plugins/datasource/graphite/plugin.json index a1c35094701..a561a99372b 100644 --- a/public/app/plugins/datasource/graphite/plugin.json +++ b/public/app/plugins/datasource/graphite/plugin.json @@ -8,5 +8,12 @@ ], "metrics": true, - "annotations": true + "annotations": true, + + "info": { + "author": { + "name": "Grafana Project", + "url": "http://grafana.org" + } + } } diff --git a/public/app/plugins/datasource/influxdb/img/influxdb_logo.svg b/public/app/plugins/datasource/influxdb/img/influxdb_logo.svg new file mode 100644 index 00000000000..6fad144f8c7 --- /dev/null +++ b/public/app/plugins/datasource/influxdb/img/influxdb_logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/app/plugins/datasource/influxdb/plugin.json b/public/app/plugins/datasource/influxdb/plugin.json index dd60a16b715..605ce168831 100644 --- a/public/app/plugins/datasource/influxdb/plugin.json +++ b/public/app/plugins/datasource/influxdb/plugin.json @@ -5,5 +5,16 @@ "defaultMatchFormat": "regex values", "metrics": true, - "annotations": true + "annotations": true, + + "info": { + "author": { + "name": "Grafana Project", + "url": "http://grafana.org" + }, + "logos": { + "small": "img/influxdb_logo.svg", + "large": "img/influxdb_logo.svg" + } + } } diff --git a/public/app/plugins/datasource/opentsdb/img/opentsdb_logo.png b/public/app/plugins/datasource/opentsdb/img/opentsdb_logo.png new file mode 100644 index 00000000000..519d56a476c Binary files /dev/null and b/public/app/plugins/datasource/opentsdb/img/opentsdb_logo.png differ diff --git a/public/app/plugins/datasource/opentsdb/plugin.json b/public/app/plugins/datasource/opentsdb/plugin.json index 333e9d07536..02ba02e6e89 100644 --- a/public/app/plugins/datasource/opentsdb/plugin.json +++ b/public/app/plugins/datasource/opentsdb/plugin.json @@ -5,5 +5,16 @@ "metrics": true, "defaultMatchFormat": "pipe", - "annotations": true + "annotations": true, + + "info": { + "author": { + "name": "Grafana Project", + "url": "http://grafana.org" + }, + "logos": { + "small": "img/opentsdb_logo.png", + "large": "img/opentsdb_logo.png" + } + } } diff --git a/public/app/plugins/datasource/prometheus/img/prometheus_logo.svg b/public/app/plugins/datasource/prometheus/img/prometheus_logo.svg new file mode 100644 index 00000000000..29005ec3860 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/img/prometheus_logo.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/public/app/plugins/datasource/prometheus/plugin.json b/public/app/plugins/datasource/prometheus/plugin.json index 2ff198d5129..f39f8691661 100644 --- a/public/app/plugins/datasource/prometheus/plugin.json +++ b/public/app/plugins/datasource/prometheus/plugin.json @@ -8,5 +8,16 @@ ], "metrics": true, - "annotations": true + "annotations": true, + + "info": { + "author": { + "name": "Grafana Project", + "url": "http://grafana.org" + }, + "logos": { + "small": "img/prometheus_logo.svg", + "large": "img/prometheus_logo.svg" + } + } } diff --git a/public/app/plugins/panel/dashlist/plugin.json b/public/app/plugins/panel/dashlist/plugin.json index 1f1266d8444..9cac424ac68 100644 --- a/public/app/plugins/panel/dashlist/plugin.json +++ b/public/app/plugins/panel/dashlist/plugin.json @@ -1,5 +1,12 @@ { "type": "panel", "name": "Dashboard list", - "id": "dashlist" + "id": "dashlist", + + "info": { + "author": { + "name": "Grafana Project", + "url": "http://grafana.org" + } + } } diff --git a/public/app/plugins/panel/graph/plugin.json b/public/app/plugins/panel/graph/plugin.json index f603e5e4b06..baa9fe12a39 100644 --- a/public/app/plugins/panel/graph/plugin.json +++ b/public/app/plugins/panel/graph/plugin.json @@ -1,5 +1,12 @@ { "type": "panel", "name": "Graph", - "id": "graph" + "id": "graph", + + "info": { + "author": { + "name": "Grafana Project", + "url": "http://grafana.org" + } + } } diff --git a/public/app/plugins/panel/singlestat/plugin.json b/public/app/plugins/panel/singlestat/plugin.json index 8372e4b2c2d..ea9ae32853a 100644 --- a/public/app/plugins/panel/singlestat/plugin.json +++ b/public/app/plugins/panel/singlestat/plugin.json @@ -1,5 +1,12 @@ { "type": "panel", "name": "Singlestat", - "id": "singlestat" + "id": "singlestat", + + "info": { + "author": { + "name": "Grafana Project", + "url": "http://grafana.org" + } + } } diff --git a/public/app/plugins/panel/table/plugin.json b/public/app/plugins/panel/table/plugin.json index 7f8c0bb23cf..e25efdfbe36 100644 --- a/public/app/plugins/panel/table/plugin.json +++ b/public/app/plugins/panel/table/plugin.json @@ -1,5 +1,12 @@ { "type": "panel", "name": "Table", - "id": "table" + "id": "table", + + "info": { + "author": { + "name": "Grafana Project", + "url": "http://grafana.org" + } + } } diff --git a/public/app/plugins/panel/text/plugin.json b/public/app/plugins/panel/text/plugin.json index 4cf046cec36..485f42942f2 100644 --- a/public/app/plugins/panel/text/plugin.json +++ b/public/app/plugins/panel/text/plugin.json @@ -1,5 +1,12 @@ { "type": "panel", "name": "Text", - "id": "text" + "id": "text", + + "info": { + "author": { + "name": "Grafana Project", + "url": "http://grafana.org" + } + } } diff --git a/public/img/plugin-default-logo_dark.svg b/public/img/plugin-default-logo_dark.svg new file mode 100644 index 00000000000..d665aa30b07 --- /dev/null +++ b/public/img/plugin-default-logo_dark.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/plugin-default-logo_light.svg b/public/img/plugin-default-logo_light.svg new file mode 100644 index 00000000000..4573494ff16 --- /dev/null +++ b/public/img/plugin-default-logo_light.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 42956f3c3fa..f8973c65dc7 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -30,6 +30,7 @@ @import "layout/page"; // COMPONENTS +@import "components/cards"; @import "components/buttons"; @import "components/navs"; @import "components/tabs"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 8823b336d83..8efd9f7e55d 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -67,9 +67,9 @@ $link-hover-color: $white; // Typography // ------------------------- -$headings-color: darken($white,11%); -$abbr-border-color: $gray-3 !default; -$text-muted: darken($link-color,30%); +$headings-color: darken($white,11%); +$abbr-border-color: $gray-3 !default; +$text-muted: darken($link-color,30%); $blockquote-small-color: $gray-3 !default; $blockquote-border-color: $gray-4 !default; @@ -252,3 +252,10 @@ $popover-help-color: $text-color; // images $checkboxImageUrl: '../img/checkbox.png'; + +// cards +$card-background: linear-gradient(135deg, #2f2f2f, #262626); +$card-background-hover: linear-gradient(135deg, #343434, #262626); +$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3); + + diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index af66e2c2389..279e284b0be 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -279,3 +279,9 @@ $popover-help-color: $gray-6; // images $checkboxImageUrl: '../img/checkbox_white.png'; + +// cards +$card-background: linear-gradient(135deg, $gray-5, $gray-6); +$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7); +$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1); + diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 4f1002bdc67..9f96591a4b9 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -4,7 +4,7 @@ // // Quickly modify global styling by enabling or disabling optional features. -$enable-flex: false !default; +$enable-flex: true !default; $enable-rounded: true !default; $enable-shadows: false !default; $enable-gradients: false !default; diff --git a/public/sass/base/_fonts.scss b/public/sass/base/_fonts.scss index f7d172a523f..e442cbdce6c 100644 --- a/public/sass/base/_fonts.scss +++ b/public/sass/base/_fonts.scss @@ -176,3 +176,10 @@ content: "\e903"; } +.icon-gf-app:before { + content: "\e902"; +} +.icon-gf-datasource:before { + content: "\e607"; +} + diff --git a/public/sass/components/_cards.scss b/public/sass/components/_cards.scss new file mode 100644 index 00000000000..12d3b0166ff --- /dev/null +++ b/public/sass/components/_cards.scss @@ -0,0 +1,73 @@ + + +.card-section { + margin-bottom: $spacer*2; +} + +.card-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + list-style-type: none; +} + +.card-item-wrapper { + width: 100%; + padding: 0 1.5rem 1.5rem 0rem; +} + +.card-item { + display: block; + height: 100%; + min-height: 12rem; + background: $card-background; + box-shadow: $card-shadow; + padding: 1rem; + border-radius: 4px; + + &:hover { + background: $card-background-hover; + } +} + +.card-item-figure { + margin: 0 $spacer $spacer 0; + img { + width: 6rem; + } +} + +.card-item-body { + display: flex; +} + +.card-item-details { +} + +.card-item-header { + color: $text-color-weak; + margin-bottom: $spacer; +} + +.card-item-name { + color: $headings-color; + font-size: $font-size-h3; +} + +.card-item-sub-name { + color: $text-color-weak; +} + +@include media-breakpoint-up(md) { + .card-item-wrapper { + width: 50%; + } +} + +@include media-breakpoint-up(lg) { + .card-item-wrapper { + width: 33%; + } +} + +