diff --git a/public/app/features/explore/CorrelationEditorModeBar.tsx b/public/app/features/explore/CorrelationEditorModeBar.tsx index 25739ad1b5c..1d52028c036 100644 --- a/public/app/features/explore/CorrelationEditorModeBar.tsx +++ b/public/app/features/explore/CorrelationEditorModeBar.tsx @@ -1,11 +1,9 @@ -import { css } from '@emotion/css'; import { useEffect, useState } from 'react'; import { useBeforeUnload, useUnmount } from 'react-use'; -import { GrafanaTheme2, colorManipulator } from '@grafana/data'; import { Trans, t } from '@grafana/i18n'; import { reportInteraction } from '@grafana/runtime'; -import { Button, Icon, Stack, Tooltip, useStyles2 } from '@grafana/ui'; +import { Alert, Badge, Button, Stack, Text } from '@grafana/ui'; import { Prompt } from 'app/core/components/FormPrompt/Prompt'; import { CORRELATION_EDITOR_POST_CONFIRM_ACTION, ExploreItemState } from 'app/types/explore'; import { useDispatch, useSelector } from 'app/types/store'; @@ -21,7 +19,6 @@ import { selectCorrelationDetails, selectIsHelperShowing } from './state/selecto export const CorrelationEditorModeBar = ({ panes }: { panes: Array<[string, ExploreItemState]> }) => { const dispatch = useDispatch(); - const styles = useStyles2(getStyles); const correlationDetails = useSelector(selectCorrelationDetails); const isHelperShowing = useSelector(selectIsHelperShowing); const [saveMessage, setSaveMessage] = useState(undefined); // undefined means do not show @@ -230,74 +227,68 @@ export const CorrelationEditorModeBar = ({ panes }: { panes: Array<[string, Expl message={saveMessage} /> )} -
- - - - - - + + + + + + Correlation Editor Mode + + + + + + + Step 1: In the left pane, run a query and click a table cell link or a "🔗 Correlate with" + button. + + + + + Step 2: In the right pane (Target Query Builder), build and test your correlation query. + + + + + Step 3: Click Save to create the correlation. + + + + + + + + -
+ ); }; - -const getStyles = (theme: GrafanaTheme2) => { - const contrastColor = theme.colors.getContrastText(theme.colors.primary.main); - const lighterBackgroundColor = colorManipulator.lighten(theme.colors.primary.main, 0.1); - const darkerBackgroundColor = colorManipulator.darken(theme.colors.primary.main, 0.2); - - const disabledColor = colorManipulator.darken(contrastColor, 0.2); - - return { - correlationEditorTop: css({ - backgroundColor: theme.colors.primary.main, - marginTop: '3px', - padding: theme.spacing(1), - }), - iconColor: css({ - color: contrastColor, - }), - buttonColor: css({ - color: contrastColor, - borderColor: contrastColor, - '&:hover': { - color: contrastColor, - borderColor: contrastColor, - backgroundColor: lighterBackgroundColor, - }, - }), - // important needed to override disabled state styling - disabledButtonColor: css({ - color: `${disabledColor} !important`, - backgroundColor: `${darkerBackgroundColor} !important`, - }), - }; -}; diff --git a/public/app/features/explore/CorrelationHelper.tsx b/public/app/features/explore/CorrelationHelper.tsx index 34fd82f52ec..e107fd360ea 100644 --- a/public/app/features/explore/CorrelationHelper.tsx +++ b/public/app/features/explore/CorrelationHelper.tsx @@ -157,19 +157,37 @@ export const CorrelationHelper = ({ exploreId, correlations }: Props) => { } /> )} - - - The correlation link will appear by the {'{{resultField}}'} field. You can use the following - variables to set up your correlations: - - 
-          {Object.entries(correlations.vars).map((entry) => {
-            return `\$\{${entry[0]}\} = ${entry[1]}\n`;
-          })}
-
+ +
+
+ + When saved, the {'{{resultField}}'} field will have a clickable link that runs your target + query below. Use the below variables in your query. When clicked, they're replaced with values from that + row. + +
+
+ {Object.entries(correlations.vars).map(([name, value]) => ( +
+
+ ${`{${name}}`} +
+
+ + {value} + +
+
+ ))} +
+
{ @@ -177,7 +195,9 @@ export const CorrelationHelper = ({ exploreId, correlations }: Props) => { }} label={ - Label / Description + + Correlation Label / Description + {!isLabelDescOpen && !loadingLabel && ( {`Label: ${getValues('label') || defaultLabel}`} )} @@ -287,5 +307,69 @@ const getStyles = (theme: GrafanaTheme2) => { transformationMeta: css({ alignItems: 'baseline', }), + alertWrapper: css({ + '& > div': { + minWidth: 0, + maxWidth: '100%', + overflow: 'hidden', + }, + }), + alertContent: css({ + minWidth: 0, + maxWidth: '100%', + overflow: 'hidden', + width: '100%', + }), + variableList: css({ + marginTop: theme.spacing(1.5), + marginBottom: theme.spacing(2), + display: 'table', + width: '100%', + tableLayout: 'auto', + borderCollapse: 'collapse', + }), + variableRow: css({ + display: 'table-row', + }), + variableNameCell: css({ + display: 'table-cell', + width: '1%', + paddingBottom: theme.spacing(0.5), + paddingRight: theme.spacing(1), + verticalAlign: 'top', + whiteSpace: 'nowrap', + }), + variableName: css({ + display: 'inline-block', + backgroundColor: theme.colors.background.secondary, + padding: theme.spacing(0.5, 1), + borderRadius: theme.shape.radius.default, + fontFamily: theme.typography.fontFamilyMonospace, + fontSize: theme.typography.bodySmall.fontSize, + color: theme.colors.primary.text, + fontWeight: theme.typography.fontWeightMedium, + whiteSpace: 'nowrap', + }), + variableValueCell: css({ + display: 'table-cell', + width: '100%', + maxWidth: 0, + paddingBottom: theme.spacing(0.5), + verticalAlign: 'top', + }), + variableValue: css({ + display: 'inline-block', + backgroundColor: theme.colors.background.secondary, + padding: theme.spacing(0.5, 1), + borderRadius: theme.shape.radius.default, + fontFamily: theme.typography.fontFamilyMonospace, + fontSize: theme.typography.bodySmall.fontSize, + color: theme.colors.text.primary, + maxWidth: '100%', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + verticalAlign: 'top', + }), }; }; diff --git a/public/app/features/explore/ExplorePage.tsx b/public/app/features/explore/ExplorePage.tsx index ed3c0de6d3b..6e22ea6e2dc 100644 --- a/public/app/features/explore/ExplorePage.tsx +++ b/public/app/features/explore/ExplorePage.tsx @@ -120,9 +120,6 @@ const getStyles = (theme: GrafanaTheme2) => { overflow: 'hidden', }), correlationsEditorIndicator: css({ - borderLeft: `4px solid ${theme.colors.primary.main}`, - borderRight: `4px solid ${theme.colors.primary.main}`, - borderBottom: `4px solid ${theme.colors.primary.main}`, overflow: 'scroll', }), }; diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index 766f46431e5..e0aa9a58a66 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -16,6 +16,8 @@ import { ButtonGroup, useStyles2, Button, + Badge, + Tooltip, } from '@grafana/ui'; import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate'; import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; @@ -57,6 +59,10 @@ const getStyles = (theme: GrafanaTheme2, splitted: Boolean) => ({ marginRight: theme.spacing(0.5), width: splitted && theme.spacing(6), }), + badgeWrapper: css({ + marginTop: theme.spacing(2), + marginLeft: theme.spacing(2), + }), }); interface Props { @@ -219,10 +225,34 @@ export function ExploreToolbar({ exploreId, onChangeTime, onContentOutlineToogle , ]; + const showBuilderIndicator = isCorrelationsEditorMode && !isLeftPane; + const showSourceIndicator = isCorrelationsEditorMode && isLeftPane && splitted; + return (
{refreshInterval && } + {showSourceIndicator && ( +
+ + + +
+ )} + {showBuilderIndicator && ( +
+ + + +
+ )} {{resultField}} field. You can use the following variables to set up your correlations:", + "body-correlation-details": "When saved, the <1>{{resultField}} field will have a clickable link that runs your target query below. Use the below variables in your query. When clicked, they're replaced with values from that row.", "expression": "Expression: <1>{{expression}}", "label-description": "Description", - "label-description-header": "Label / Description", + "label-description-header": "Correlation Label / Description", "label-label": "Label", "title-correlation-details": "Correlation details", "tooltip-transformations": "A transformation extracts one or more variables out of a single field.",