mirror of https://github.com/grafana/grafana
Prometheus: Remove unsupported browser access mode related code (#77316)
* Remove unused code * More cleaning * Delete more * betterer * Small import fixes * Fix unit test * Fix unit test * uncomment * Remove PromLink component since it was removed from Prometheus data source * Clean the direct/browser access code * Remove directUrl * Big cleaning * unit test fixing * cleaning * fix metric_find_query tests * clean result_transformer tests * betterer * Remove unused type * bettererpull/77660/head^2
ismail simsek
2 years ago
committed by
GitHub
parent
164a412d3a
commit
73f25f7ccc
@ -1,123 +0,0 @@ |
||||
import { render, screen } from '@testing-library/react'; |
||||
import React from 'react'; |
||||
|
||||
import { dateTime, PanelData, TimeRange } from '@grafana/data'; |
||||
|
||||
import { PrometheusDatasource } from '../datasource'; |
||||
import { PromQuery } from '../types'; |
||||
|
||||
import PromLink from './PromLink'; |
||||
|
||||
jest.mock('@grafana/data', () => ({ |
||||
...jest.requireActual('@grafana/data'), |
||||
rangeUtil: { |
||||
intervalToSeconds: jest.fn(() => 15), |
||||
}, |
||||
})); |
||||
|
||||
const now = dateTime().valueOf(); |
||||
const intervalInSeconds = 60 * 5; |
||||
const endInput = encodeURIComponent(dateTime(now).add(5, 'hours').format('Y-MM-DD HH:mm')); |
||||
|
||||
const getPanelData = (panelDataOverrides?: Partial<PanelData>) => { |
||||
const panelData = { |
||||
request: { |
||||
scopedVars: [{ __interval: { text: '15s', value: '15s' } }], |
||||
targets: [ |
||||
{ refId: 'A', datasource: 'prom1' }, |
||||
{ refId: 'B', datasource: 'prom2' }, |
||||
], |
||||
range: { |
||||
raw: {}, |
||||
to: dateTime(now), // "now"
|
||||
from: dateTime(now - 1000 * intervalInSeconds), // 5 minutes ago from "now"
|
||||
} as TimeRange, |
||||
}, |
||||
}; |
||||
|
||||
return Object.assign(panelData, panelDataOverrides) as PanelData; |
||||
}; |
||||
|
||||
const getDataSource = (datasourceOverrides?: Partial<PrometheusDatasource>) => { |
||||
const datasource = { |
||||
createQuery: () => ({ expr: 'up', step: 15 }), |
||||
directUrl: 'prom1', |
||||
getRateIntervalScopedVariable: jest.fn(() => ({ __rate_interval: { text: '60s', value: '60s' } })), |
||||
}; |
||||
|
||||
return Object.assign(datasource, datasourceOverrides) as unknown as PrometheusDatasource; |
||||
}; |
||||
|
||||
const getDataSourceWithCustomQueryParameters = (datasourceOverrides?: Partial<PrometheusDatasource>) => { |
||||
const datasource = { |
||||
getPrometheusTime: () => 1677870470, |
||||
createQuery: () => ({ expr: 'up', step: 20 }), |
||||
directUrl: 'prom3', |
||||
getRateIntervalScopedVariable: jest.fn(() => ({ __rate_interval: { text: '60s', value: '60s' } })), |
||||
customQueryParameters: new URLSearchParams('g0.foo=1'), |
||||
}; |
||||
|
||||
return Object.assign(datasource, datasourceOverrides) as unknown as PrometheusDatasource; |
||||
}; |
||||
|
||||
describe('PromLink', () => { |
||||
it('should show correct link for 1 component', async () => { |
||||
render( |
||||
<div> |
||||
<PromLink datasource={getDataSource()} panelData={getPanelData()} query={{} as PromQuery} /> |
||||
</div> |
||||
); |
||||
expect(screen.getByText('Prometheus')).toHaveAttribute( |
||||
'href', |
||||
`prom1/graph?g0.expr=up&g0.range_input=${intervalInSeconds}s&g0.end_input=${endInput}&g0.step_input=15&g0.tab=0` |
||||
); |
||||
}); |
||||
it('should show different link when there are 2 components with the same panel data', () => { |
||||
render( |
||||
<div> |
||||
<PromLink datasource={getDataSource()} panelData={getPanelData()} query={{} as PromQuery} /> |
||||
<PromLink |
||||
datasource={getDataSource({ directUrl: 'prom2' })} |
||||
panelData={getPanelData()} |
||||
query={{} as PromQuery} |
||||
/> |
||||
</div> |
||||
); |
||||
const promLinkButtons = screen.getAllByText('Prometheus'); |
||||
expect(promLinkButtons[0]).toHaveAttribute( |
||||
'href', |
||||
`prom1/graph?g0.expr=up&g0.range_input=${intervalInSeconds}s&g0.end_input=${endInput}&g0.step_input=15&g0.tab=0` |
||||
); |
||||
expect(promLinkButtons[1]).toHaveAttribute( |
||||
'href', |
||||
`prom2/graph?g0.expr=up&g0.range_input=${intervalInSeconds}s&g0.end_input=${endInput}&g0.step_input=15&g0.tab=0` |
||||
); |
||||
}); |
||||
it('should create sanitized link', async () => { |
||||
render( |
||||
<div> |
||||
<PromLink |
||||
datasource={getDataSource({ directUrl: "javascript:300?1:2;alert('Hello');//" })} |
||||
panelData={getPanelData()} |
||||
query={{} as PromQuery} |
||||
/> |
||||
</div> |
||||
); |
||||
expect(screen.getByText('Prometheus')).toHaveAttribute('href', 'about:blank'); |
||||
}); |
||||
it('should add custom query parameters when it is configured', async () => { |
||||
render( |
||||
<div> |
||||
<PromLink |
||||
datasource={getDataSourceWithCustomQueryParameters()} |
||||
panelData={getPanelData()} |
||||
query={{} as PromQuery} |
||||
/> |
||||
</div> |
||||
); |
||||
expect(screen.getByText('Prometheus')).toHaveAttribute( |
||||
'href', |
||||
`prom3/graph?g0.foo=1&g0.expr=up&g0.range_input=${intervalInSeconds}s&g0.end_input=${endInput}&g0.step_input=20&g0.tab=0` |
||||
); |
||||
}); |
||||
}); |
||||
@ -1,84 +0,0 @@ |
||||
import { map } from 'lodash'; |
||||
import React, { useEffect, useState, memo } from 'react'; |
||||
|
||||
import { DataQueryRequest, PanelData, ScopedVars, textUtil, rangeUtil } from '@grafana/data'; |
||||
|
||||
import { PrometheusDatasource } from '../datasource'; |
||||
import { getPrometheusTime } from '../language_utils'; |
||||
import { PromQuery } from '../types'; |
||||
|
||||
interface Props { |
||||
datasource: PrometheusDatasource; |
||||
query: PromQuery; |
||||
panelData?: PanelData; |
||||
} |
||||
|
||||
const PromLink = ({ panelData, query, datasource }: Props) => { |
||||
const [href, setHref] = useState(''); |
||||
|
||||
useEffect(() => { |
||||
if (panelData) { |
||||
const getExternalLink = () => { |
||||
if (!panelData.request) { |
||||
return ''; |
||||
} |
||||
|
||||
const { |
||||
request: { range, interval, scopedVars }, |
||||
} = panelData; |
||||
|
||||
const start = getPrometheusTime(range.from, false); |
||||
const end = getPrometheusTime(range.to, true); |
||||
const rangeDiff = Math.ceil(end - start); |
||||
const endTime = range.to.utc().format('YYYY-MM-DD HH:mm'); |
||||
|
||||
const enrichedScopedVars: ScopedVars = { |
||||
...scopedVars, |
||||
// As we support $__rate_interval variable in min step, we need add it to scopedVars
|
||||
...datasource.getRateIntervalScopedVariable( |
||||
rangeUtil.intervalToSeconds(interval), |
||||
rangeUtil.intervalToSeconds(datasource.interval) |
||||
), |
||||
}; |
||||
|
||||
const options = { |
||||
interval, |
||||
scopedVars: enrichedScopedVars, |
||||
} as DataQueryRequest<PromQuery>; |
||||
|
||||
const customQueryParameters: { [key: string]: string } = {}; |
||||
if (datasource.customQueryParameters) { |
||||
for (const [k, v] of datasource.customQueryParameters) { |
||||
customQueryParameters[k] = v; |
||||
} |
||||
} |
||||
|
||||
const queryOptions = datasource.createQuery(query, options, start, end); |
||||
|
||||
const expr = { |
||||
...customQueryParameters, |
||||
'g0.expr': queryOptions.expr, |
||||
'g0.range_input': rangeDiff + 's', |
||||
'g0.end_input': endTime, |
||||
'g0.step_input': queryOptions.step, |
||||
'g0.tab': 0, |
||||
}; |
||||
|
||||
const args = map(expr, (v: string, k: string) => { |
||||
return k + '=' + encodeURIComponent(v); |
||||
}).join('&'); |
||||
return `${datasource.directUrl}/graph?${args}`; |
||||
}; |
||||
|
||||
setHref(getExternalLink()); |
||||
} |
||||
}, [datasource, panelData, query]); |
||||
|
||||
return ( |
||||
<a href={textUtil.sanitizeUrl(href)} target="_blank" rel="noopener noreferrer"> |
||||
Prometheus |
||||
</a> |
||||
); |
||||
}; |
||||
|
||||
export default memo(PromLink); |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue