IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-26 16:27:02 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: move dom utils to @grafana/ui (#17976)

Browse Source
This commit is contained in:
Ryan McKinley 2019-07-08 10:02:16 -07:00 committed by GitHub
parent 98ba3f34a6
commit ccc3d88cee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/features/explore/utils/dom.ts → packages/grafana-ui/src/utils/dom.ts
View File

@ -1,6 +1,6 @@
// Node.closest() polyfill
if ('Element' in window && !Element.prototype.closest) {
Element.prototype.closest = function(this: any, s) {
Element.prototype.closest = function(this: any, s: string) {
const matches = (this.document || this.ownerDocument).querySelectorAll(s);
let el = this;
let i;
@ -15,7 +15,7 @@ if ('Element' in window && !Element.prototype.closest) {
};
}
export function getPreviousCousin(node, selector) {
export function getPreviousCousin(node: any, selector: string) {
let sibling = node.parentElement.previousSibling;
let el;
while (sibling) {
@ -30,12 +30,12 @@ export function getPreviousCousin(node, selector) {
export function getNextCharacter(global = window) {
const selection = global.getSelection();
if (!selection.anchorNode) {
if (!selection || !selection.anchorNode) {
return null;
}
const range = selection.getRangeAt(0);
const text = selection.anchorNode.textContent;
const offset = range.startOffset;
return text.substr(offset, 1);
return text!.substr(offset, 1);
}

4
packages/grafana-ui/src/utils/index.ts
View File

@ -7,3 +7,7 @@ export * from './deprecationWarning';
export * from './validate';
export { getFlotPairs } from './flotPairs';
export * from './slate';
// Export with a namespace
import * as DOMUtil from './dom'; // includes Element.closest polyfil
export { DOMUtil };

4
public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/KustoQueryField.tsx
View File

@ -4,7 +4,7 @@ import Plain from 'slate-plain-serializer';
import QueryField from './query_field';
import debounce from 'lodash/debounce';
import { getNextCharacter } from 'app/features/explore/utils/dom';
import { DOMUtil } from '@grafana/ui';
import { KEYWORDS, functionTokens, operatorTokens, grafanaMacros } from './kusto/kusto';
// import '../sass/editor.base.scss';
@ -203,7 +203,7 @@ export default class KustoQueryField extends QueryField {
// Modify suggestion based on context
const nextChar = getNextCharacter();
const nextChar = DOMUtil.getNextCharacter();
if (suggestion.type === 'function') {
if (!nextChar || nextChar !== '(') {
suggestionText += '(';

11
public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx
View File

@ -10,13 +10,12 @@ import QueryField, { TypeaheadInput, QueryFieldState } from 'app/features/explor
// Utils & Services
// dom also includes Element polyfills
import { getNextCharacter, getPreviousCousin } from 'app/features/explore/utils/dom';
import BracesPlugin from 'app/features/explore/slate-plugins/braces';
// Types
import { LokiQuery } from '../types';
import { TypeaheadOutput, HistoryItem } from 'app/types/explore';
import { DataSourceApi, ExploreQueryFieldProps, DataSourceStatus } from '@grafana/ui';
import { DataSourceApi, ExploreQueryFieldProps, DataSourceStatus, DOMUtil } from '@grafana/ui';
import { AbsoluteTimeRange } from '@grafana/data';
function getChooserText(hasSyntax: boolean, hasLogLabels: boolean, datasourceStatus: DataSourceStatus) {
@ -36,7 +35,7 @@ function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadTe
// Modify suggestion based on context
switch (typeaheadContext) {
case 'context-labels': {
const nextChar = getNextCharacter();
const nextChar = DOMUtil.getNextCharacter();
if (!nextChar || nextChar === '}' || nextChar === ',') {
suggestion += '=';
}
@ -48,7 +47,7 @@ function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadTe
if (!typeaheadText.match(/^(!?=~?"|")/)) {
suggestion = `"${suggestion}`;
}
if (getNextCharacter() !== '"') {
if (DOMUtil.getNextCharacter() !== '"') {
suggestion = `${suggestion}"`;
}
break;
@ -130,9 +129,9 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
// Get DOM-dependent context
const wrapperClasses = Array.from(wrapperNode.classList);
const labelKeyNode = getPreviousCousin(wrapperNode, '.attr-name');
const labelKeyNode = DOMUtil.getPreviousCousin(wrapperNode, '.attr-name');
const labelKey = labelKeyNode && labelKeyNode.textContent;
const nextChar = getNextCharacter();
const nextChar = DOMUtil.getNextCharacter();
const result = datasource.languageProvider.provideCompletionItems(
{ text, value, prefix, wrapperClasses, labelKey },

11
public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
View File

@ -10,12 +10,11 @@ import Prism from 'prismjs';
import { TypeaheadOutput, HistoryItem } from 'app/types/explore';
// dom also includes Element polyfills
import { getNextCharacter, getPreviousCousin } from 'app/features/explore/utils/dom';
import BracesPlugin from 'app/features/explore/slate-plugins/braces';
import QueryField, { TypeaheadInput, QueryFieldState } from 'app/features/explore/QueryField';
import { PromQuery, PromContext, PromOptions } from '../types';
import { CancelablePromise, makePromiseCancelable } from 'app/core/utils/CancelablePromise';
import { ExploreQueryFieldProps, DataSourceStatus, QueryHint } from '@grafana/ui';
import { ExploreQueryFieldProps, DataSourceStatus, QueryHint, DOMUtil } from '@grafana/ui';
import { isDataFrame, toLegacyResponseData } from '@grafana/data';
import { PrometheusDatasource } from '../datasource';
@ -73,7 +72,7 @@ export function willApplySuggestion(suggestion: string, { typeaheadContext, type
// Modify suggestion based on context
switch (typeaheadContext) {
case 'context-labels': {
const nextChar = getNextCharacter();
const nextChar = DOMUtil.getNextCharacter();
if (!nextChar || nextChar === '}' || nextChar === ',') {
suggestion += '=';
}
@ -85,7 +84,7 @@ export function willApplySuggestion(suggestion: string, { typeaheadContext, type
if (!typeaheadText.match(/^(!?=~?"|")/)) {
suggestion = `"${suggestion}`;
}
if (getNextCharacter() !== '"') {
if (DOMUtil.getNextCharacter() !== '"') {
suggestion = `${suggestion}"`;
}
break;
@ -282,9 +281,9 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
// Get DOM-dependent context
const wrapperClasses = Array.from(wrapperNode.classList);
const labelKeyNode = getPreviousCousin(wrapperNode, '.attr-name');
const labelKeyNode = DOMUtil.getPreviousCousin(wrapperNode, '.attr-name');
const labelKey = labelKeyNode && labelKeyNode.textContent;
const nextChar = getNextCharacter();
const nextChar = DOMUtil.getNextCharacter();
const result = this.languageProvider.provideCompletionItems(
{ text, value, prefix, wrapperClasses, labelKey },