Skip to content

N
nexpie-grafana-theme
Commit 01b46d17 by Peter Holmberg Committed by GitHub
Options

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>
parent 9208c8ef
Showing with 269 additions and 25 deletions
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;
public/app/plugins/panel/welcome/README.md 0 → 100644
# Plugin List Panel - Native Plugin
public/app/plugins/panel/welcome/Welcome.tsx 0 → 100644
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;
`,
};
});
public/app/plugins/panel/welcome/img/icn-dashlist-panel.svg 0 → 100644
<?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>
public/app/plugins/panel/welcome/module.ts 0 → 100644
import { PanelPlugin } from '@grafana/data';
import { WelcomeBanner } from './Welcome';
export const plugin = new PanelPlugin(WelcomeBanner).setNoPadding();
public/app/plugins/panel/welcome/plugin.json 0 → 100644
{
"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"
}
}
}
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,
"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,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment