Annotations: More fixes to the angular annotation editors (#33303)

* Annotations: Fixed angular editor issues

* More angular annotation fixes

* removed console.log

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%);

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;
+
 `;

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<Props> {
   ref: HTMLDivElement | null = null;
   angularComponent?: AngularComponent;
+  scopeProps?: ScopeProps;
 
   componentWillUnmount() {
     if (this.angularComponent) {
@@ -29,16 +38,17 @@ export class AngularEditorLoader extends React.PureComponent<Props> {
       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<Props> {
         return;
       }
 
-      this.props.onChange({
-        ...scopeProps.ctrl.currentAnnotation,
-      });
+      this.props.onChange(scopeProps.ctrl.currentAnnotation);
     });
+
+    this.scopeProps = scopeProps;
   }
 
   render() {

public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx

@@ -15,6 +15,7 @@ export type Props = {
 
 export function AnnotationQueryEditor(props: React.PropsWithChildren<Props>) {
   const { query, onChange } = props;
+
   return (
     <>
       <PanelQueryEditor

public/app/plugins/datasource/postgres/module.ts

@@ -15,10 +15,11 @@ WHERE
 class PostgresAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
 
-  annotation: any;
+  declare annotation: any;
 
   /** @ngInject */
-  constructor() {
+  constructor($scope: any) {
+    this.annotation = $scope.ctrl.annotation;
     this.annotation.rawQuery = this.annotation.rawQuery || defaultQuery;
   }
 }

public/app/plugins/datasource/postgres/partials/annotations.editor.html

@@ -26,7 +26,8 @@
   </div>
 
   <div class="gf-form" ng-show="ctrl.showHelp">
-    <pre class="gf-form-pre alert alert-info"><h6>Annotation Query Format</h6>
+    <div class="grafana-info-box">
+    <pre class="pre--no-style"><h6>Annotation Query Format</h6>
 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: <b>time</b> 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() -&gt;  1494497183142514872
 		</pre>
   </div>
+  </div>
 </div>

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%);

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;
+

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;

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;
   }

public/sass/components/_dashboard_settings.scss

@@ -71,7 +71,7 @@
 
   &.active {
     @include left-brand-border-gradient();
-    background: $page-bg;
+    background: $panel-bg;
   }
 
   .gicon {