AzureMonitor: Azure Monitor Cheat sheet (#75931)

This commit is contained in:
Alyssa Bull 2023-10-12 14:42:01 -06:00 committed by GitHub
parent efec1d976a
commit 0a6d78f35e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 773 additions and 3 deletions

View File

@ -248,4 +248,8 @@ export default class AzureLogAnalyticsDatasource extends DataSourceWithBackend<
private isValidConfigField(field: string | undefined): boolean {
return typeof field === 'string' && field.length > 0;
}
async getAzureLogAnalyticsCheatsheetQueries() {
return await this.getResource(`${this.resourcePath}/v1/metadata`);
}
}

View File

@ -0,0 +1,263 @@
import { css } from '@emotion/css';
import React, { useEffect, useMemo, useState } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime';
import {
Button,
Card,
Collapse,
CustomScrollbar,
Field,
Input,
LoadingPlaceholder,
Select,
useStyles2,
} from '@grafana/ui';
import AzureLogAnalyticsDatasource from '../azure_log_analytics/azure_log_analytics_datasource';
import {
AzureMonitorQuery,
AzureQueryType,
Category,
CheatsheetQueries,
CheatsheetQuery,
DropdownCategories,
} from '../types';
import { RawQuery } from './RawQuery';
import tokenizer from './syntax';
export interface AzureCheatSheetProps {
onChange: (query: AzureMonitorQuery) => void;
query: AzureMonitorQuery;
datasource: AzureLogAnalyticsDatasource;
}
const AzureCheatSheet = (props: AzureCheatSheetProps) => {
const [cheatsheetQueries, setCheatsheetQueries] = useState<CheatsheetQueries | null>(null);
const [areDropdownsOpen, setAreDropdownsOpen] = useState<DropdownCategories>({});
const [visibleQueries, setVisibleQueries] = useState<CheatsheetQueries | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [searchInputValue, setSearchInputValue] = useState('');
const styles = useStyles2(getStyles);
const lang = { grammar: tokenizer, name: 'kql' };
const dropdownMenu = useMemo(() => {
if (cheatsheetQueries) {
return Object.keys(cheatsheetQueries).map((category): SelectableValue<string> => {
return {
label: category,
value: category,
};
});
}
return [];
}, [cheatsheetQueries]);
const getCheatsheetQueries = async () => {
await props.datasource.getAzureLogAnalyticsCheatsheetQueries().then((result) => {
result.categories.sort((a: Category, b: Category) => {
return a.displayName.toLowerCase() === b.displayName.toLowerCase()
? 0
: a.displayName.toLowerCase() < b.displayName.toLowerCase()
? -1
: 1;
});
const alphabetizedQueries = result.categories.reduce(
(queriesByCategory: CheatsheetQueries, category: Category) => {
const categoryQueries = category.related.queries.map((queryId: string) => {
return result.queries.find((query: CheatsheetQuery) => query.id === queryId);
});
queriesByCategory[category.displayName] = categoryQueries;
setAreDropdownsOpen({ ...areDropdownsOpen, [category.id]: false });
return queriesByCategory;
},
{}
);
setCheatsheetQueries(alphabetizedQueries);
setVisibleQueries(alphabetizedQueries);
setIsLoading(false);
return alphabetizedQueries;
});
};
useEffect(() => {
if (!cheatsheetQueries) {
getCheatsheetQueries();
}
});
const filterQueriesBySearch = (searchValue: string) => {
const visibleQueriesCategories = Object.keys(visibleQueries!);
if (searchValue.length > 0 && cheatsheetQueries) {
const filteredQueries: CheatsheetQueries = Object.keys(cheatsheetQueries).reduce(
(filteredQueriesBySearch: CheatsheetQueries, category) => {
const filters = cheatsheetQueries![category]!.filter((query) => {
return query.displayName.toLowerCase().includes(searchValue.toLowerCase());
});
if (visibleQueriesCategories.includes(category)) {
filteredQueriesBySearch[category] = filters;
}
return filteredQueriesBySearch;
},
{}
);
setVisibleQueries(filteredQueries);
return filteredQueries;
} else {
if (Object.keys(visibleQueries!).length !== Object.keys(cheatsheetQueries!).length) {
setVisibleQueries(visibleQueries);
return visibleQueries;
} else {
setVisibleQueries(cheatsheetQueries);
return cheatsheetQueries;
}
}
};
const filterQueriesByCategory = (categories: SelectableValue<string>) => {
if (categories.length > 0) {
const selectedCategories = categories.map((selectedCategory: SelectableValue) => selectedCategory.label);
const updatedVisibleQueries = selectedCategories.reduce(
(updatedVisibleQueries: CheatsheetQueries, queryCategory: string) => {
updatedVisibleQueries[queryCategory] = cheatsheetQueries![queryCategory]!;
return updatedVisibleQueries;
},
{}
);
setVisibleQueries(updatedVisibleQueries);
} else {
setVisibleQueries(cheatsheetQueries);
}
};
return (
<div>
{!isLoading && visibleQueries ? (
<div>
<div className={styles.filterAlignment}>
<Input
value={searchInputValue}
onChange={(e) => {
setSearchInputValue(e.currentTarget.value);
const filteredQueries = filterQueriesBySearch(e.currentTarget.value);
setVisibleQueries(filteredQueries);
}}
placeholder="Search Logs queries"
width={40}
/>
<Field label="Categories" className={styles.categoryDropdown}>
<Select
options={dropdownMenu}
value={''}
onChange={(a) => filterQueriesByCategory(a)}
allowCustomValue={false}
backspaceRemovesValue={true}
placeholder="All categories"
isClearable={true}
noOptionsMessage="Unable to list all categories"
formatCreateLabel={(input: string) => `Category: ${input}`}
isSearchable={true}
isMulti={true}
width={40}
/>
</Field>
</div>
<div className={styles.spacing}>
Query results:{' '}
{Object.keys(visibleQueries).reduce((totalQueries: number, category) => {
totalQueries = visibleQueries[category]!.length + totalQueries;
return totalQueries;
}, 0)}
</div>
<CustomScrollbar showScrollIndicators={true} autoHeightMax="350px">
{Object.keys(visibleQueries).map((category: string) => {
if (visibleQueries[category]!.length) {
return (
<Collapse
label={category + ' ' + `(${visibleQueries[category]!.length})`}
collapsible={true}
isOpen={areDropdownsOpen[category]}
onToggle={(isOpen) => setAreDropdownsOpen({ ...areDropdownsOpen, [category]: isOpen })}
key={category}
>
{visibleQueries[category]!.map((query) => {
return (
<Card className={styles.card} key={query.id}>
<Card.Heading>{query.displayName}</Card.Heading>
<CustomScrollbar showScrollIndicators={true} autoHeightMax="100px">
<RawQuery
aria-label={`${query.displayName} raw query`}
query={query.body}
lang={lang}
className={styles.rawQuery}
/>
</CustomScrollbar>
<Card.Actions>
<Button
size="sm"
aria-label="use this query button"
onClick={() => {
props.onChange({
refId: 'A',
queryType: AzureQueryType.LogAnalytics,
azureLogAnalytics: { query: query.body },
datasource: props.datasource,
});
reportInteraction('grafana_azure_cheatsheet_logs_query_selected', {
id: query.id,
queryName: query.displayName,
query: query.body,
queryCategories: query.related.categories,
});
}}
>
Use this query
</Button>
</Card.Actions>
</Card>
);
})}
</Collapse>
);
}
return;
})}
</CustomScrollbar>
</div>
) : (
<LoadingPlaceholder text="Loading..." />
)}
</div>
);
};
export default AzureCheatSheet;
const getStyles = (theme: GrafanaTheme2) => {
return {
card: css({
width: '90%',
display: 'flex',
flexDirection: 'column',
}),
rawQuery: css({
backgroundColor: `${theme.colors.background.primary}`,
padding: `${theme.spacing(1)}`,
marginTop: `${theme.spacing(1)}`,
}),
spacing: css({
marginBottom: `${theme.spacing(1)}`,
}),
filterAlignment: css({
display: 'flex',
}),
categoryDropdown: css({
margin: '0 0 10px 10px',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}),
};
};

View File

@ -0,0 +1,34 @@
import React from 'react';
import { CoreApp } from '@grafana/data';
import { Modal } from '@grafana/ui';
import AzureLogAnalyticsDatasource from '../../azure_log_analytics/azure_log_analytics_datasource';
import { AzureMonitorQuery } from '../../dataquery.gen';
import AzureCheatSheet from '../AzureCheatSheet';
type Props = {
isOpen: boolean;
app?: CoreApp;
onClose: () => void;
onChange: (query: AzureMonitorQuery) => void;
onAddQuery?: (query: AzureMonitorQuery) => void;
datasource: AzureLogAnalyticsDatasource;
};
export const AzureCheatSheetModal = (props: Props) => {
const { isOpen, onClose, datasource, onChange } = props;
return (
<Modal aria-label="Kick start your query modal" isOpen={isOpen} title="Kick start your query" onDismiss={onClose}>
<AzureCheatSheet
onChange={(a) => {
onChange(a);
onClose();
}}
query={{ refId: 'A' }}
datasource={datasource}
></AzureCheatSheet>
</Modal>
);
};

View File

@ -1,8 +1,10 @@
import { css } from '@emotion/css';
import { debounce } from 'lodash';
import React, { useCallback, useMemo } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { Alert, CodeEditor } from '@grafana/ui';
import { reportInteraction } from '@grafana/runtime';
import { Alert, Button, CodeEditor } from '@grafana/ui';
import AzureMonitorDatasource from '../../datasource';
import {
@ -15,6 +17,7 @@ import {
import useLastError from '../../utils/useLastError';
import ArgQueryEditor from '../ArgQueryEditor';
import LogsQueryEditor from '../LogsQueryEditor';
import { AzureCheatSheetModal } from '../LogsQueryEditor/AzureCheatSheetModal';
import NewMetricsQueryEditor from '../MetricsQueryEditor/MetricsQueryEditor';
import { QueryHeader } from '../QueryHeader';
import { Space } from '../Space';
@ -38,6 +41,7 @@ const QueryEditor = ({
}: AzureMonitorQueryEditorProps) => {
const [errorMessage, setError] = useLastError();
const onRunQuery = useMemo(() => debounce(baseOnRunQuery, 500), [baseOnRunQuery]);
const [azureLogsCheatSheetModalOpen, setAzureLogsCheatSheetModalOpen] = useState(false);
const onQueryChange = useCallback(
(newQuery: AzureMonitorQuery) => {
@ -57,8 +61,32 @@ const QueryEditor = ({
return (
<div data-testid="azure-monitor-query-editor">
<QueryHeader query={query} onQueryChange={onQueryChange} />
<AzureCheatSheetModal
datasource={datasource.azureLogAnalyticsDatasource}
isOpen={azureLogsCheatSheetModalOpen}
onClose={() => setAzureLogsCheatSheetModalOpen(false)}
onChange={(a) => onChange({ ...a, queryType: AzureQueryType.LogAnalytics })}
/>
<div className={css({ display: 'flex', alignItems: 'center' })}>
<QueryHeader query={query} onQueryChange={onQueryChange} />
{query.queryType === AzureQueryType.LogAnalytics && (
<Button
aria-label="Azure logs kick start your query button"
variant="secondary"
size="sm"
onClick={() => {
setAzureLogsCheatSheetModalOpen((prevValue) => !prevValue);
reportInteraction('grafana_azure_logs_query_patterns_opened', {
version: 'v2',
editorMode: query.azureLogAnalytics,
});
}}
>
Kick start your query
</Button>
)}
</div>
<EditorForQueryType
data={data}
subscriptionId={subscriptionId}

View File

@ -0,0 +1,37 @@
import { css, cx } from '@emotion/css';
import Prism, { Grammar } from 'prismjs';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data/src';
import { useTheme2 } from '@grafana/ui/src';
export interface Props {
query: string;
lang: {
grammar: Grammar;
name: string;
};
className?: string;
}
export function RawQuery({ query, lang, className }: Props) {
const theme = useTheme2();
const styles = getStyles(theme);
const highlighted = Prism.highlight(query, lang.grammar, lang.name);
return (
<div
className={cx(styles.editorField, 'prism-syntax-highlight', className)}
aria-label="selector"
dangerouslySetInnerHTML={{ __html: highlighted }}
/>
);
}
const getStyles = (theme: GrafanaTheme2) => {
return {
editorField: css({
fontFamily: theme.typography.fontFamilyMonospace,
fontSize: theme.typography.bodySmall.fontSize,
}),
};
};

View File

@ -0,0 +1,366 @@
import { Grammar } from 'prismjs';
import { CompletionItem } from '@grafana/ui';
export const QUERY_COMMANDS: CompletionItem[] = [
{
label: 'fields',
documentation: 'Retrieves the specified fields from log events',
},
{ label: 'display', documentation: 'Specifies which fields to display in the query results' },
{
label: 'filter',
documentation: 'Filters the results of a query based on one or more conditions',
},
{
label: 'stats',
documentation: 'Calculates aggregate statistics based on the values of log fields',
},
{ label: 'sort', documentation: 'Sorts the retrieved log events' },
{ label: 'limit', documentation: 'Specifies the number of log events returned by the query' },
{
label: 'parse',
documentation:
'Extracts data from a log field, creating one or more ephemeral fields that you can process further in the query',
},
];
export const COMPARISON_OPERATORS = ['=', '!=', '<', '<=', '>', '>='];
export const ARITHMETIC_OPERATORS = ['+', '-', '*', '/', '^', '%'];
export const NUMERIC_OPERATORS = [
{
label: 'abs',
detail: 'abs(a)',
documentation: 'Absolute value.',
},
{
label: 'ceil',
detail: 'ceil(a)',
documentation: 'Round to ceiling (the smallest integer that is greater than the value of a).',
},
{
label: 'floor',
detail: 'floor(a)',
documentation: 'Round to floor (the largest integer that is smaller than the value of a).',
},
{
label: 'greatest',
detail: 'greatest(a,b, ... z)',
documentation: 'Returns the largest value.',
},
{
label: 'least',
detail: 'least(a, b, ... z)',
documentation: 'Returns the smallest value.',
},
{
label: 'log',
detail: 'log(a)',
documentation: 'Natural logarithm.',
},
{
label: 'sqrt',
detail: 'sqrt(a)',
documentation: 'Square root.',
},
];
export const GENERAL_FUNCTIONS = [
{
label: 'ispresent',
detail: 'ispresent(fieldname)',
documentation: 'Returns true if the field exists.',
},
{
label: 'coalesce',
detail: 'coalesce(fieldname1, fieldname2, ... fieldnamex)',
documentation: 'Returns the first non-null value from the list.',
},
];
export const STRING_FUNCTIONS = [
{
label: 'isempty',
detail: 'isempty(fieldname)',
documentation: 'Returns true if the field is missing or is an empty string.',
},
{
label: 'isblank',
detail: 'isblank(fieldname)',
documentation: 'Returns true if the field is missing, an empty string, or contains only white space.',
},
{
label: 'concat',
detail: 'concat(string1, string2, ... stringz)',
documentation: 'Concatenates the strings.',
},
{
label: 'ltrim',
detail: 'ltrim(string) or ltrim(string1, string2)',
documentation:
'Remove white space from the left of the string. If the function has a second string argument, it removes the characters of string2 from the left of string1.',
},
{
label: 'rtrim',
detail: 'rtrim(string) or rtrim(string1, string2)',
documentation:
'Remove white space from the right of the string. If the function has a second string argument, it removes the characters of string2 from the right of string1.',
},
{
label: 'trim',
detail: 'trim(string) or trim(string1, string2)',
documentation:
'Remove white space from both ends of the string. If the function has a second string argument, it removes the characters of string2 from both sides of string1.',
},
{
label: 'strlen',
detail: 'strlen(string)',
documentation: 'Returns the length of the string in Unicode code points.',
},
{
label: 'toupper',
detail: 'toupper(string)',
documentation: 'Converts the string to uppercase.',
},
{
label: 'tolower',
detail: 'tolower(string)',
documentation: 'Converts the string to lowercase.',
},
{
label: 'substr',
detail: 'substr(string1, x), or substr(string1, x, y)',
documentation:
'Returns a substring from the index specified by the number argument to the end of the string. If the function has a second number argument, it contains the length of the substring to be retrieved.',
},
{
label: 'replace',
detail: 'replace(string1, string2, string3)',
documentation: 'Replaces all instances of string2 in string1 with string3.',
},
{
label: 'strcontains',
detail: 'strcontains(string1, string2)',
documentation: 'Returns 1 if string1 contains string2 and 0 otherwise.',
},
];
export const DATETIME_FUNCTIONS = [
{
label: 'bin',
detail: 'bin(period)',
documentation: 'Rounds the value of @timestamp to the given period and then truncates.',
},
{
label: 'datefloor',
detail: 'datefloor(a, period)',
documentation: 'Truncates the timestamp to the given period.',
},
{
label: 'dateceil',
detail: 'dateceil(a, period)',
documentation: 'Rounds up the timestamp to the given period and then truncates.',
},
{
label: 'fromMillis',
detail: 'fromMillis(fieldname)',
documentation:
'Interprets the input field as the number of milliseconds since the Unix epoch and converts it to a timestamp.',
},
{
label: 'toMillis',
detail: 'toMillis(fieldname)',
documentation:
'Converts the timestamp found in the named field into a number representing the milliseconds since the Unix epoch.',
},
];
export const IP_FUNCTIONS = [
{
label: 'isValidIp',
detail: 'isValidIp(fieldname)',
documentation: 'Returns true if the field is a valid v4 or v6 IP address.',
},
{
label: 'isValidIpV4',
detail: 'isValidIpV4(fieldname)',
documentation: 'Returns true if the field is a valid v4 IP address.',
},
{
label: 'isValidIpV6',
detail: 'isValidIpV6(fieldname)',
documentation: 'Returns true if the field is a valid v6 IP address.',
},
{
label: 'isIpInSubnet',
detail: 'isIpInSubnet(fieldname, string)',
documentation: 'Returns true if the field is a valid v4 or v6 IP address within the specified v4 or v6 subnet.',
},
{
label: 'isIpv4InSubnet',
detail: 'isIpv4InSubnet(fieldname, string)',
documentation: 'Returns true if the field is a valid v4 IP address within the specified v4 subnet.',
},
{
label: 'isIpv6InSubnet',
detail: 'isIpv6InSubnet(fieldname, string)',
documentation: 'Returns true if the field is a valid v6 IP address within the specified v6 subnet.',
},
];
export const BOOLEAN_FUNCTIONS = [
{
label: 'ispresent',
detail: 'ispresent(fieldname)',
documentation: 'Returns true if the field exists.',
},
{
label: 'isempty',
detail: 'isempty(fieldname)',
documentation: 'Returns true if the field is missing or is an empty string.',
},
{
label: 'isblank',
detail: 'isblank(fieldname)',
documentation: 'Returns true if the field is missing, an empty string, or contains only white space.',
},
{
label: 'strcontains',
detail: 'strcontains(string1, string2)',
documentation: 'Returns 1 if string1 contains string2 and 0 otherwise.',
},
...IP_FUNCTIONS,
];
export const AGGREGATION_FUNCTIONS_STATS = [
{
label: 'avg',
detail: 'avg(NumericFieldname)',
documentation: 'The average of the values in the specified field.',
},
{
label: 'count',
detail: 'count(fieldname) or count(*)',
documentation: 'Counts the log records.',
},
{
label: 'count_distinct',
detail: 'count_distinct(fieldname)',
documentation: 'Returns the number of unique values for the field.',
},
{
label: 'max',
detail: 'max(fieldname)',
documentation: 'The maximum of the values for this log field in the queried logs.',
},
{
label: 'min',
detail: 'min(fieldname)',
documentation: 'The minimum of the values for this log field in the queried logs.',
},
{
label: 'pct',
detail: 'pct(fieldname, value)',
documentation: 'A percentile indicates the relative standing of a value in a datas.',
},
{
label: 'stddev',
detail: 'stddev(NumericFieldname)',
documentation: 'The standard deviation of the values in the specified field.',
},
{
label: 'sum',
detail: 'sum(NumericFieldname)',
documentation: 'The sum of the values in the specified field.',
},
];
export const NON_AGGREGATION_FUNCS_STATS = [
{
label: 'earliest',
detail: 'earliest(fieldname)',
documentation:
'Returns the value of fieldName from the log event that has the earliest time stamp in the queried logs.',
},
{
label: 'latest',
detail: 'latest(fieldname)',
documentation:
'Returns the value of fieldName from the log event that has the latest time stamp in the queried logs.',
},
{
label: 'sortsFirst',
detail: 'sortsFirst(fieldname)',
documentation: 'Returns the value of fieldName that sorts first in the queried logs.',
},
{
label: 'sortsLast',
detail: 'sortsLast(fieldname)',
documentation: 'Returns the value of fieldName that sorts last in the queried logs.',
},
];
export const STATS_FUNCS = [...AGGREGATION_FUNCTIONS_STATS, ...NON_AGGREGATION_FUNCS_STATS];
export const KEYWORDS = ['as', 'like', 'by', 'in', 'desc', 'asc'];
export const FIELD_AND_FILTER_FUNCTIONS = [
...NUMERIC_OPERATORS,
...GENERAL_FUNCTIONS,
...STRING_FUNCTIONS,
...DATETIME_FUNCTIONS,
...IP_FUNCTIONS,
];
export const FUNCTIONS = [...FIELD_AND_FILTER_FUNCTIONS, ...STATS_FUNCS];
const tokenizer: Grammar = {
comment: {
pattern: /^#.*/,
greedy: true,
},
backticks: {
pattern: /`.*?`/,
alias: 'string',
greedy: true,
},
quote: {
pattern: /".*?"/,
alias: 'string',
greedy: true,
},
regex: {
pattern: /\/.*?\/(?=\||\s*$|,)/,
greedy: true,
},
'query-command': {
pattern: new RegExp(`\\b(?:${QUERY_COMMANDS.map((command) => command.label).join('|')})\\b`, 'i'),
alias: 'function',
},
function: {
pattern: new RegExp(`\\b(?:${FUNCTIONS.map((f) => f.label).join('|')})\\b`, 'i'),
},
keyword: {
pattern: new RegExp(`(\\s+)(${KEYWORDS.join('|')})(?=\\s+)`, 'i'),
lookbehind: true,
},
'log-group-name': {
pattern: /[\.\-_/#A-Za-z0-9]+/,
},
'field-name': {
pattern: /(@?[_a-zA-Z]+[_.0-9a-zA-Z]*)|(`((\\`)|([^`]))*?`)/,
greedy: true,
},
number: /\b-?\d+((\.\d*)?([eE][+-]?\d+)?)?\b/,
'command-separator': {
pattern: /\|/,
alias: 'punctuation',
},
'comparison-operator': {
pattern: /([<>]=?)|(!?=)/,
},
punctuation: /[{}()`,.]/,
whitespace: /\s+/,
};
export default tokenizer;

View File

@ -420,3 +420,41 @@ interface MetricMetadataValue {
name: AzureMonitorLocalizedValue;
value: string;
}
export type Category = {
displayName: string;
id: string;
related: {
queries: string[];
tables: string[];
};
};
export type CheatsheetQuery = {
body: string;
description: string;
displayName: string;
id: string;
properties: {
ExampleQuery: boolean;
QueryAttributes: {
isMultiResource: boolean;
};
};
related: {
categories: string[];
resourceTypes: string[];
tables: string[];
};
tags: {
Topic: string[];
};
};
export type CheatsheetQueries = {
[key: string]: CheatsheetQuery[];
};
export type DropdownCategories = {
[key: string]: boolean;
};