diff --git a/public/app/features/plugins/built_in_plugins.ts b/public/app/features/plugins/built_in_plugins.ts index d09e9d3ce01..5d4a3171743 100644 --- 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; diff --git a/public/app/plugins/panel/welcome/README.md b/public/app/plugins/panel/welcome/README.md new file mode 100644 index 00000000000..463769dad1f --- /dev/null +++ b/public/app/plugins/panel/welcome/README.md @@ -0,0 +1,2 @@ +# Plugin List Panel - Native Plugin + diff --git a/public/app/plugins/panel/welcome/Welcome.tsx b/public/app/plugins/panel/welcome/Welcome.tsx new file mode 100644 index 00000000000..a64218bcf66 --- /dev/null +++ b/public/app/plugins/panel/welcome/Welcome.tsx @@ -0,0 +1,118 @@ +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 ( +
+

Welcome to Grafana

+
+

Need help?

+
+ +
+
+ {helpOptions.map((option, index) => { + return ( + + {option.label} + + ); + })} +
+
+
+ ); +}; + +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; + `, + }; +}); diff --git a/public/app/plugins/panel/welcome/img/icn-dashlist-panel.svg b/public/app/plugins/panel/welcome/img/icn-dashlist-panel.svg new file mode 100644 index 00000000000..8bac231bedf --- /dev/null +++ b/public/app/plugins/panel/welcome/img/icn-dashlist-panel.svg @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/app/plugins/panel/welcome/module.ts b/public/app/plugins/panel/welcome/module.ts new file mode 100644 index 00000000000..d7b86178a29 --- /dev/null +++ b/public/app/plugins/panel/welcome/module.ts @@ -0,0 +1,4 @@ +import { PanelPlugin } from '@grafana/data'; +import { WelcomeBanner } from './Welcome'; + +export const plugin = new PanelPlugin(WelcomeBanner).setNoPadding(); diff --git a/public/app/plugins/panel/welcome/plugin.json b/public/app/plugins/panel/welcome/plugin.json new file mode 100644 index 00000000000..08fb92a7904 --- /dev/null +++ b/public/app/plugins/panel/welcome/plugin.json @@ -0,0 +1,19 @@ +{ + "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" + } + } +} diff --git a/public/dashboards/home.json b/public/dashboards/home.json index 21561a1113e..01aed960a00 100644 --- a/public/dashboards/home.json +++ b/public/dashboards/home.json @@ -2,30 +2,24 @@ "links": [], "panels": [ { - "content": "
\n Welcome to Grafana\n
", "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, - "x": 11, + "w": 12, + "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, diff --git a/public/img/onboarding_art_dark.svg b/public/img/onboarding_art_dark.svg new file mode 100644 index 00000000000..9d3a430d702 --- /dev/null +++ b/public/img/onboarding_art_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/onboarding_art_light.svg b/public/img/onboarding_art_light.svg new file mode 100644 index 00000000000..ae9fdb7b01f --- /dev/null +++ b/public/img/onboarding_art_light.svg @@ -0,0 +1 @@ + \ No newline at end of file