diff --git a/public/app/plugins/panel/gettingstarted/README.md b/public/app/plugins/panel/gettingstarted/README.md new file mode 100644 index 00000000000..463769dad1f --- /dev/null +++ b/public/app/plugins/panel/gettingstarted/README.md @@ -0,0 +1,2 @@ +# Plugin List Panel - Native Plugin + diff --git a/public/app/plugins/panel/gettingstarted/editor.html b/public/app/plugins/panel/gettingstarted/editor.html new file mode 100644 index 00000000000..c0577578598 --- /dev/null +++ b/public/app/plugins/panel/gettingstarted/editor.html @@ -0,0 +1,40 @@ +
+
+
+ Mode +
+ +
+
+
+ + + +
+
+ +
+
+ Search options + Query + + + +
+ +
+ Tags + + + +
+
+ +
+
+ Limit number to + +
+
+
diff --git a/public/app/plugins/panel/gettingstarted/img/icn-dashlist-panel.svg b/public/app/plugins/panel/gettingstarted/img/icn-dashlist-panel.svg new file mode 100644 index 00000000000..8bac231bedf --- /dev/null +++ b/public/app/plugins/panel/gettingstarted/img/icn-dashlist-panel.svg @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/app/plugins/panel/gettingstarted/module.html b/public/app/plugins/panel/gettingstarted/module.html new file mode 100644 index 00000000000..ac18a53bd4d --- /dev/null +++ b/public/app/plugins/panel/gettingstarted/module.html @@ -0,0 +1,33 @@ +
+
+
+ Getting Started with Grafana + +
+ +
+
diff --git a/public/app/plugins/panel/gettingstarted/module.ts b/public/app/plugins/panel/gettingstarted/module.ts new file mode 100644 index 00000000000..178c378f04d --- /dev/null +++ b/public/app/plugins/panel/gettingstarted/module.ts @@ -0,0 +1,15 @@ +/// + +import {PanelCtrl} from 'app/plugins/sdk'; + +class GettingstartedPanelCtrl extends PanelCtrl { + static templateUrl = 'public/app/plugins/panel/gettingstarted/module.html'; + + /** @ngInject */ + constructor($scope, $injector) { + super($scope, $injector); + } + +} + +export {GettingstartedPanelCtrl, GettingstartedPanelCtrl as PanelCtrl} diff --git a/public/app/plugins/panel/gettingstarted/plugin.json b/public/app/plugins/panel/gettingstarted/plugin.json new file mode 100644 index 00000000000..afcac53b578 --- /dev/null +++ b/public/app/plugins/panel/gettingstarted/plugin.json @@ -0,0 +1,16 @@ +{ + "type": "panel", + "name": "Getting Started", + "id": "gettingstarted", + + "info": { + "author": { + "name": "Grafana Project", + "url": "http://grafana.org" + }, + "logos": { + "small": "img/icn-dashlist-panel.svg", + "large": "img/icn-dashlist-panel.svg" + } + } +} diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 936ce0af4d6..c12d8a6e1a0 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -42,6 +42,7 @@ @import "components/panel_graph"; @import "components/submenu"; @import "components/panel_dashlist"; +@import "components/panel_gettingstarted"; @import "components/panel_pluginlist"; @import "components/panel_singlestat"; @import "components/panel_table"; diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss new file mode 100644 index 00000000000..c2b3366d54d --- /dev/null +++ b/public/sass/components/_panel_gettingstarted.scss @@ -0,0 +1,486 @@ +ul.gettingstarted-flex-container { + display: flex; + justify-content: space-around; + flex-direction: row; + padding: 20px; + list-style-type: none; +} + +.gettingstarted-flex-item { + align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.gettingstarted-blurb-copy { + font-size: $font-size-base; + margin-bottom: $spacer/2; + text-align: center; +} + +a.gettingstarted-blurb{ + @extend .gettingstarted-blurb-copy; + color: $text-color; + display: block; +} + +a.gettingstarted-blurb:hover{ + text-decoration: underline; +} + +.gettingstarted-blurb-success { + @extend .gettingstarted-blurb-copy; + color: $text-color-weak; + text-decoration: line-through; +} + +a.gettingstarted-blurb-upcoming { + @extend .gettingstarted-blurb-copy; + color: $text-color-weak; +} + +.gettingstarted-icon-container { + height: 50px; +} + +.gettingstarted-icon-active { + color: $brand-primary; + -webkit-text-fill-color: transparent; + background: $brand-gradient; + -webkit-background-clip: text; + text-decoration:none; + font-size: 35px; + vertical-align: sub; + animation: iconPulse 500ms forwards 1s; + will-change: zoom; +} + +.gettingstarted-icon-upcoming { + color: $text-color-weak; + text-decoration:none; + font-size: 35px; + vertical-align: sub; +} + +.gettingstarted-icon-success { + color: $online; + font-size: 35px; + text-decoration:none; + vertical-align: sub; +} + + +.dashlist-CTA-close-btn { + float: right; + padding: 0; + margin: 0 2px 0 0; + background-color: transparent; + border: none; + i { + font-size: 80%; + } + color: $text-color-weak; + &:hover { + color: $white; + } +} + +@keyframes iconPulse { + from { + zoom: 100%; + } + + 50% { + zoom: 102%; + } + + to { + zoom: 100%; + } +} + + +// ----- Progress Tracker ----- + +// ----- Variables ----- + +// Colours +$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-grey: $iconContainerBackground !default; +$progress-color-grey-dark: $iconContainerBackground !default; + +// Sizing +$progress-tracker-padding: 5px !default; + +$marker-size: 60px !default; +$marker-size-half: ($marker-size / 2); +$marker-size-third: ($marker-size / 3); +$marker-size-quarter: ($marker-size / 4); +$marker-spacing: 10px !default; + +$path-height: 4px !default; +$path-position: $marker-size-half - ($path-height / 2); + +$text-padding: $marker-size-half !default; +$text-padding-X: $marker-size-third !default; +$text-padding-Y: 5px !default; +$text-padding--vertical: $marker-size + $marker-size-half !default; + +// Only needed for short text version, the word size should be the width of the widest word without padding. +$word-size: 54px !default; +$progress-tracker-word-padding: ($word-size + $text-padding-X + $marker-size-half) / 2; + +// Animations/Transitions +$animation-duration: 0.3s !default; +$ripple-color: rgba(0, 0, 0, 0.3) !default; + +// ----- Elements ----- + +// Container element +.progress-tracker { + display: flex; + margin: 20px auto; + padding: 0; + list-style: none; +} + +// Step container that creates lines between steps + .progress-step { + display: block; + position: relative; + flex: 1 1 0%; + margin: 0; + padding: 0; + min-width: $marker-size; // For a flexbox bug in firefox that wont allow the text overflow on the text + + // Stops the last step growing + &:last-child { + flex-grow: 0; + } + + // Path between markers, this is not created for the last step + &:not(:last-child)::after { + content: ''; + display: block; + position: absolute; + z-index: 1; + top: $path-position; + bottom: $path-position; + right: - $marker-size-half; + width: 100%; + height: $path-height; + transition: background-color $animation-duration; + } + + // Active state + &.is-active { + .progress-title { + font-weight: 400; + } + } + + > a { + display: block; + } + + } + +// Progress marker + .progress-marker { + display: flex; + justify-content: center; + align-items: center; + position: relative; + z-index: 20; + width: $marker-size; + height: $marker-size; + padding-bottom: 2px; // To align text within the marker + color: #fff; + font-weight: 400; + border: 2px solid transparent; + border-radius: 50%; + transition: background-color, border-color; + transition-duration: $animation-duration; + } + + +// Progress text + .progress-text { + display: block; + padding: $text-padding-Y $text-padding-X; + overflow: hidden; + text-overflow: ellipsis; + } + .progress-title { + margin-top: 0; + } + + +// Step state mixin - The first arugment is required and the rest are optional, if you pass in null the value will not be changed. +@mixin progress-state($marker-color-bg, $marker-color-border: null, $marker-color-text: null, $path-color: null, $text-color: null) { + .progress-marker { + color: $marker-color-text; + background-color: $marker-color-bg; + border-color: $marker-color-border; + } + + &::after { + background-color: $path-color; + } + + .progress-text, .progress-step > a .progress-text { + color: $text-color; + } +} + + +// States + .progress-step { + + // Inactive - Default state + @include progress-state($progress-color, null, #fff, $progress-color-grey-light, $progress-color-grey-dark); + + // Active state + &.is-active { + @include progress-state($progress-color); + } + + // Complete state + &.is-complete { + @include progress-state($progress-color-dark, $path-color: $progress-color-grey); + } + + // Hover state + &:hover { + @include progress-state($progress-color-light); + } + + } + + + +// ----- Modifiers ----- + +// Center align markers and text +.progress-tracker--center { + + .progress-step { + text-align: center; + + &:last-child { + flex-grow: 1; + } + + &::after { + right: -50%; + } + } + + .progress-marker { + margin-left: auto; + margin-right: auto; + } +} + + +// Right align markers and text +.progress-tracker--right { + + .progress-step { + text-align: right; + + &:last-child { + flex-grow: 1; + } + + &::after { + right: calc(-100% + #{$marker-size-half}); + } + } + + .progress-marker { + margin-left: auto; + } +} + + +// Border around steps (Only for use without text) +.progress-tracker--border { + padding: $progress-tracker-padding; + border: 2px solid $progress-color-grey; + border-radius: $marker-size + ($progress-tracker-padding * 2); +} + + +// Spaces between markers +.progress-tracker--spaced { + + .progress-step { + + &::after { + width: calc(100% - #{$marker-size + ($marker-spacing * 2)}); + margin-right: ($marker-size-half + $marker-spacing); + } + } + +} + + +// Word below markers +.progress-tracker--word { + padding-right: $progress-tracker-word-padding; + overflow: hidden; + + .progress-text { + display: inline-block; + white-space: nowrap; + } + + .progress-title { + margin: 0; + } + +} + + +.progress-tracker--word-center { + padding-right: $progress-tracker-word-padding; + padding-left: $progress-tracker-word-padding; + + .progress-text { + padding-right: 0; + padding-left: 0; + transform: translateX(calc(-50% + #{$marker-size-half})); + } + +} + + +.progress-tracker--word-right { + padding-right: 0; + padding-left: $progress-tracker-word-padding; + + .progress-text { + padding-left: 0; + transform: translateX(calc(-100% + #{$marker-size})); + } + +} + + +// Text below markers +.progress-tracker--text { + + .progress-step { + + &:last-child { + flex-grow: 1; + } + } + +} + + +// Text above markers +.progress-tracker--text-top { + + .progress-step::after { + top: auto; + } + + .progress-text { + height: 100%; + } + + .progress-marker { + bottom: $marker-size; + } + +} + + +// Text inline with markers +.progress-tracker--text-inline { + + .progress-step { + display: flex; + } + + .progress-text { + position: relative; + z-index: 30; + max-width: 70%; + white-space: nowrap; + padding-top: 0; + padding-bottom: 0; + background-color: #fff; + } + + .progress-title { + margin: 0; + } + +} + + +// Square markers +.progress-tracker--square { + + .progress-step { + padding-top: 0; + } + + .progress-marker { + transform: scaleX(0.33) translateY(- $path-position); + border-radius: 0; + } + +} + + +// Overflow on small screens +@media (max-width: 399px) { + .progress-tracker-mobile { + overflow-x: auto; + + .progress-tracker { + min-width: 200%; + } + } +} + + +// Vertical layout +.progress-tracker--vertical { + flex-direction: column; + + .progress-step { + flex: 1 1 auto; + + &::after { + right: auto; + top: $marker-size-half; + left: $path-position; + width: $path-height; + height: 100%; + } + } + + .progress-marker { + position: absolute; + left: 0; + } + + .progress-text { + padding-top: $marker-size-quarter; + padding-left: $text-padding--vertical; + } + + .progress-step:not(:last-child) .progress-text { + padding-bottom: $text-padding--vertical; + } +}