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