From b6cfb65e40670dfa86fadacbceea6ac0985c8206 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 23 Apr 2021 14:06:30 +0200 Subject: [PATCH] Annotations: More fixes to the angular annotation editors (#33303) * Annotations: Fixed angular editor issues * More angular annotation fixes * removed console.log --- .../src/themes/_variables.dark.scss.tmpl.ts | 33 +++++++++---------- .../src/themes/_variables.light.scss.tmpl.ts | 16 ++++----- .../AngularEditorLoader.tsx | 24 ++++++++++---- .../components/AnnotationQueryEditor.tsx | 1 + .../app/plugins/datasource/postgres/module.ts | 5 +-- .../postgres/partials/annotations.editor.html | 4 ++- public/sass/_variables.dark.generated.scss | 27 ++++++++------- public/sass/_variables.light.generated.scss | 16 ++++----- public/sass/base/_code.scss | 6 ++++ public/sass/components/_alerts.scss | 15 +++++---- .../sass/components/_dashboard_settings.scss | 2 +- 11 files changed, 84 insertions(+), 65 deletions(-) diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index cf0d33d11e2..f8cd252dcb9 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -52,7 +52,6 @@ $gray-4: ${theme.v1.palette.gray4}; $gray-5: ${theme.v1.palette.gray5}; $gray-6: ${theme.v1.palette.gray6}; -$input-black: ${theme.v1.colors.formInputBg}; $white: ${theme.v1.palette.white}; $layer0: ${theme.colors.background.canvas}; @@ -206,16 +205,16 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5); // Forms // ------------------------- -$input-bg: $input-black; -$input-bg-disabled: $dark-6; +$input-bg: ${theme.components.input.background}; +$input-bg-disabled: ${theme.colors.action.disabledBackground}; -$input-color: ${theme.v1.colors.formInputText}; -$input-border-color: ${theme.v1.colors.formInputBorder}; +$input-color: ${theme.components.input.text}; +$input-border-color: ${theme.components.input.borderColor}; $input-box-shadow: none; -$input-border-focus: ${theme.v1.palette.blue95}; -$input-box-shadow-focus: $blue-light !default; -$input-color-placeholder: ${theme.v1.colors.formInputPlaceholderText}; -$input-label-bg: ${theme.v1.colors.bg2}; +$input-border-focus: ${theme.colors.primary.border}; +$input-box-shadow-focus: ${theme.colors.primary.border} !default; +$input-color-placeholder: ${theme.colors.text.disabled}; +$input-label-bg: ${theme.colors.background.secondary}; $input-color-select-arrow: $white; // Search @@ -269,14 +268,14 @@ $tab-border-color: $dark-9; // Form states and alerts // ------------------------- -$warning-text-color: $warn; -$error-text-color: #e84d4d; -$success-text-color: #12d95a; +$warning-text-color: ${theme.colors.warning.text}; +$error-text-color: ${theme.colors.error.text}; +$success-text-color: ${theme.colors.success.text}; -$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); -$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); -$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); -$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); +$alert-error-bg: ${theme.colors.error.main}; +$alert-success-bg: ${theme.colors.success.main}; +$alert-warning-bg: ${theme.colors.warning.main}; +$alert-info-bg: ${theme.colors.warning.main}; // Tooltips and popovers // ------------------------- @@ -375,7 +374,7 @@ $panel-editor-viz-item-shadow: 0 0 8px $dark-10; $panel-editor-viz-item-border: 1px solid $dark-10; $panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; $panel-editor-viz-item-border-hover: 1px solid $blue-light; -$panel-editor-viz-item-bg: $input-black; +$panel-editor-viz-item-bg: $input-bg; $panel-editor-tabs-line-color: #e3e3e3; $panel-editor-viz-item-bg-hover: darken($blue-base, 46%); diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 9ff08670f03..7f3d45a2df6 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -56,7 +56,6 @@ $layer1: ${theme.colors.background.primary}; $layer2: ${theme.colors.background.secondary}; $divider: ${theme.colors.border.weak}; - $border0: ${theme.colors.border.weak}; $border1: ${theme.colors.border.medium}; @@ -266,14 +265,14 @@ $tab-border-color: $gray-5; // Form states and alerts // ------------------------- -$warning-text-color: lighten($orange, 10%); -$error-text-color: $red-shade; -$success-text-color: lighten($green-base, 10%); +$warning-text-color: ${theme.colors.warning.text}; +$error-text-color: ${theme.colors.error.text}; +$success-text-color: ${theme.colors.success.text}; -$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); -$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); -$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); -$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); +$alert-error-bg: ${theme.colors.error.main}; +$alert-success-bg: ${theme.colors.success.main}; +$alert-warning-bg: ${theme.colors.warning.main}; +$alert-info-bg: ${theme.colors.warning.main}; // Tooltips and popovers $tooltipBackground: ${theme.colors.background.secondary}; @@ -395,4 +394,5 @@ $vertical-resize-handle-dots-hover: $gray-2; // Calendar $calendar-bg-days: $white; $calendar-bg-now: $gray-6; + `; diff --git a/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx b/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx index e1f2854985f..b01dec61cee 100644 --- a/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx +++ b/public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx @@ -8,9 +8,18 @@ export interface Props { onChange: (annotation: AnnotationQuery) => void; } +interface ScopeProps { + ctrl: { + currentDatasource: DataSourceApi; + currentAnnotation: AnnotationQuery; + ignoreNextWatcherFiring: boolean; + }; +} + export class AngularEditorLoader extends React.PureComponent { ref: HTMLDivElement | null = null; angularComponent?: AngularComponent; + scopeProps?: ScopeProps; componentWillUnmount() { if (this.angularComponent) { @@ -29,16 +38,17 @@ export class AngularEditorLoader extends React.PureComponent { this.loadAngular(); } - if (this.angularComponent && prevProps.annotation !== this.props.annotation) { - const scope = this.angularComponent.getScope(); - scope.ctrl.ignoreNextWatcherFiring = true; - scope.ctrl.currentAnnotation = this.props.annotation; + if (this.scopeProps && this.scopeProps.ctrl.currentAnnotation !== this.props.annotation) { + this.scopeProps.ctrl.ignoreNextWatcherFiring = true; + this.scopeProps.ctrl.currentAnnotation = this.props.annotation; + this.angularComponent?.digest(); } } loadAngular() { if (this.angularComponent) { this.angularComponent.destroy(); + this.scopeProps = undefined; } const loader = getAngularLoader(); @@ -60,10 +70,10 @@ export class AngularEditorLoader extends React.PureComponent { return; } - this.props.onChange({ - ...scopeProps.ctrl.currentAnnotation, - }); + this.props.onChange(scopeProps.ctrl.currentAnnotation); }); + + this.scopeProps = scopeProps; } render() { diff --git a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx index 7befb4eb633..4a3a23b3561 100644 --- a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx @@ -15,6 +15,7 @@ export type Props = { export function AnnotationQueryEditor(props: React.PropsWithChildren) { const { query, onChange } = props; + return ( <>
- 
Annotation Query Format

+    

+    
Annotation Query Format

 An annotation is an event that is overlaid on top of graphs. The query can have up to four columns per row, the time column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
 
 - column with alias: time for the annotation event time. Use epoch time or any native date data type.
@@ -51,4 +52,5 @@ Or build your own conditionals using these macros which just return the values:
 - $__unixEpochNanoTo() ->  1494497183142514872
 		

   

+
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index ce796ac1906..4dfc2dd97da 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -55,7 +55,6 @@ $gray-4: #d8d9da; $gray-5: #ececec; $gray-6: #f4f5f8; -$input-black: #0b0c0e; $white: #ffffff; $layer0: #111217; @@ -209,14 +208,14 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5); // Forms // ------------------------- -$input-bg: $input-black; -$input-bg-disabled: $dark-6; +$input-bg: #111217; +$input-bg-disabled: rgba(201, 209, 217, 0.07); -$input-color: #c7d0d9; +$input-color: rgb(201, 209, 217); $input-border-color: rgba(201, 209, 217, 0.15); $input-box-shadow: none; -$input-border-focus: #5794f2; -$input-box-shadow-focus: $blue-light !default; +$input-border-focus: #6E9FFF; +$input-box-shadow-focus: #6E9FFF !default; $input-color-placeholder: rgba(201, 209, 217, 0.40); $input-label-bg: #22252b; $input-color-select-arrow: $white; @@ -272,14 +271,14 @@ $tab-border-color: $dark-9; // Form states and alerts // ------------------------- -$warning-text-color: $warn; -$error-text-color: #e84d4d; -$success-text-color: #12d95a; +$warning-text-color: #F8D06B; +$error-text-color: #FF5286; +$success-text-color: #6CCF8E; -$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); -$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); -$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); -$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); +$alert-error-bg: #D10E5C; +$alert-success-bg: #1A7F4B; +$alert-warning-bg: #F5B73D; +$alert-info-bg: #F5B73D; // Tooltips and popovers // ------------------------- @@ -378,7 +377,7 @@ $panel-editor-viz-item-shadow: 0 0 8px $dark-10; $panel-editor-viz-item-border: 1px solid $dark-10; $panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; $panel-editor-viz-item-border-hover: 1px solid $blue-light; -$panel-editor-viz-item-bg: $input-black; +$panel-editor-viz-item-bg: $input-bg; $panel-editor-tabs-line-color: #e3e3e3; $panel-editor-viz-item-bg-hover: darken($blue-base, 46%); diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 2b421dc0304..669ff681548 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -58,7 +58,6 @@ $layer1: #fff; $layer2: #F4F5F5; $divider: rgba(36, 41, 46, 0.12); - $border0: rgba(36, 41, 46, 0.12); $border1: rgba(36, 41, 46, 0.30); @@ -268,14 +267,14 @@ $tab-border-color: $gray-5; // Form states and alerts // ------------------------- -$warning-text-color: lighten($orange, 10%); -$error-text-color: $red-shade; -$success-text-color: lighten($green-base, 10%); +$warning-text-color: #BD4B00; +$error-text-color: #CF0E5B; +$success-text-color: #1A7F4B; -$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); -$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); -$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); -$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); +$alert-error-bg: #E0226E; +$alert-success-bg: #1A7F4B; +$alert-warning-bg: #E56F00; +$alert-info-bg: #E56F00; // Tooltips and popovers $tooltipBackground: #F4F5F5; @@ -397,3 +396,4 @@ $vertical-resize-handle-dots-hover: $gray-2; // Calendar $calendar-bg-days: $white; $calendar-bg-now: $gray-6; + diff --git a/public/sass/base/_code.scss b/public/sass/base/_code.scss index 5c23f520689..92a34ebbede 100644 --- a/public/sass/base/_code.scss +++ b/public/sass/base/_code.scss @@ -39,6 +39,12 @@ pre { background-color: $code-tag-bg; padding: 10px; + &.pre--no-style { + background: transparent; + border: none; + padding: 0px; + } + // Make prettyprint styles more spaced out for readability &.prettyprint { margin-bottom: $line-height-base; diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 3ffbcf2d249..d8b78d73fd6 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -9,10 +9,9 @@ padding: 15px 20px; margin-bottom: $space-xs; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); - background: $alert-error-bg; + border-left: 3px solid $alert-error-bg; + background: $layer2; position: relative; - color: $white; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); border-radius: $border-radius; display: flex; flex-direction: row; @@ -23,20 +22,20 @@ // ------------------------- .alert-success { - background: $alert-success-bg; + border-color: $alert-success-bg; } .alert-danger, .alert-error { - background: $alert-error-bg; + border-color: $alert-error-bg; } .alert-info { - background: $alert-info-bg; + border-color: $alert-info-bg; } .alert-warning { - background: $alert-warning-bg; + border-color: $alert-warning-bg; } .page-alert-list { @@ -54,6 +53,7 @@ background: none; display: flex; align-items: center; + .fa { align-self: flex-end; font-size: 21px; @@ -71,6 +71,7 @@ align-items: center; justify-content: center; width: 35px; + .fa { font-size: 21px; } diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss index 663f9c1eb1f..6591e0fbe99 100644 --- a/public/sass/components/_dashboard_settings.scss +++ b/public/sass/components/_dashboard_settings.scss @@ -71,7 +71,7 @@ &.active { @include left-brand-border-gradient(); - background: $page-bg; + background: $panel-bg; } .gicon {