From e47fc40b13253d4f50f82464206e7ebe3ffa80ec Mon Sep 17 00:00:00 2001 From: ijin08 Date: Wed, 21 Nov 2018 16:05:01 +0100 Subject: [PATCH 01/17] added icons for panel-edit side menu --- public/img/Alerts.svg | 9 ++++++++ public/img/Queries.svg | 8 +++++++ public/img/QueriesSelected.svg | 31 +++++++++++++++++++++++++ public/img/Visualization.svg | 7 ++++++ public/img/VisualizationSelected.svg | 34 ++++++++++++++++++++++++++++ 5 files changed, 89 insertions(+) create mode 100644 public/img/Alerts.svg create mode 100644 public/img/Queries.svg create mode 100644 public/img/QueriesSelected.svg create mode 100644 public/img/Visualization.svg create mode 100644 public/img/VisualizationSelected.svg diff --git a/public/img/Alerts.svg b/public/img/Alerts.svg new file mode 100644 index 00000000000..482b3c16e73 --- /dev/null +++ b/public/img/Alerts.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/Queries.svg b/public/img/Queries.svg new file mode 100644 index 00000000000..994b8512bc9 --- /dev/null +++ b/public/img/Queries.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/img/QueriesSelected.svg b/public/img/QueriesSelected.svg new file mode 100644 index 00000000000..d200bbc367b --- /dev/null +++ b/public/img/QueriesSelected.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/Visualization.svg b/public/img/Visualization.svg new file mode 100644 index 00000000000..d2cdd81401f --- /dev/null +++ b/public/img/Visualization.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/img/VisualizationSelected.svg b/public/img/VisualizationSelected.svg new file mode 100644 index 00000000000..b7b5fd96aed --- /dev/null +++ b/public/img/VisualizationSelected.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From c7e296307a6c2fb2154540d04b011b56e60dee21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 21 Nov 2018 20:32:04 +0100 Subject: [PATCH 02/17] panel edit ux experiments --- .../dashboard/dashgrid/EditorTabBody.tsx | 20 ++++++------- .../dashboard/dashgrid/GeneralTab.tsx | 2 +- .../dashboard/dashgrid/PanelEditor.tsx | 17 ++++------- .../dashboard/dashgrid/QueriesTab.tsx | 2 +- .../dashboard/dashgrid/VisualizationTab.tsx | 2 +- .../img/{Alerts.svg => panel-tabs/alert.svg} | 0 .../queries-selected.svg} | 0 .../{Queries.svg => panel-tabs/queries.svg} | 0 .../visualization-selected.svg} | 0 .../visualization.svg} | 0 public/sass/components/_panel_editor.scss | 28 +++++++++---------- public/sass/components/_toolbar.scss | 9 ++++-- 12 files changed, 38 insertions(+), 42 deletions(-) rename public/img/{Alerts.svg => panel-tabs/alert.svg} (100%) rename public/img/{QueriesSelected.svg => panel-tabs/queries-selected.svg} (100%) rename public/img/{Queries.svg => panel-tabs/queries.svg} (100%) rename public/img/{VisualizationSelected.svg => panel-tabs/visualization-selected.svg} (100%) rename public/img/{Visualization.svg => panel-tabs/visualization.svg} (100%) diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx index 0192de77e9f..63c8e74ef94 100644 --- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -4,6 +4,7 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn'; interface Props { children: JSX.Element; + heading: string; main?: EditorToolBarView; toolbarItems: EditorToolBarView[]; } @@ -94,17 +95,16 @@ export class EditorTabBody extends PureComponent { } render() { - const { children, toolbarItems, main } = this.props; + const { children, toolbarItems, main, heading } = this.props; const { openView } = this.state; return ( - <> - {main && ( -
- {this.renderMainSelection(main)} -
- {toolbarItems.map(item => this.renderButton(item))} -
- )} +
+
+
{heading}
+ {main && this.renderMainSelection(main)} +
+ {toolbarItems.map(item => this.renderButton(item))} +
@@ -115,7 +115,7 @@ export class EditorTabBody extends PureComponent {
- +
); } } diff --git a/public/app/features/dashboard/dashgrid/GeneralTab.tsx b/public/app/features/dashboard/dashgrid/GeneralTab.tsx index 0b600e08d83..f7de2d3ed30 100644 --- a/public/app/features/dashboard/dashgrid/GeneralTab.tsx +++ b/public/app/features/dashboard/dashgrid/GeneralTab.tsx @@ -50,7 +50,7 @@ export class GeneralTab extends PureComponent { }; return ( - +
(this.element = element)} /> ); diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 019982707a1..2ea49b0553f 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -26,7 +26,6 @@ interface PanelEditorProps { interface PanelEditorTab { id: string; text: string; - icon: string; } export class PanelEditor extends PureComponent { @@ -74,16 +73,14 @@ export class PanelEditor extends PureComponent { const activeTab = store.getState().location.query.tab || 'queries'; const tabs = [ - { id: 'general', text: 'General', icon: 'gicon gicon-preferences' }, - { id: 'queries', text: 'Queries', icon: 'fa fa-database' }, - { id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' }, + { id: 'queries', text: 'Queries' }, + { id: 'visualization', text: 'Visualization' }, ]; if (config.alertingEnabled && plugin.id === 'graph') { tabs.push({ id: 'alert', text: 'Alert', - icon: 'gicon gicon-alert', }); } @@ -96,11 +93,9 @@ export class PanelEditor extends PureComponent {
-
    {tabs.map(tab => { return ; })} -
{this.renderCurrentTab(activeTab)}
@@ -116,15 +111,15 @@ interface TabItemParams { function TabItem({ tab, activeTab, onClick }: TabItemParams) { const tabClasses = classNames({ - 'gf-tabs-link': true, + 'panel-editor-tabs__link': true, active: activeTab === tab.id, }); return ( -
  • onClick(tab)}> +
    onClick(tab)}> - {tab.text} + -
    • +
    ); } diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx index 878472094dc..5ce178c7931 100644 --- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx +++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx @@ -238,7 +238,7 @@ export class QueriesTab extends PureComponent { }; return ( - +
    (this.element = element)} style={{ width: '100%' }} /> ); diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx index d6573fe9eec..75e9940d67c 100644 --- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx +++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx @@ -127,7 +127,7 @@ export class VisualizationTab extends PureComponent { }; return ( - + {this.renderPanelOptions()} ); diff --git a/public/img/Alerts.svg b/public/img/panel-tabs/alert.svg similarity index 100% rename from public/img/Alerts.svg rename to public/img/panel-tabs/alert.svg diff --git a/public/img/QueriesSelected.svg b/public/img/panel-tabs/queries-selected.svg similarity index 100% rename from public/img/QueriesSelected.svg rename to public/img/panel-tabs/queries-selected.svg diff --git a/public/img/Queries.svg b/public/img/panel-tabs/queries.svg similarity index 100% rename from public/img/Queries.svg rename to public/img/panel-tabs/queries.svg diff --git a/public/img/VisualizationSelected.svg b/public/img/panel-tabs/visualization-selected.svg similarity index 100% rename from public/img/VisualizationSelected.svg rename to public/img/panel-tabs/visualization-selected.svg diff --git a/public/img/Visualization.svg b/public/img/panel-tabs/visualization.svg similarity index 100% rename from public/img/Visualization.svg rename to public/img/panel-tabs/visualization.svg diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 0baaaa3ea88..dfa496a7d27 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -24,11 +24,17 @@ .panel-editor-container__editor { margin-top: $panel-margin*2; display: flex; - flex-direction: column; + flex-direction: row; height: 65%; position: relative; } +.panel-editor__right { + display: flex; + flex-direction: column; + flex-grow: 1; +} + .panel-editor__scroll { flex-grow: 1; min-width: 0; @@ -37,6 +43,7 @@ .panel-editor__content { padding: 40px 20px; + background: $input-label-bg; } .panel-in-fullscreen { @@ -149,22 +156,13 @@ .panel-editor-tabs { position: relative; z-index: 2; - box-shadow: $page-header-shadow; - border-bottom: 1px solid $page-header-border-color; - padding: 0 $dashboard-padding; - - @include clearfix(); - - .active.gf-tabs-link { - background: $toolbar-tab-bg; - } + display: flex; + flex-direction: column; + padding: 40px 10px 10px 10px; } -.panel-editor-tabs__close { - padding: 5px 9px; - border-radius: $border-radius; - float: right; - @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl); +.panel-editor-tabs__item { + margin-bottom: 25px; } .ds-picker-list { diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss index aa1c46e0fb4..d398e0eb97c 100644 --- a/public/sass/components/_toolbar.scss +++ b/public/sass/components/_toolbar.scss @@ -2,14 +2,17 @@ display: flex; align-content: center; align-items: center; - background: $toolbar-bg; - box-shadow: $toolbar-shadow; - padding: 7px 20px 7px 20px; + padding: 3px 20px 3px 20px; position: relative; z-index: 1; flex: 0 0 auto; } +.toolbar__heading { + font-size: $font-size-lg; + padding-right: 10px; +} + .toolbar__main { padding: $input-padding-y $input-padding-x; font-size: $font-size-md; From 9a2b2863fb714835f91f7ee3fbecf10bc8d1867b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 22 Nov 2018 08:46:54 +0100 Subject: [PATCH 03/17] styling progress --- .../features/dashboard/dashgrid/AlertTab.tsx | 2 +- .../dashboard/dashgrid/GeneralTab.tsx | 8 +-- .../dashboard/dashgrid/PanelEditor.tsx | 23 +++--- .../features/panel/partials/metrics_tab.html | 70 ------------------- public/sass/components/_panel_editor.scss | 41 ++++++++++- public/sass/components/_toolbar.scss | 3 + public/sass/layout/_page.scss | 6 ++ 7 files changed, 61 insertions(+), 92 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/dashboard/dashgrid/AlertTab.tsx index bf691782e92..7df7864c758 100644 --- a/public/app/features/dashboard/dashgrid/AlertTab.tsx +++ b/public/app/features/dashboard/dashgrid/AlertTab.tsx @@ -64,7 +64,7 @@ export class AlertTab extends PureComponent { render() { return ( - +
    (this.element = element)} /> ); diff --git a/public/app/features/dashboard/dashgrid/GeneralTab.tsx b/public/app/features/dashboard/dashgrid/GeneralTab.tsx index f7de2d3ed30..2814b825f17 100644 --- a/public/app/features/dashboard/dashgrid/GeneralTab.tsx +++ b/public/app/features/dashboard/dashgrid/GeneralTab.tsx @@ -43,14 +43,8 @@ export class GeneralTab extends PureComponent { } render() { - const currentDataSource = { - title: 'ProductionDB', - imgSrc: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg', - render: () =>

    hello

    , - }; - return ( - +
    (this.element = element)} /> ); diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 2ea49b0553f..0d38b60fa95 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -72,10 +72,7 @@ export class PanelEditor extends PureComponent { const { plugin } = this.props; const activeTab = store.getState().location.query.tab || 'queries'; - const tabs = [ - { id: 'queries', text: 'Queries' }, - { id: 'visualization', text: 'Visualization' }, - ]; + const tabs = [{ id: 'queries', text: 'Queries' }, { id: 'visualization', text: 'Visualization' }]; if (config.alertingEnabled && plugin.id === 'graph') { tabs.push({ @@ -86,16 +83,18 @@ export class PanelEditor extends PureComponent { return (
    -
    -
    -
    -
    -
    + { + //
    + //
    + //
    + //
    + //
    + }
    - {tabs.map(tab => { - return ; - })} + {tabs.map(tab => { + return ; + })}
    {this.renderCurrentTab(activeTab)}
    diff --git a/public/app/features/panel/partials/metrics_tab.html b/public/app/features/panel/partials/metrics_tab.html index 7899312f5c3..ecee1f76ea9 100644 --- a/public/app/features/panel/partials/metrics_tab.html +++ b/public/app/features/panel/partials/metrics_tab.html @@ -1,73 +1,3 @@ -
    -
    -
    - - - -
    - -
    - -
    -
    - - Options - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    - - - - A lower limit for the auto group by time interval. Recommended to be set to write frequency, - for example 1m if your data is written every minute. Access auto interval via variable $__interval for time range - string and $__interval_ms for numeric variable that can be used in math expressions. - -
    -
    - - - - If your time series store has a query cache this option can override the default - cache timeout. Specify a numeric value in seconds. - -
    -
    - - - - The maximum data points the query should return. For graphs this - is automatically set to one data point per pixel. - -
    -
    - -
    -
    - - - -
    - - -
    -
    diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index dfa496a7d27..27a3ad01bf7 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -33,6 +33,10 @@ display: flex; flex-direction: column; flex-grow: 1; + background: $page-bg; + margin: 0 67px; + border-left: 2px solid #ac5224; + border-radius: 3px; } .panel-editor__scroll { @@ -43,7 +47,6 @@ .panel-editor__content { padding: 40px 20px; - background: $input-label-bg; } .panel-in-fullscreen { @@ -158,11 +161,45 @@ z-index: 2; display: flex; flex-direction: column; - padding: 40px 10px 10px 10px; + position: absolute; + top: 60px; + left: 5px; + align-items: center; + + &::before { + content: ''; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 25px; + width: 2px; + background: #8e8e8e; + } } .panel-editor-tabs__item { margin-bottom: 25px; + position: relative; + z-index: 1; + text-align: center; + + &:last-child { + margin-bottom: 0; + } +} + +.panel-editor-tabs__link { + display: inline-block; + + &.active { + position: relative; + left: 4px; + } + + img { + height: 44px; + } } .ds-picker-list { diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss index d398e0eb97c..9e850968bcf 100644 --- a/public/sass/components/_toolbar.scss +++ b/public/sass/components/_toolbar.scss @@ -6,6 +6,9 @@ position: relative; z-index: 1; flex: 0 0 auto; + background: $input-label-bg; + border-bottom: 1px solid $black; + border-radius: 3px; } .toolbar__heading { diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index faa5b94d4ad..4655c73b48d 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -14,6 +14,12 @@ background: $page-gradient; } +.panel-in-fullscreen { + .main-view { + background: linear-gradient(180deg, #222426 10px, #090909 200px); + } +} + .page-container { margin-left: auto; margin-right: auto; From dc2ebeb7c0870f9b8ce61534d11a947a921d508b Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 22 Nov 2018 11:00:27 +0100 Subject: [PATCH 04/17] margin when listing multiple gf-form should be right when listing multiple gf-form elements this style is applied to all elements except the first. By having the margin on the right side there will always be some margin between all gf-forms --- public/sass/components/_gf-form.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 6d83fc6cf0b..da3800cfa1a 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -82,7 +82,7 @@ $input-border: 1px solid $input-border-color; align-content: flex-start; .gf-form + .gf-form { - margin-right: $gf-form-margin; + margin-left: $gf-form-margin; } } From 547044b65fef73e5058dfcc4235960079e53e80f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 22 Nov 2018 11:41:33 +0100 Subject: [PATCH 05/17] style tweaks --- public/app/features/dashboard/dashgrid/EditorTabBody.tsx | 4 ++-- public/app/features/dashboard/dashgrid/PanelEditor.tsx | 2 +- .../app/features/dashboard/dashgrid/VisualizationTab.tsx | 8 +++++++- public/sass/components/_panel_editor.scss | 2 +- public/sass/components/_toolbar.scss | 9 +++------ 5 files changed, 14 insertions(+), 11 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx index 63c8e74ef94..6ac3cd0573f 100644 --- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -98,7 +98,7 @@ export class EditorTabBody extends PureComponent { const { children, toolbarItems, main, heading } = this.props; const { openView } = this.state; return ( -
    + <>
    {heading}
    {main && this.renderMainSelection(main)} @@ -115,7 +115,7 @@ export class EditorTabBody extends PureComponent {
    -
    + ); } } diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 0d38b60fa95..24856006e28 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -96,7 +96,7 @@ export class PanelEditor extends PureComponent { return ; })}
    - {this.renderCurrentTab(activeTab)} +
    {this.renderCurrentTab(activeTab)}
    ); } diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx index 75e9940d67c..bcb1c0bb0a6 100644 --- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx +++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx @@ -126,8 +126,14 @@ export class VisualizationTab extends PureComponent { }, }; + const panelHelp = { + title: '', + icon: 'fa fa-question', + render: () =>

    Help

    , + }; + return ( - + {this.renderPanelOptions()} ); diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 27a3ad01bf7..436014346d3 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -162,7 +162,7 @@ display: flex; flex-direction: column; position: absolute; - top: 60px; + top: 79px; left: 5px; align-items: center; diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss index 9e850968bcf..72ab783fed2 100644 --- a/public/sass/components/_toolbar.scss +++ b/public/sass/components/_toolbar.scss @@ -6,7 +6,7 @@ position: relative; z-index: 1; flex: 0 0 auto; - background: $input-label-bg; + background: $black; border-bottom: 1px solid $black; border-radius: 3px; } @@ -44,10 +44,7 @@ .toolbar-subview { position: relative; - padding: 20px 20px; - background-color: $empty-list-cta-bg; - top: -45px; - margin: 0 30px 20px 0px; + top: -23px; } .toolbar-subview__close { @@ -56,7 +53,7 @@ border: none; position: absolute; right: 15px; - top: 20px; + top: 0px; font-size: $font-size-md; &:hover { From d70dfd5fd7922a113ae63eeb7890f7a01a72b546 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 22 Nov 2018 12:13:28 +0100 Subject: [PATCH 06/17] edit mode styling --- .../features/dashboard/dashgrid/EditorTabBody.tsx | 10 ++++------ public/sass/components/_panel_editor.scss | 15 +++++++++------ public/sass/components/_toolbar.scss | 9 ++------- 3 files changed, 15 insertions(+), 19 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx index 6ac3cd0573f..02404a917e6 100644 --- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -107,12 +107,10 @@ export class EditorTabBody extends PureComponent {
    -
    - - {openView && this.renderOpenView(openView)} - - {children} -
    + +
    {openView && this.renderOpenView(openView)}
    +     +
    {children}
    diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 436014346d3..907fa0ce44e 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -49,6 +49,11 @@ padding: 40px 20px; } +.panel-editor__toolbar-view { + background: $black; + padding: 20px; +} + .panel-in-fullscreen { .sidemenu { display: none; @@ -116,9 +121,8 @@ } .viz-picker__item { - background: $card-background; - box-shadow: $card-shadow; - + background: $panel-bg; + border: $panel-border; border-radius: 3px; height: 90px; width: 150px; @@ -210,9 +214,8 @@ } .ds-picker-list__item { - background: $card-background; - box-shadow: $card-shadow; - + background: $panel-bg; + border: $panel-border; border-radius: 3px; display: flex; cursor: pointer; diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss index 72ab783fed2..ca81a6a7316 100644 --- a/public/sass/components/_toolbar.scss +++ b/public/sass/components/_toolbar.scss @@ -42,18 +42,13 @@ height: 20px; } -.toolbar-subview { - position: relative; - top: -23px; -} - .toolbar-subview__close { background: transparent; padding: 4px 8px 4px 9px; border: none; position: absolute; - right: 15px; - top: 0px; + right: 25px; + top: 20px; font-size: $font-size-md; &:hover { From 1b92bc62cbdbe2cabdd2c43bd1ae198f9cdeb57d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 22 Nov 2018 12:19:52 +0100 Subject: [PATCH 07/17] edit mode styling --- .../features/dashboard/dashgrid/EditorTabBody.tsx | 14 ++++++++++++-- .../app/features/dashboard/dashgrid/QueriesTab.tsx | 2 +- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx index 02404a917e6..6228cbe6691 100644 --- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -20,6 +20,7 @@ export interface EditorToolBarView { interface State { openView?: EditorToolBarView; + test: boolean; } export class EditorTabBody extends PureComponent { @@ -28,9 +29,14 @@ export class EditorTabBody extends PureComponent { this.state = { openView: null, + test: false, }; } + componentDidMount() { + this.setState({ test: true }); + } + onToggleToolBarView = (item: EditorToolBarView) => { this.setState({ openView: item === this.state.openView ? null : item, @@ -96,7 +102,7 @@ export class EditorTabBody extends PureComponent { render() { const { children, toolbarItems, main, heading } = this.props; - const { openView } = this.state; + const { openView, test } = this.state; return ( <>
    @@ -110,7 +116,11 @@ export class EditorTabBody extends PureComponent {
    {openView && this.renderOpenView(openView)}
     -
    {children}
    +
    + + {children} + +
    diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx index 5ce178c7931..cba631fb141 100644 --- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx +++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx @@ -238,7 +238,7 @@ export class QueriesTab extends PureComponent { }; return ( - +
    (this.element = element)} style={{ width: '100%' }} /> ); From 300bd75b542f797a93d2a0b6312a4d79d84b1d3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 22 Nov 2018 12:22:59 +0100 Subject: [PATCH 08/17] edit mode styling --- .../app/features/dashboard/dashgrid/EditorTabBody.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx index 6228cbe6691..8f213533a1e 100644 --- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -20,7 +20,7 @@ export interface EditorToolBarView { interface State { openView?: EditorToolBarView; - test: boolean; + fadeIn: boolean; } export class EditorTabBody extends PureComponent { @@ -29,12 +29,12 @@ export class EditorTabBody extends PureComponent { this.state = { openView: null, - test: false, + fadeIn: false, }; } componentDidMount() { - this.setState({ test: true }); + this.setState({ fadeIn: true }); } onToggleToolBarView = (item: EditorToolBarView) => { @@ -102,7 +102,8 @@ export class EditorTabBody extends PureComponent { render() { const { children, toolbarItems, main, heading } = this.props; - const { openView, test } = this.state; + const { openView, fadeIn } = this.state; + return ( <>
    @@ -117,7 +118,7 @@ export class EditorTabBody extends PureComponent {
    {openView && this.renderOpenView(openView)}
    - + {children}
    From c928c546a3602f9b34c6a265c6fe08fe594a5653 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Thu, 22 Nov 2018 12:51:10 +0100 Subject: [PATCH 09/17] Sticky footer for all pages Currently the footer is based on top margins which looks odd on big screen sizes. Also, the footer shows up on the top of the page on pages take a moment to load (while ng-view is rendering). - True sticky footer based on flexbox - Ensure footer stays at bottom while ng-view div does not exist yet --- public/sass/components/_footer.scss | 3 ++- public/sass/layout/_page.scss | 23 +++++++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss index 9bc99c30d1d..893eea02914 100644 --- a/public/sass/components/_footer.scss +++ b/public/sass/components/_footer.scss @@ -4,7 +4,7 @@ .footer { color: $footer-link-color; - padding: 5rem 0 1rem 0; + padding: 1rem 0 1rem 0; font-size: $font-size-sm; position: relative; width: 98%; /* was causing horiz scrollbars - need to examine */ @@ -38,6 +38,7 @@ } } +// Keeping footer inside the graphic on Login screen .login-page { .footer { bottom: $spacer; diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index faa5b94d4ad..312248086fa 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -40,6 +40,29 @@ &--dashboard { height: calc(100% - 56px); } + + // Sticky footer + display: flex; + flex-direction: column; + + > div { + flex-grow: 1; + } + + > .footer { + flex-shrink: 0; + } + + // Render in correct position even ng-view div is not rendered yet + > .footer:first-child { + flex-grow: 1; + display: flex; + + > * { + width: 100%; + align-self: flex-end; + } + } } // fix for phantomjs From f8b1484265d06b5cc2f5fba41af2c9a33e3f8742 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 22 Nov 2018 15:34:55 +0100 Subject: [PATCH 10/17] minor style changes --- public/sass/_variables.dark.scss | 5 ++--- public/sass/_variables.light.scss | 5 ++--- public/sass/components/_panel_editor.scss | 4 ++-- public/sass/components/_toolbar.scss | 5 ++--- public/sass/layout/_page.scss | 2 +- 5 files changed, 9 insertions(+), 12 deletions(-) diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index cdd5fc46ad6..43aa7df7683 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -79,6 +79,7 @@ $brand-gradient: linear-gradient( ); $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); +$edit-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 00px, #090909 50%); // Links // ------------------------- @@ -268,9 +269,7 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black; $tab-border-color: $dark-4; // Toolbar -$toolbar-bg: $page-header-bg; -$toolbar-shadow: 0 0 20px black; -$toolbar-tab-bg: $gray-blue; +$toolbar-bg: $black; // Pagination // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 4e3c8fc3bd6..806aae353c3 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -76,6 +76,7 @@ $textShadow: none; // gradients $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); $page-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); +$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); // Links // ------------------------- @@ -215,9 +216,7 @@ $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; $tab-border-color: $gray-5; // Toolbar -$toolbar-bg: linear-gradient(90deg, #ffffff, #e6eef9); -$toolbar-shadow: 1px 1px 3px #c7d0d8; -$toolbar-tab-bg: $white; +$toolbar-bg: white; // search $search-shadow: 0 5px 30px 0 $gray-4; diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 907fa0ce44e..656c1eb429b 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -25,7 +25,7 @@ margin-top: $panel-margin*2; display: flex; flex-direction: row; - height: 65%; + height: 60%; position: relative; } @@ -34,7 +34,7 @@ flex-direction: column; flex-grow: 1; background: $page-bg; - margin: 0 67px; + margin: 0 62px; border-left: 2px solid #ac5224; border-radius: 3px; } diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss index ca81a6a7316..6eb4e4f7e7f 100644 --- a/public/sass/components/_toolbar.scss +++ b/public/sass/components/_toolbar.scss @@ -6,14 +6,13 @@ position: relative; z-index: 1; flex: 0 0 auto; - background: $black; - border-bottom: 1px solid $black; + background: $toolbar-bg; border-radius: 3px; } .toolbar__heading { font-size: $font-size-lg; - padding-right: 10px; + padding-right: 20px; } .toolbar__main { diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 4655c73b48d..02f21ab96bd 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -16,7 +16,7 @@ .panel-in-fullscreen { .main-view { - background: linear-gradient(180deg, #222426 10px, #090909 200px); + background: $edit-gradient; } } From 5ebb201caa434c62cf9074341500783a1f824453 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Thu, 22 Nov 2018 15:59:15 +0100 Subject: [PATCH 11/17] docs: signout_redirect_url description in auth overview --- docs/sources/auth/overview.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/docs/sources/auth/overview.md b/docs/sources/auth/overview.md index d4360d554c1..0480ee88adc 100644 --- a/docs/sources/auth/overview.md +++ b/docs/sources/auth/overview.md @@ -78,8 +78,8 @@ disable_login_form = true ### Automatic OAuth login -Set to true to attempt login with OAuth automatically, skipping the login screen. -This setting is ignored if multiple OAuth providers are configured. +Set to true to attempt login with OAuth automatically, skipping the login screen. +This setting is ignored if multiple OAuth providers are configured. Defaults to `false`. ```bash @@ -95,3 +95,12 @@ Set to the option detailed below to true to hide sign-out menu link. Useful if y [auth] disable_signout_menu = true ``` + +### URL redirect after signing out + +URL to redirect the user to after signing out from Grafana. This can for example be used to enable signout from oauth provider. + +```bash +[auth] +signout_redirect_url = +``` From c8e42c021699137033d4a44223c766c59fb5a6b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 23 Nov 2018 07:31:13 +0100 Subject: [PATCH 12/17] styling tweaks --- .../dashboard/dashgrid/GeneralTab.tsx | 2 +- .../dashboard/dashgrid/PanelEditor.tsx | 6 +++- .../dashboard/dashgrid/VizTypePicker.tsx | 4 --- public/img/panel-tabs/alert-selected.svg | 9 ++++++ public/img/panel-tabs/general-selected.svg | 31 +++++++++++++++++++ public/img/panel-tabs/general.svg | 8 +++++ public/sass/_variables.dark.scss | 4 +-- public/sass/components/_gf-form.scss | 1 + public/sass/components/_panel_editor.scss | 8 ++--- public/sass/components/_toolbar.scss | 1 + 10 files changed, 62 insertions(+), 12 deletions(-) create mode 100644 public/img/panel-tabs/alert-selected.svg create mode 100644 public/img/panel-tabs/general-selected.svg create mode 100644 public/img/panel-tabs/general.svg diff --git a/public/app/features/dashboard/dashgrid/GeneralTab.tsx b/public/app/features/dashboard/dashgrid/GeneralTab.tsx index 2814b825f17..96694e346df 100644 --- a/public/app/features/dashboard/dashgrid/GeneralTab.tsx +++ b/public/app/features/dashboard/dashgrid/GeneralTab.tsx @@ -44,7 +44,7 @@ export class GeneralTab extends PureComponent { render() { return ( - +
    (this.element = element)} /> ); diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 24856006e28..eef7431eec5 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -72,7 +72,11 @@ export class PanelEditor extends PureComponent { const { plugin } = this.props; const activeTab = store.getState().location.query.tab || 'queries'; - const tabs = [{ id: 'queries', text: 'Queries' }, { id: 'visualization', text: 'Visualization' }]; + const tabs = [ + { id: 'queries', text: 'Queries' }, + { id: 'visualization', text: 'Visualization' }, + { id: 'general', text: 'General' }, + ]; if (config.alertingEnabled && plugin.id === 'graph') { tabs.push({ diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index 4d886c86d74..2dd1b0284b6 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -67,10 +67,6 @@ export class VizTypePicker extends PureComponent { /> -
    - - -
    ); } diff --git a/public/img/panel-tabs/alert-selected.svg b/public/img/panel-tabs/alert-selected.svg new file mode 100644 index 00000000000..482b3c16e73 --- /dev/null +++ b/public/img/panel-tabs/alert-selected.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/panel-tabs/general-selected.svg b/public/img/panel-tabs/general-selected.svg new file mode 100644 index 00000000000..d200bbc367b --- /dev/null +++ b/public/img/panel-tabs/general-selected.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/panel-tabs/general.svg b/public/img/panel-tabs/general.svg new file mode 100644 index 00000000000..994b8512bc9 --- /dev/null +++ b/public/img/panel-tabs/general.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 43aa7df7683..2e98bc48aae 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -79,7 +79,7 @@ $brand-gradient: linear-gradient( ); $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); -$edit-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 00px, #090909 50%); +$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 00px, #090909 60%); // Links // ------------------------- @@ -366,6 +366,6 @@ $switch-slider-shadow: 0 0 3px black; //Checkbox // ------------------------- $checkbox-bg: $dark-1; -$checkbox-border: 1px solid $gray-2; +$checkbox-border: 1px solid $gray-1; $checkbox-checked-bg: linear-gradient(0deg, $orange, $red); $checkbox-color: $dark-1; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 48e886e4c93..b15283e00e3 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -181,6 +181,7 @@ $input-border: 1px solid $input-border-color; @at-root textarea#{&} { overflow: auto; white-space: pre-wrap; + height: auto; } // Unstyle the caret on `