opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-22 19:03:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Annotations: Fixed angular editor issues

* More angular annotation fixes

* removed console.log
This commit is contained in:
Torkel Ödegaard
2021-04-23 14:06:30 +02:00
committed by GitHub
parent 37f7b91a6b
commit b6cfb65e40
11 changed files with 84 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -52,7 +52,6 @@ $gray-4: ${theme.v1.palette.gray4};
$gray-5: ${theme.v1.palette.gray5}; $gray-5: ${theme.v1.palette.gray5};
$gray-6: ${theme.v1.palette.gray6}; $gray-6: ${theme.v1.palette.gray6};
$input-black: ${theme.v1.colors.formInputBg};
$white: ${theme.v1.palette.white}; $white: ${theme.v1.palette.white};
$layer0: ${theme.colors.background.canvas}; $layer0: ${theme.colors.background.canvas};
@ -206,16 +205,16 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: $input-black; $input-bg: ${theme.components.input.background};
$input-bg-disabled: $dark-6; $input-bg-disabled: ${theme.colors.action.disabledBackground};
$input-color: ${theme.v1.colors.formInputText}; $input-color: ${theme.components.input.text};
$input-border-color: ${theme.v1.colors.formInputBorder}; $input-border-color: ${theme.components.input.borderColor};
$input-box-shadow: none; $input-box-shadow: none;
$input-border-focus: ${theme.v1.palette.blue95}; $input-border-focus: ${theme.colors.primary.border};
$input-box-shadow-focus: $blue-light !default; $input-box-shadow-focus: ${theme.colors.primary.border} !default;
$input-color-placeholder: ${theme.v1.colors.formInputPlaceholderText}; $input-color-placeholder: ${theme.colors.text.disabled};
$input-label-bg: ${theme.v1.colors.bg2}; $input-label-bg: ${theme.colors.background.secondary};
$input-color-select-arrow: $white; $input-color-select-arrow: $white;
// Search // Search
@ -269,14 +268,14 @@ $tab-border-color: $dark-9;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
$warning-text-color: $warn; $warning-text-color: ${theme.colors.warning.text};
$error-text-color: #e84d4d; $error-text-color: ${theme.colors.error.text};
$success-text-color: #12d95a; $success-text-color: ${theme.colors.success.text};
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-error-bg: ${theme.colors.error.main};
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); $alert-success-bg: ${theme.colors.success.main};
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-warning-bg: ${theme.colors.warning.main};
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); $alert-info-bg: ${theme.colors.warning.main};
// Tooltips and popovers // 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-border: 1px solid $dark-10;
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; $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-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-tabs-line-color: #e3e3e3;
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%); $panel-editor-viz-item-bg-hover: darken($blue-base, 46%);

16
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -56,7 +56,6 @@ $layer1: ${theme.colors.background.primary};
$layer2: ${theme.colors.background.secondary}; $layer2: ${theme.colors.background.secondary};
$divider: ${theme.colors.border.weak}; $divider: ${theme.colors.border.weak};
$border0: ${theme.colors.border.weak}; $border0: ${theme.colors.border.weak};
$border1: ${theme.colors.border.medium}; $border1: ${theme.colors.border.medium};
@ -266,14 +265,14 @@ $tab-border-color: $gray-5;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
$warning-text-color: lighten($orange, 10%); $warning-text-color: ${theme.colors.warning.text};
$error-text-color: $red-shade; $error-text-color: ${theme.colors.error.text};
$success-text-color: lighten($green-base, 10%); $success-text-color: ${theme.colors.success.text};
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-error-bg: ${theme.colors.error.main};
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); $alert-success-bg: ${theme.colors.success.main};
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-warning-bg: ${theme.colors.warning.main};
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); $alert-info-bg: ${theme.colors.warning.main};
// Tooltips and popovers // Tooltips and popovers
$tooltipBackground: ${theme.colors.background.secondary}; $tooltipBackground: ${theme.colors.background.secondary};
@ -395,4 +394,5 @@ $vertical-resize-handle-dots-hover: $gray-2;
// Calendar // Calendar
$calendar-bg-days: $white; $calendar-bg-days: $white;
$calendar-bg-now: $gray-6; $calendar-bg-now: $gray-6;
`; `;

24
public/app/features/dashboard/components/AnnotationSettings/AngularEditorLoader.tsx
View File

@ -8,9 +8,18 @@ export interface Props {
onChange: (annotation: AnnotationQuery) => void; onChange: (annotation: AnnotationQuery) => void;
} }
interface ScopeProps {
ctrl: {
currentDatasource: DataSourceApi;
currentAnnotation: AnnotationQuery;
ignoreNextWatcherFiring: boolean;
};
}
export class AngularEditorLoader extends React.PureComponent<Props> { export class AngularEditorLoader extends React.PureComponent<Props> {
ref: HTMLDivElement | null = null; ref: HTMLDivElement | null = null;
angularComponent?: AngularComponent; angularComponent?: AngularComponent;
scopeProps?: ScopeProps;
componentWillUnmount() { componentWillUnmount() {
if (this.angularComponent) { if (this.angularComponent) {
@ -29,16 +38,17 @@ export class AngularEditorLoader extends React.PureComponent<Props> {
this.loadAngular(); this.loadAngular();
} }
if (this.angularComponent && prevProps.annotation !== this.props.annotation) { if (this.scopeProps && this.scopeProps.ctrl.currentAnnotation !== this.props.annotation) {
const scope = this.angularComponent.getScope(); this.scopeProps.ctrl.ignoreNextWatcherFiring = true;
scope.ctrl.ignoreNextWatcherFiring = true; this.scopeProps.ctrl.currentAnnotation = this.props.annotation;
scope.ctrl.currentAnnotation = this.props.annotation; this.angularComponent?.digest();
} }
} }
loadAngular() { loadAngular() {
if (this.angularComponent) { if (this.angularComponent) {
this.angularComponent.destroy(); this.angularComponent.destroy();
this.scopeProps = undefined;
} }
const loader = getAngularLoader(); const loader = getAngularLoader();
@ -60,10 +70,10 @@ export class AngularEditorLoader extends React.PureComponent<Props> {
return; return;
} }
this.props.onChange({ this.props.onChange(scopeProps.ctrl.currentAnnotation);
...scopeProps.ctrl.currentAnnotation,
});
}); });
this.scopeProps = scopeProps;
} }
render() { render() {

1
public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
View File

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

5
public/app/plugins/datasource/postgres/module.ts
View File

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

4
public/app/plugins/datasource/postgres/partials/annotations.editor.html
View File

@ -26,7 +26,8 @@
</div> </div>
<div class="gf-form" ng-show="ctrl.showHelp"> <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. 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. - 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 - $__unixEpochNanoTo() -&gt; 1494497183142514872
</pre> </pre>
</div> </div>
</div>
</div> </div>

27
public/sass/_variables.dark.generated.scss
View File

@ -55,7 +55,6 @@ $gray-4: #d8d9da;
$gray-5: #ececec; $gray-5: #ececec;
$gray-6: #f4f5f8; $gray-6: #f4f5f8;
$input-black: #0b0c0e;
$white: #ffffff; $white: #ffffff;
$layer0: #111217; $layer0: #111217;
@ -209,14 +208,14 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: $input-black; $input-bg: #111217;
$input-bg-disabled: $dark-6; $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-border-color: rgba(201, 209, 217, 0.15);
$input-box-shadow: none; $input-box-shadow: none;
$input-border-focus: #5794f2; $input-border-focus: #6E9FFF;
$input-box-shadow-focus: $blue-light !default; $input-box-shadow-focus: #6E9FFF !default;
$input-color-placeholder: rgba(201, 209, 217, 0.40); $input-color-placeholder: rgba(201, 209, 217, 0.40);
$input-label-bg: #22252b; $input-label-bg: #22252b;
$input-color-select-arrow: $white; $input-color-select-arrow: $white;
@ -272,14 +271,14 @@ $tab-border-color: $dark-9;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
$warning-text-color: $warn; $warning-text-color: #F8D06B;
$error-text-color: #e84d4d; $error-text-color: #FF5286;
$success-text-color: #12d95a; $success-text-color: #6CCF8E;
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-error-bg: #D10E5C;
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); $alert-success-bg: #1A7F4B;
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-warning-bg: #F5B73D;
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); $alert-info-bg: #F5B73D;
// Tooltips and popovers // 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-border: 1px solid $dark-10;
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; $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-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-tabs-line-color: #e3e3e3;
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%); $panel-editor-viz-item-bg-hover: darken($blue-base, 46%);

16
public/sass/_variables.light.generated.scss
View File

@ -58,7 +58,6 @@ $layer1: #fff;
$layer2: #F4F5F5; $layer2: #F4F5F5;
$divider: rgba(36, 41, 46, 0.12); $divider: rgba(36, 41, 46, 0.12);
$border0: rgba(36, 41, 46, 0.12); $border0: rgba(36, 41, 46, 0.12);
$border1: rgba(36, 41, 46, 0.30); $border1: rgba(36, 41, 46, 0.30);
@ -268,14 +267,14 @@ $tab-border-color: $gray-5;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
$warning-text-color: lighten($orange, 10%); $warning-text-color: #BD4B00;
$error-text-color: $red-shade; $error-text-color: #CF0E5B;
$success-text-color: lighten($green-base, 10%); $success-text-color: #1A7F4B;
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-error-bg: #E0226E;
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); $alert-success-bg: #1A7F4B;
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-warning-bg: #E56F00;
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); $alert-info-bg: #E56F00;
// Tooltips and popovers // Tooltips and popovers
$tooltipBackground: #F4F5F5; $tooltipBackground: #F4F5F5;
@ -397,3 +396,4 @@ $vertical-resize-handle-dots-hover: $gray-2;
// Calendar // Calendar
$calendar-bg-days: $white; $calendar-bg-days: $white;
$calendar-bg-now: $gray-6; $calendar-bg-now: $gray-6;

6
public/sass/base/_code.scss
View File

@ -39,6 +39,12 @@ pre {
background-color: $code-tag-bg; background-color: $code-tag-bg;
padding: 10px; padding: 10px;
&.pre--no-style {
background: transparent;
border: none;
padding: 0px;
}
// Make prettyprint styles more spaced out for readability // Make prettyprint styles more spaced out for readability
&.prettyprint { &.prettyprint {
margin-bottom: $line-height-base; margin-bottom: $line-height-base;

15
public/sass/components/_alerts.scss
View File

@ -9,10 +9,9 @@
padding: 15px 20px; padding: 15px 20px;
margin-bottom: $space-xs; margin-bottom: $space-xs;
text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); 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; position: relative;
color: $white;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
border-radius: $border-radius; border-radius: $border-radius;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -23,20 +22,20 @@
// ------------------------- // -------------------------
.alert-success { .alert-success {
background: $alert-success-bg; border-color: $alert-success-bg;
} }
.alert-danger, .alert-danger,
.alert-error { .alert-error {
background: $alert-error-bg; border-color: $alert-error-bg;
} }
.alert-info { .alert-info {
background: $alert-info-bg; border-color: $alert-info-bg;
} }
.alert-warning { .alert-warning {
background: $alert-warning-bg; border-color: $alert-warning-bg;
} }
.page-alert-list { .page-alert-list {
@ -54,6 +53,7 @@
background: none; background: none;
display: flex; display: flex;
align-items: center; align-items: center;
.fa { .fa {
align-self: flex-end; align-self: flex-end;
font-size: 21px; font-size: 21px;
@ -71,6 +71,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 35px; width: 35px;
.fa { .fa {
font-size: 21px; font-size: 21px;
} }

2
public/sass/components/_dashboard_settings.scss
View File

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