Getting started: Welcome banner (#24286)

* welcome banner * use login background * use login background * minor margins and paddings * remove button select, remove useful links * updates * component type * readd margin for smaller screens Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

Getting started: Welcome banner (#24286)
* welcome banner * use login background * use login background * minor margins and paddings * remove button select, remove useful links * updates * component type * readd margin for smaller screens Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
01b46d17 · Peter Holmberg · GitHub · 9208c8ef · 01b46d17 · 01b46d17
Commit 01b46d17 authored May 07, 2020 by Peter Holmberg Committed by GitHub May 07, 2020
9 changed files
--- a/public/app/features/plugins/built_in_plugins.ts
+++ b/public/app/features/plugins/built_in_plugins.ts
@@ -56,6 +56,7 @@ 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';
+import * as welcomeBanner from 'app/plugins/panel/welcome/module';
 const builtInPlugins: any = {
  'app/plugins/datasource/graphite/module': graphitePlugin,
@@ -97,6 +98,7 @@ const builtInPlugins: any = {
  'app/plugins/panel/bargauge/module': barGaugePanel,
  'app/plugins/panel/logs/module': logsPanel,
  'app/plugins/panel/homelinks/module': homeLinksPanel,
+  'app/plugins/panel/welcome/module': welcomeBanner,
 };
 export default builtInPlugins;
--- a/public/app/plugins/panel/welcome/README.md
+++ b/public/app/plugins/panel/welcome/README.md
+# Plugin List Panel -  Native Plugin
--- a/public/app/plugins/panel/welcome/Welcome.tsx
+++ b/public/app/plugins/panel/welcome/Welcome.tsx
+import React, { FC } from 'react';
+import { css } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
+import { ButtonSelect, stylesFactory, useTheme } from '@grafana/ui';
+const helpOptions = [
+  { value: 0, label: 'Documentation', href: 'https://grafana.com/docs/grafana/latest/' },
+  { value: 1, label: 'Tutorials', href: 'https://grafana.com/tutorials/' },
+  { value: 2, label: 'Community', href: 'https://community.grafana.com/' },
+  { value: 3, label: 'Public Slack', href: '' },
+];
+export const WelcomeBanner: FC = () => {
+  const styles = getStyles(useTheme());
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>Welcome to Grafana</h1>
+      <div className={styles.help}>
+        <h3 className={styles.helpText}>Need help?</h3>
+        <div className={styles.smallScreenHelp}>
+          <ButtonSelect
+            defaultValue={helpOptions[0]}
+            variant="secondary"
+            size="sm"
+            onChange={onHelpLinkClick}
+            options={helpOptions}
+          />
+        </div>
+        <div className={styles.helpLinks}>
+          {helpOptions.map((option, index) => {
+            return (
+              <a key={`${option.label}-${index}`} className={styles.helpLink} href={option.href}>
+                {option.label}
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+const onHelpLinkClick = (option: { label: string; href: string }) => {
+  window.open(option.href, '_blank');
+};
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  const backgroundImage = theme.isDark
+    ? 'public/img/login_background_dark.svg'
+    : 'public/img/login_background_light.svg';
+  return {
+    container: css`
+      display: flex;
+      background: url(${backgroundImage}) no-repeat;
+      background-size: cover;
+      height: 100%;
+      align-items: center;
+      padding: 0 16px;
+      justify-content: space-between;
+      @media only screen and (max-width: ${theme.breakpoints.xl}) {
+        padding: 0 30px 0 100px;
+      }
+      @media only screen and (max-width: ${theme.breakpoints.lg}) {
+        padding: 0 24px 0 44px;
+        background-position: 0px;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+      }
+      @media only screen and (max-width: ${theme.breakpoints.sm}) {
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding: ${theme.spacing.md} ${theme.spacing.md} ${theme.spacing.md} 48px;
+      }
+    `,
+    title: css`
+      margin-bottom: 0;
+      @media only screen and (max-width: ${theme.breakpoints.md}) {
+        font-size: ${theme.typography.heading.h2};
+        margin-bottom: ${theme.spacing.sm};
+      }
+      @media only screen and (max-width: ${theme.breakpoints.sm}) {
+        font-size: ${theme.typography.heading.h3};
+      }
+    `,
+    help: css`
+      display: flex;
+      align-items: baseline;
+    `,
+    helpText: css`
+      margin-right: ${theme.spacing.md};
+      margin-bottom: 0;
+      @media only screen and (max-width: ${theme.breakpoints.md}) {
+        font-size: ${theme.typography.heading.h4};
+      }
+      @media only screen and (max-width: ${theme.breakpoints.sm}) {
+        display: none;
+      }
+    `,
+    helpLinks: css``,
+    helpLink: css`
+      margin-right: 8px;
+      text-decoration: underline;
+      text-wrap: no-wrap;
+    `,
+    smallScreenHelp: css`
+      display: none;
+    `,
+  };
+});
--- a/public/app/plugins/panel/welcome/img/icn-dashlist-panel.svg
+++ b/public/app/plugins/panel/welcome/img/icn-dashlist-panel.svg
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<g>
+	<g>
+		<path style="fill:#666666;" d="M8.842,11.219h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,11.219z"/>
+		<path style="fill:#666666;" d="M0.008,2.113l2.054-2.054C0.966,0.139,0.089,1.016,0.008,2.113z"/>
+		<polygon style="fill:#666666;" points="0,2.998 0,5.533 5.484,0.05 2.948,0.05 		"/>
+		<polygon style="fill:#666666;" points="6.361,0.05 0,6.411 0,8.946 8.896,0.05 		"/>
+		<path style="fill:#666666;" d="M11.169,2.277c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V2.277z"/>
+		<path style="fill:#666666;" d="M9.654,0.169L0.119,9.704c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,0.812,10.247,0.37,9.654,0.169z"/>
+		<polygon style="fill:#666666;" points="11.169,5.479 5.429,11.219 7.964,11.219 11.169,8.014 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,11.031H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.831,1.83-1.831h73.281
+		c1.011,0,1.83,0.82,1.83,1.831v7.37C89.977,10.212,89.157,11.031,88.146,11.031z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,23.902h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,23.902z"/>
+		<path style="fill:#666666;" d="M0.008,14.796l2.054-2.054C0.966,12.822,0.089,13.699,0.008,14.796z"/>
+		<polygon style="fill:#666666;" points="0,15.681 0,18.216 5.484,12.733 2.948,12.733 		"/>
+		<polygon style="fill:#666666;" points="6.361,12.733 0,19.094 0,21.629 8.896,12.733 		"/>
+		<path style="fill:#666666;" d="M11.169,14.96c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V14.96z"/>
+		<path style="fill:#666666;" d="M9.654,12.852l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,13.495,10.247,13.053,9.654,12.852z"/>
+		<polygon style="fill:#666666;" points="11.169,18.162 5.429,23.902 7.964,23.902 11.169,20.697 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,23.714H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.83,1.83-1.83h73.281
+		c1.011,0,1.83,0.82,1.83,1.83v7.37C89.977,22.895,89.157,23.714,88.146,23.714z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,36.585h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,36.585z"/>
+		<path style="fill:#666666;" d="M0.008,27.479l2.054-2.054C0.966,25.505,0.089,26.382,0.008,27.479z"/>
+		<polygon style="fill:#666666;" points="0,28.364 0,30.899 5.484,25.416 2.948,25.416 		"/>
+		<polygon style="fill:#666666;" points="6.361,25.416 0,31.777 0,34.312 8.896,25.416 		"/>
+		<path style="fill:#666666;" d="M11.169,27.643c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V27.643z"/>
+		<path style="fill:#666666;" d="M9.654,25.535L0.119,35.07c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,26.178,10.247,25.736,9.654,25.535z"/>
+		<polygon style="fill:#666666;" points="11.169,30.845 5.429,36.585 7.964,36.585 11.169,33.38 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,36.397H14.866c-1.011,0-1.83-0.82-1.83-1.831v-7.37c0-1.011,0.82-1.83,1.83-1.83h73.281
+		c1.011,0,1.83,0.82,1.83,1.83v7.37C89.977,35.578,89.157,36.397,88.146,36.397z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,49.268h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,49.268z"/>
+		<path style="fill:#666666;" d="M0.008,40.162l2.054-2.054C0.966,38.188,0.089,39.065,0.008,40.162z"/>
+		<polygon style="fill:#666666;" points="0,41.047 0,43.582 5.484,38.099 2.948,38.099 		"/>
+		<polygon style="fill:#666666;" points="6.361,38.099 0,44.46 0,46.995 8.896,38.099 		"/>
+		<path style="fill:#666666;" d="M11.169,40.326c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V40.326z"/>
+		<path style="fill:#666666;" d="M9.654,38.218l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,38.861,10.247,38.419,9.654,38.218z"/>
+		<polygon style="fill:#666666;" points="11.169,43.528 5.429,49.268 7.964,49.268 11.169,46.063 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,49.08H14.866c-1.011,0-1.83-0.82-1.83-1.831v-7.37c0-1.011,0.82-1.831,1.83-1.831h73.281
+		c1.011,0,1.83,0.82,1.83,1.831v7.37C89.977,48.261,89.157,49.08,88.146,49.08z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,61.951h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,61.951z"/>
+		<path style="fill:#666666;" d="M0.008,52.845l2.054-2.054C0.966,50.871,0.089,51.748,0.008,52.845z"/>
+		<polygon style="fill:#666666;" points="0,53.73 0,56.265 5.484,50.782 2.948,50.782 		"/>
+		<polygon style="fill:#666666;" points="6.361,50.782 0,57.143 0,59.678 8.896,50.782 		"/>
+		<path style="fill:#666666;" d="M11.169,53.009c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V53.009z"/>
+		<path style="fill:#666666;" d="M9.654,50.901l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,51.544,10.247,51.102,9.654,50.901z"/>
+		<polygon style="fill:#666666;" points="11.169,56.211 5.429,61.951 7.964,61.951 11.169,58.746 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,61.763H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.831,1.83-1.831h73.281
+		c1.011,0,1.83,0.82,1.83,1.831v7.37C89.977,60.944,89.157,61.763,88.146,61.763z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,74.634h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,74.634z"/>
+		<path style="fill:#666666;" d="M0.008,65.528l2.054-2.054C0.966,63.554,0.089,64.431,0.008,65.528z"/>
+		<polygon style="fill:#666666;" points="0,66.413 0,68.948 5.484,63.465 2.948,63.465 		"/>
+		<polygon style="fill:#666666;" points="6.361,63.465 0,69.826 0,72.361 8.896,63.465 		"/>
+		<path style="fill:#666666;" d="M11.169,65.692c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V65.692z"/>
+		<path style="fill:#666666;" d="M9.654,63.584l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,64.227,10.247,63.785,9.654,63.584z"/>
+		<polygon style="fill:#666666;" points="11.169,68.894 5.429,74.634 7.964,74.634 11.169,71.429 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,74.446H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.831,1.83-1.831h73.281
+		c1.011,0,1.83,0.82,1.83,1.831v7.37C89.977,73.627,89.157,74.446,88.146,74.446z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,87.317h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,87.317z"/>
+		<path style="fill:#666666;" d="M0.008,78.211l2.054-2.054C0.966,76.237,0.089,77.114,0.008,78.211z"/>
+		<polygon style="fill:#666666;" points="0,79.096 0,81.631 5.484,76.148 2.948,76.148 		"/>
+		<polygon style="fill:#666666;" points="6.361,76.148 0,82.509 0,85.044 8.896,76.148 		"/>
+		<path style="fill:#666666;" d="M11.169,78.375c0-0.068-0.004-0.134-0.01-0.2l-9.132,9.132c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V78.375z"/>
+		<path style="fill:#666666;" d="M9.654,76.267l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,76.91,10.247,76.468,9.654,76.267z"/>
+		<polygon style="fill:#666666;" points="11.169,81.577 5.429,87.317 7.964,87.317 11.169,84.112 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,87.129H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.831,1.83-1.831h73.281
+		c1.011,0,1.83,0.82,1.83,1.831v7.37C89.977,86.31,89.157,87.129,88.146,87.129z"/>
+	<g>
+		<path style="fill:#666666;" d="M8.842,100h0.1c1.228,0,2.227-0.999,2.227-2.227v-0.1L8.842,100z"/>
+		<path style="fill:#666666;" d="M0.008,90.894l2.054-2.054C0.966,88.92,0.089,89.797,0.008,90.894z"/>
+		<polygon style="fill:#666666;" points="0,91.779 0,94.314 5.484,88.831 2.948,88.831 		"/>
+		<polygon style="fill:#666666;" points="6.361,88.831 0,95.192 0,97.727 8.896,88.831 		"/>
+		<path style="fill:#666666;" d="M11.169,91.058c0-0.068-0.004-0.134-0.01-0.2L2.027,99.99c0.066,0.006,0.133,0.01,0.2,0.01h2.325
+			l6.617-6.617V91.058z"/>
+		<path style="fill:#666666;" d="M9.654,88.95l-9.536,9.536c0.201,0.592,0.643,1.073,1.211,1.324l9.649-9.649
+			C10.728,89.593,10.247,89.151,9.654,88.95z"/>
+		<polygon style="fill:#666666;" points="11.169,94.26 5.429,100 7.964,100 11.169,96.795 		"/>
+	</g>
+	<path style="fill:#898989;" d="M88.146,99.812H14.866c-1.011,0-1.83-0.82-1.83-1.83v-7.37c0-1.011,0.82-1.83,1.83-1.83h73.281
+		c1.011,0,1.83,0.82,1.83,1.83v7.37C89.977,98.993,89.157,99.812,88.146,99.812z"/>
+	<circle style="fill:#F7941E;" cx="96.125" cy="5.637" r="3.875"/>
+	<circle style="fill:#898989;" cx="96.125" cy="18.37" r="3.875"/>
+	<circle style="fill:#898989;" cx="96.125" cy="31.104" r="3.875"/>
+	<circle style="fill:#F7941E;" cx="96.125" cy="43.837" r="3.875"/>
+	<circle style="fill:#F7941E;" cx="96.125" cy="56.57" r="3.875"/>
+	<circle style="fill:#898989;" cx="96.125" cy="69.304" r="3.875"/>
+	<circle style="fill:#F7941E;" cx="96.125" cy="82.037" r="3.875"/>
+	<circle style="fill:#898989;" cx="96.125" cy="94.77" r="3.875"/>
+</g>
+</svg>
--- a/public/app/plugins/panel/welcome/module.ts
+++ b/public/app/plugins/panel/welcome/module.ts
+import { PanelPlugin } from '@grafana/data';
+import { WelcomeBanner } from './Welcome';
+export const plugin = new PanelPlugin(WelcomeBanner).setNoPadding();
--- a/public/app/plugins/panel/welcome/plugin.json
+++ b/public/app/plugins/panel/welcome/plugin.json
+{
+  "type": "panel",
+  "name": "Welcome",
+  "id": "welcome",
+  "skipDataQuery": true,
+  "hideFromList": true,
+  "info": {
+    "author": {
+      "name": "Grafana Labs",
+      "url": "https://grafana.com"
+    },
+    "logos": {
+      "small": "img/icn-dashlist-panel.svg",
+      "large": "img/icn-dashlist-panel.svg"
+    }
+  }
+}
--- a/public/dashboards/home.json
+++ b/public/dashboards/home.json
@@ -2,30 +2,24 @@
  "links": [],
  "panels": [
    {
-      "content": "<div class=\"dashboard-header\">\n  <span>Welcome to Grafana</span>\n</div>",
      "datasource": null,
-      "editable": true,
      "gridPos": {
-        "h": 2,
+        "h": 3,
        "w": 24,
        "x": 0,
        "y": 0
      },
      "id": 1,
-      "links": [],
-      "mode": "html",
-      "options": {},
-      "style": {},
      "title": "",
      "transparent": true,
-      "type": "text"
+      "type": "welcome"
    },
    {
      "datasource": null,
      "folderId": 0,
      "gridPos": {
        "h": 15,
-        "w": 11,
+        "w": 12,
        "x": 0,
        "y": 4
      },
@@ -46,8 +40,8 @@
      "datasource": null,
      "gridPos": {
        "h": 15,
-        "w": 8,
+        "w": 12,
-        "x": 11,
+        "x": 12,
        "y": 4
      },
      "id": 4,
@@ -57,20 +51,6 @@
      },
      "title": "Latest from the blog",
      "type": "news"
-    },
-    {
-      "datasource": null,
-      "gridPos": {
-        "h": 15,
-        "w": 5,
-        "x": 19,
-        "y": 4
-      },
-      "id": 123124,
-      "links": [],
-      "options": {},
-      "title": "Useful links",
-      "type": "homelinks"
    }
  ],
  "schemaVersion": 22,

--- a/public/img/onboarding_art_dark.svg
+++ b/public/img/onboarding_art_dark.svg
--- a/public/img/onboarding_art_light.svg
+++ b/public/img/onboarding_art_light.svg