IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Variables: Show description instead of definition in table" (#70043)

Browse Source
This commit is contained in:
Alexa V
2023-06-14 12:50:38 +03:00
committed by GitHub
parent 5c45b8724b
commit b60b43640f
3 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/grafana-e2e-selectors/src/selectors/pages.ts
View File

@@ -114,8 +114,7 @@ export const Pages = {
newButton: 'Variable editor New variable button',
table: 'Variable editor Table',
tableRowNameFields: (variableName: string) => `Variable editor Table Name field ${variableName}`,
tableRowDescriptionFields: (variableName: string) =>
`Variable editor Table Description field ${variableName}`,
tableRowDefinitionFields: (variableName: string) => `Variable editor Table Definition field ${variableName}`,
tableRowArrowUpButtons: (variableName: string) => `Variable editor Table ArrowUp button ${variableName}`,
tableRowArrowDownButtons: (variableName: string) => `Variable editor Table ArrowDown button ${variableName}`,
tableRowDuplicateButtons: (variableName: string) => `Variable editor Table Duplicate button ${variableName}`,

2
public/app/features/variables/editor/VariableEditorList.tsx
View File

@@ -59,7 +59,7 @@ export function VariableEditorList({
<thead>
<tr>
<th>Variable</th>
<th>Description</th>
<th>Definition</th>
<th colSpan={5} />
</tr>
</thead>

26
public/app/features/variables/editor/VariableEditorListRow.tsx
View File

@@ -7,7 +7,7 @@ import { selectors } from '@grafana/e2e-selectors';
import { reportInteraction } from '@grafana/runtime';
import { Button, Icon, IconButton, useStyles2, useTheme2 } from '@grafana/ui';
import { isAdHoc } from '../guard';
import { hasOptions, isAdHoc, isQuery } from '../guard';
import { VariableUsagesButton } from '../inspect/VariableUsagesButton';
import { getVariableUsages, UsagesToNetwork, VariableUsageTree } from '../inspect/utils';
import { KeyedVariableIdentifier } from '../state/types';
@@ -35,6 +35,7 @@ export function VariableEditorListRow({
}: VariableEditorListRowProps): ReactElement {
const theme = useTheme2();
const styles = useStyles2(getStyles);
const definition = getDefinition(variable);
const usages = getVariableUsages(variable.id, usageTree);
const passed = usages > 0 || isAdHoc(variable);
const identifier = toKeyedVariableIdentifier(variable);
@@ -67,14 +68,14 @@ export function VariableEditorListRow({
</td>
<td
role="gridcell"
className={styles.descriptionColumn}
className={styles.definitionColumn}
onClick={(event) => {
event.preventDefault();
propsOnEdit(identifier);
}}
aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDescriptionFields(variable.name)}
aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDefinitionFields(variable.name)}
>
{variable.description}
{definition}
</td>
<td role="gridcell" className={styles.column}>
@@ -121,6 +122,21 @@ export function VariableEditorListRow({
);
}
function getDefinition(model: VariableModel): string {
let definition = '';
if (isQuery(model)) {
if (model.definition) {
definition = model.definition;
} else if (typeof model.query === 'string') {
definition = model.query;
}
} else if (hasOptions(model)) {
definition = model.query;
}
return definition;
}
interface VariableCheckIndicatorProps {
passed: boolean;
}
@@ -158,7 +174,7 @@ function getStyles(theme: GrafanaTheme2) {
cursor: pointer;
color: ${theme.colors.primary.text};
`,
descriptionColumn: css`
definitionColumn: css`
width: 100%;
max-width: 200px;
cursor: pointer;