mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Explore: Support custom display label for derived fields buttons for Loki datasource (#37273)
This commit is contained in:
@@ -21,6 +21,12 @@ const getStyles = stylesFactory(() => ({
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
`,
|
||||
urlField: css`
|
||||
flex: 1;
|
||||
`,
|
||||
urlDisplayLabelField: css`
|
||||
flex: 1;
|
||||
`,
|
||||
}));
|
||||
|
||||
type Props = {
|
||||
@@ -83,9 +89,16 @@ export const DataLink = (props: Props) => {
|
||||
suggestions={suggestions}
|
||||
/>
|
||||
}
|
||||
className={css`
|
||||
width: 100%;
|
||||
`}
|
||||
className={styles.urlField}
|
||||
/>
|
||||
<FormField
|
||||
className={styles.urlDisplayLabelField}
|
||||
inputWidth={null}
|
||||
label="URL Label"
|
||||
type="text"
|
||||
value={value.urlDisplayLabel}
|
||||
onChange={handleChange('urlDisplayLabel')}
|
||||
tooltip={'Use to override the button label.'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Observable, of, throwError } from 'rxjs';
|
||||
import {
|
||||
ArrayVector,
|
||||
CoreApp,
|
||||
DataLink,
|
||||
DataQueryRequest,
|
||||
DataSourceInstanceSettings,
|
||||
DataSourcePluginMeta,
|
||||
@@ -255,14 +256,16 @@ describe('ElasticDatasource', function (this: any) {
|
||||
{
|
||||
field: 'host',
|
||||
url: 'http://localhost:3000/${__value.raw}',
|
||||
urlDisplayLabel: 'Custom Label',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
expect(response.data.length).toBe(1);
|
||||
const links = response.data[0].fields.find((field: Field) => field.name === 'host').config.links;
|
||||
const links: DataLink[] = response.data[0].fields.find((field: Field) => field.name === 'host').config.links;
|
||||
expect(links.length).toBe(1);
|
||||
expect(links[0].url).toBe('http://localhost:3000/${__value.raw}');
|
||||
expect(links[0].title).toBe('Custom Label');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -896,7 +896,7 @@ export function enhanceDataFrame(dataFrame: DataFrame, dataLinks: DataLinkConfig
|
||||
const dsSettings = dataSourceSrv.getInstanceSettings(dataLinkConfig.datasourceUid);
|
||||
|
||||
link = {
|
||||
title: '',
|
||||
title: dataLinkConfig.urlDisplayLabel || '',
|
||||
url: '',
|
||||
internal: {
|
||||
query: { query: dataLinkConfig.url },
|
||||
@@ -906,7 +906,7 @@ export function enhanceDataFrame(dataFrame: DataFrame, dataLinks: DataLinkConfig
|
||||
};
|
||||
} else {
|
||||
link = {
|
||||
title: '',
|
||||
title: dataLinkConfig.urlDisplayLabel || '',
|
||||
url: dataLinkConfig.url,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -75,5 +75,6 @@ export interface ElasticsearchQuery extends DataQuery {
|
||||
export type DataLinkConfig = {
|
||||
field: string;
|
||||
url: string;
|
||||
urlDisplayLabel?: string;
|
||||
datasourceUid?: string;
|
||||
};
|
||||
|
||||
@@ -19,6 +19,12 @@ const getStyles = stylesFactory(() => ({
|
||||
regexField: css`
|
||||
flex: 3;
|
||||
`,
|
||||
urlField: css`
|
||||
flex: 1;
|
||||
`,
|
||||
urlDisplayLabelField: css`
|
||||
flex: 1;
|
||||
`,
|
||||
}));
|
||||
|
||||
type Props = {
|
||||
@@ -89,26 +95,34 @@ export const DerivedField = (props: Props) => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
label={showInternalLink ? 'Query' : 'URL'}
|
||||
labelWidth={5}
|
||||
inputEl={
|
||||
<DataLinkInput
|
||||
placeholder={showInternalLink ? '${__value.raw}' : 'http://example.com/${__value.raw}'}
|
||||
value={value.url || ''}
|
||||
onChange={(newValue) =>
|
||||
onChange({
|
||||
...value,
|
||||
url: newValue,
|
||||
})
|
||||
}
|
||||
suggestions={suggestions}
|
||||
/>
|
||||
}
|
||||
className={css`
|
||||
width: 100%;
|
||||
`}
|
||||
/>
|
||||
<div className={styles.row}>
|
||||
<FormField
|
||||
label={showInternalLink ? 'Query' : 'URL'}
|
||||
inputEl={
|
||||
<DataLinkInput
|
||||
placeholder={showInternalLink ? '${__value.raw}' : 'http://example.com/${__value.raw}'}
|
||||
value={value.url || ''}
|
||||
onChange={(newValue) =>
|
||||
onChange({
|
||||
...value,
|
||||
url: newValue,
|
||||
})
|
||||
}
|
||||
suggestions={suggestions}
|
||||
/>
|
||||
}
|
||||
className={styles.urlField}
|
||||
/>
|
||||
<FormField
|
||||
className={styles.urlDisplayLabelField}
|
||||
inputWidth={null}
|
||||
label="URL Label"
|
||||
type="text"
|
||||
value={value.urlDisplayLabel}
|
||||
onChange={handleChange('urlDisplayLabel')}
|
||||
tooltip={'Use to override the button label when this derived field is found in a log.'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.row}>
|
||||
<Switch
|
||||
|
||||
@@ -260,6 +260,7 @@ describe('enhanceDataFrame', () => {
|
||||
name: 'trace2',
|
||||
url: 'test',
|
||||
datasourceUid: 'uid2',
|
||||
urlDisplayLabel: 'Custom Label',
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -279,7 +280,7 @@ describe('enhanceDataFrame', () => {
|
||||
url: '',
|
||||
});
|
||||
expect(fc.getFieldByName('trace2')!.config.links![1]).toEqual({
|
||||
title: '',
|
||||
title: 'Custom Label',
|
||||
internal: { datasourceName: 'Loki1', datasourceUid: 'uid2', query: { query: 'test' } },
|
||||
url: '',
|
||||
});
|
||||
|
||||
@@ -427,7 +427,7 @@ function fieldFromDerivedFieldConfig(derivedFieldConfigs: DerivedFieldConfig[]):
|
||||
|
||||
acc.push({
|
||||
// Will be filled out later
|
||||
title: '',
|
||||
title: derivedFieldConfig.urlDisplayLabel || '',
|
||||
url: '',
|
||||
// This is hardcoded for Jaeger or Zipkin not way right now to specify datasource specific query object
|
||||
internal: {
|
||||
@@ -439,7 +439,7 @@ function fieldFromDerivedFieldConfig(derivedFieldConfigs: DerivedFieldConfig[]):
|
||||
} else if (derivedFieldConfig.url) {
|
||||
acc.push({
|
||||
// We do not know what title to give here so we count on presentation layer to create a title from metadata.
|
||||
title: '',
|
||||
title: derivedFieldConfig.urlDisplayLabel || '',
|
||||
// This is hardcoded for Jaeger or Zipkin not way right now to specify datasource specific query object
|
||||
url: derivedFieldConfig.url,
|
||||
});
|
||||
|
||||
@@ -112,6 +112,7 @@ export type DerivedFieldConfig = {
|
||||
matcherRegex: string;
|
||||
name: string;
|
||||
url?: string;
|
||||
urlDisplayLabel?: string;
|
||||
datasourceUid?: string;
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user