diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 7cabe5ff1e5..28cba71b8a2 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -124,13 +124,13 @@ $code-tag-bg: $gray-6; $code-tag-border: $gray-4; // cards -$card-background: linear-gradient(135deg, $gray-6, $gray-5); -$card-background-hover: linear-gradient(135deg, $gray-5, $gray-6); +$card-background: linear-gradient(135deg, $gray-6, $gray-7); +$card-background-hover: linear-gradient(135deg, $gray-6, $gray-5); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); // Lists -$list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background; -$list-item-hover-bg: darken($gray-5, 5%); +$list-item-bg: $gray-7; +$list-item-hover-bg: $gray-6; $list-item-link-color: $text-color; $list-item-shadow: $card-shadow; diff --git a/packages/grafana-ui/src/themes/mixins.ts b/packages/grafana-ui/src/themes/mixins.ts index fe67172a12f..727d08d74cf 100644 --- a/packages/grafana-ui/src/themes/mixins.ts +++ b/packages/grafana-ui/src/themes/mixins.ts @@ -8,14 +8,38 @@ export function cardChrome(theme: GrafanaTheme): string { background: linear-gradient(135deg, ${theme.colors.dark9}, ${theme.colors.dark6}); } box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); + border-radius: ${theme.border.radius.md}; `; } return ` - background: linear-gradient(135deg, ${theme.colors.gray6}, ${theme.colors.gray5}); + background: linear-gradient(135deg, ${theme.colors.gray6}, ${theme.colors.gray7}); &:hover { - background: linear-gradient(135deg, ${theme.colors.dark5}, ${theme.colors.gray6}); + background: linear-gradient(135deg, ${theme.colors.gray7}, ${theme.colors.gray6}); } box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); + border-radius: ${theme.border.radius.md}; + `; +} + +export function listItem(theme: GrafanaTheme): string { + if (theme.isDark) { + return ` + background: ${theme.colors.dark7}; + &:hover { + background: ${theme.colors.dark9}; + } + box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); + border-radius: ${theme.border.radius.md}; + `; + } + + return ` + background: ${theme.colors.gray7}; + &:hover { + background: ${theme.colors.gray6}; + } + box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); + border-radius: ${theme.border.radius.md}; `; } diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index 003d23b50fc..6dd6025f26c 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -214,7 +214,7 @@ func getPanelSort(id string) int { switch id { case "graph": sort = 1 - case "singlestat": + case "stat": sort = 2 case "gauge": sort = 3 @@ -222,14 +222,18 @@ func getPanelSort(id string) int { sort = 4 case "table": sort = 5 - case "text": + case "singlestat": sort = 6 - case "heatmap": + case "text": sort = 7 - case "alertlist": + case "heatmap": sort = 8 - case "dashlist": + case "alertlist": sort = 9 + case "dashlist": + sort = 10 + case "news": + sort = 10 } return sort } diff --git a/public/app/features/plugins/built_in_plugins.ts b/public/app/features/plugins/built_in_plugins.ts index 92a73df8407..3fd1976246e 100644 --- a/public/app/features/plugins/built_in_plugins.ts +++ b/public/app/features/plugins/built_in_plugins.ts @@ -53,6 +53,7 @@ import * as pieChartPanel from 'app/plugins/panel/piechart/module'; import * as barGaugePanel from 'app/plugins/panel/bargauge/module'; import * as logsPanel from 'app/plugins/panel/logs/module'; import * as newsPanel from 'app/plugins/panel/news/module'; +import * as homeLinksPanel from 'app/plugins/panel/homelinks/module'; const builtInPlugins: any = { 'app/plugins/datasource/graphite/module': graphitePlugin, @@ -92,6 +93,7 @@ const builtInPlugins: any = { 'app/plugins/panel/piechart/module': pieChartPanel, 'app/plugins/panel/bargauge/module': barGaugePanel, 'app/plugins/panel/logs/module': logsPanel, + 'app/plugins/panel/homelinks/module': homeLinksPanel, }; export default builtInPlugins; diff --git a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx index b335cdc3ae9..706d3b2fe84 100644 --- a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx +++ b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx @@ -43,7 +43,7 @@ export class GettingStarted extends PureComponent { check: () => Promise.resolve(true), }, { - title: 'Create your first data source', + title: 'Create a data source', cta: 'Add data source', icon: 'gicon gicon-datasources', href: 'datasources/new?gettingstarted', @@ -60,7 +60,7 @@ export class GettingStarted extends PureComponent { }, }, { - title: 'Create your first dashboard', + title: 'Build a dashboard', cta: 'New dashboard', icon: 'gicon gicon-dashboard', href: 'dashboard/new?gettingstarted', @@ -81,7 +81,8 @@ export class GettingStarted extends PureComponent { return getBackendSrv() .get('/api/org/users/lookup') .then((res: any) => { - return res.length > 1; + /* return res.length > 1; */ + return false; }); }, }, diff --git a/public/app/plugins/panel/homelinks/img/news.svg b/public/app/plugins/panel/homelinks/img/news.svg new file mode 100644 index 00000000000..b1d737bdeb0 --- /dev/null +++ b/public/app/plugins/panel/homelinks/img/news.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + diff --git a/public/app/plugins/panel/homelinks/module.tsx b/public/app/plugins/panel/homelinks/module.tsx new file mode 100755 index 00000000000..d4923133dff --- /dev/null +++ b/public/app/plugins/panel/homelinks/module.tsx @@ -0,0 +1,115 @@ +// Libraries +import React, { PureComponent, FC } from 'react'; +import { css, cx } from 'emotion'; + +// Utils & Services +import { PanelPlugin } from '@grafana/data'; +import { stylesFactory, styleMixins } from '@grafana/ui'; +import config from 'app/core/config'; + +// Types +import { PanelProps } from '@grafana/data'; + +export interface Props extends PanelProps {} + +export class GrafanaLinksPanel extends PureComponent { + render() { + const styles = getStyles(); + + return ( + <> +
+ + + + +
+ + + ); + } +} + +interface HomeLinkProps { + title: string; + url: string; + target?: string; + icon: string; +} + +export const HomeLink: FC = ({ title, url, target, icon }) => { + const styles = getStyles(); + + return ( + + + {title} + + ); +}; + +export const VersionFooter: FC = () => { + const styles = getStyles(); + const { version, commit } = config.buildInfo; + + return ( +
+ Version {version} ({commit}) +
+ ); +}; + +export const getStyles = stylesFactory(() => { + const { theme } = config; + + return { + list: css` + display: flex; + flex-direction: column; + padding: ${theme.spacing.md}; + `, + icon: css` + padding-right: ${theme.spacing.sm}; + `, + footer: css` + ${styleMixins.listItem(theme)} + position: absolute; + bottom: 0; + width: 100%; + text-align: center; + padding: ${theme.spacing.sm}; + border-radius: 0; + box-shadow: none; + color: ${theme.colors.textWeak}; + `, + item: css` + ${styleMixins.listItem(theme)} + padding: ${theme.spacing.sm}; + display: flex; + margin-bottom: ${theme.spacing.xs}; + align-items: center; + `, + }; +}); + +export const plugin = new PanelPlugin(GrafanaLinksPanel).setDefaults({}).setNoPadding(); diff --git a/public/app/plugins/panel/homelinks/plugin.json b/public/app/plugins/panel/homelinks/plugin.json new file mode 100755 index 00000000000..590fbb2b172 --- /dev/null +++ b/public/app/plugins/panel/homelinks/plugin.json @@ -0,0 +1,19 @@ +{ + "type": "panel", + "name": "Home Links", + "id": "homelinks", + + "hideFromList": true, + "skipDataQuery": true, + + "info": { + "author": { + "name": "Grafana Project", + "url": "https://grafana.com" + }, + "logos": { + "small": "img/news.svg", + "large": "img/news.svg" + } + } +} diff --git a/public/app/plugins/panel/news/NewsPanel.tsx b/public/app/plugins/panel/news/NewsPanel.tsx index 9f665495077..4184a5c914b 100755 --- a/public/app/plugins/panel/news/NewsPanel.tsx +++ b/public/app/plugins/panel/news/NewsPanel.tsx @@ -93,11 +93,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ height: 100%; `, item: css` - ${styleMixins.cardChrome(theme)} + ${styleMixins.listItem(theme)} padding: ${theme.spacing.sm}; position: relative; margin-bottom: 4px; - border-radius: 3px; margin-right: ${theme.spacing.sm}; `, title: css` @@ -115,7 +114,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ position: absolute; top: 0; right: 0; - background: ${theme.colors.bodyBg}; + background: ${theme.colors.panelBg}; width: 55px; text-align: right; padding: ${theme.spacing.xs}; diff --git a/public/app/plugins/panel/news/plugin.json b/public/app/plugins/panel/news/plugin.json index ca473f68cd2..9adc20da937 100755 --- a/public/app/plugins/panel/news/plugin.json +++ b/public/app/plugins/panel/news/plugin.json @@ -5,7 +5,7 @@ "skipDataQuery": true, - "state": "alpha", + "state": "beta", "info": { "author": { diff --git a/public/dashboards/home.json b/public/dashboards/home.json index 88709a767ef..8fc2b8fd6d1 100644 --- a/public/dashboards/home.json +++ b/public/dashboards/home.json @@ -1,72 +1,79 @@ { - "annotations": { - "list": [] - }, - "editable": true, - "folderId": null, - "gnetId": null, - "graphTooltip": 0, - "hideControls": true, - "id": null, "links": [], "panels": [ { - "content": "
\n Home Dashboard\n
", + "content": "
\n Welcome to Grafana\n
", + "datasource": null, "editable": true, + "gridPos": { + "h": 2, + "w": 24, + "x": 0, + "y": 0 + }, "id": 1, "links": [], "mode": "html", + "options": {}, "style": {}, "title": "", "transparent": true, - "type": "text", - "gridPos": { - "w": 24, - "h": 3, - "x": 0, - "y": 0 - } + "type": "text" }, { + "datasource": null, "folderId": 0, + "gridPos": { + "h": 15, + "w": 11, + "x": 0, + "y": 4 + }, "headings": true, "id": 3, "limit": 30, "links": [], + "options": {}, "query": "", "recent": true, "search": false, "starred": true, "tags": [], - "title": "", - "transparent": false, - "type": "dashlist", - "gridPos": { - "w": 12, - "h": 17, - "x": 0, - "y": 6 - } + "title": "Dashboards", + "type": "dashlist" }, { - "editable": true, - "error": false, + "datasource": null, + "gridPos": { + "h": 15, + "w": 8, + "x": 11, + "y": 4 + }, "id": 4, "links": [], - "title": "", - "transparent": false, - "type": "pluginlist", + "options": { + "feedUrl": "https://grafana.com/blog/index.xml" + }, + "title": "Latest from the blog", + "type": "news" + }, + { + "datasource": null, "gridPos": { - "w": 12, - "h": 17, - "x": 12, - "y": 6 - } + "h": 15, + "w": 5, + "x": 19, + "y": 4 + }, + "id": 123124, + "links": [], + "options": {}, + "title": "Useful links", + "type": "homelinks" } ], - "rows": [], - "schemaVersion": 17, - "style": "dark", + "schemaVersion": 22, "tags": [], "templating": { "list": [] @@ -82,6 +89,5 @@ "type": "timepicker" }, "timezone": "browser", - "title": "Home", - "version": 0 + "title": "Home" } diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index f34a57d21c0..c2f7d37301a 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -127,13 +127,13 @@ $code-tag-bg: $gray-6; $code-tag-border: $gray-4; // cards -$card-background: linear-gradient(135deg, $gray-6, $gray-5); -$card-background-hover: linear-gradient(135deg, $gray-5, $gray-6); +$card-background: linear-gradient(135deg, $gray-6, $gray-7); +$card-background-hover: linear-gradient(135deg, $gray-6, $gray-5); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); // Lists -$list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background; -$list-item-hover-bg: darken($gray-5, 5%); +$list-item-bg: $gray-7; +$list-item-hover-bg: $gray-6; $list-item-link-color: $text-color; $list-item-shadow: $card-shadow; diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss index 4287fe823aa..665c41a8374 100644 --- a/public/sass/components/_panel_gettingstarted.scss +++ b/public/sass/components/_panel_gettingstarted.scss @@ -1,11 +1,7 @@ // Colors $progress-color-dark: $panel-bg !default; $progress-color: $panel-bg !default; -$progress-color-light: $panel-bg !default; -$progress-color-grey-light: $body-bg !default; -$progress-color-shadow: $panel-border !default; -$progress-color-grey: $iconContainerBackground !default; -$progress-color-grey-dark: $iconContainerBackground !default; +$progress-line-uncompleted: lightOrDarkTheme($gray-3, $gray-1); // Sizing $marker-size: 60px !default; @@ -65,9 +61,7 @@ $path-position: $marker-size-half - ($path-height / 2); right: -$marker-size-half; width: 100%; height: $path-height; - border-top: 2px solid $progress-color-grey-light; - border-bottom: $progress-color-shadow; - background: $progress-color-grey-light; + border-top: 2px solid $progress-line-uncompleted; } &:first-child { @@ -118,9 +112,9 @@ $path-position: $marker-size-half - ($path-height / 2); .progress-text { text-decoration: line-through; } - &::after { - background: $progress-color-grey-light; - } + // &::after { + // border-top: 2px solid $progress-line-completed; + // } } } diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss index 9124d6b72c2..00d78cae0ba 100644 --- a/public/sass/mixins/_mixins.scss +++ b/public/sass/mixins/_mixins.scss @@ -361,9 +361,18 @@ background: $list-item-bg; box-shadow: $list-item-shadow; color: $list-item-link-color; + border-radius: $border-radius; &:hover { background: $list-item-hover-bg; color: $list-item-link-color; } } + +@function lightOrDarkTheme($lightColor, $darkColor) { + @if (lightness($text-color) < 50) { + @return $lightColor; + } @else { + @return $darkColor; + } +} diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index ca4c0162fbe..a4535a982aa 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -97,7 +97,7 @@ div.flot-text { } .dashboard-header { - font-size: $font-size-h3; + font-size: $font-size-h2; text-align: center; overflow: hidden; position: relative;