Skip to content

G
gitlab-ce
Commit 44e8b3bc authored by Dhiraj Bodicherla's avatar Dhiraj Bodicherla
Browse files
Options

Add time range to dashboard links 

User-defined links defined in dashboard yml file
are rendered as links in the metrics dashboard. This
MR adds selected time range to the URL as params
parent 600e0af5
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 5 deletions
app/assets/javascripts/monitoring/components/dashboard.vue
View file @ 44e8b3bc
......@@ -273,6 +273,9 @@ export default {
title: document.title,
});
this.selectedTimeRange = { start, end };
// keep the current dashboard time range
// in sync with the Vuex store
this.setTimeRange(this.selectedTimeRange);
},
onExpandPanel(group, panel) {
this.setExpandedPanel({ group, panel });
......
app/assets/javascripts/monitoring/components/links_section.vue
View file @ 44e8b3bc
<script>
import { mapState } from 'vuex';
import { mapGetters } from 'vuex';
import { GlIcon, GlLink } from '@gitlab/ui';
export default {
......@@ -8,7 +8,7 @@ export default {
GlLink,
},
computed: {
...mapState('monitoringDashboard', ['links']),
...mapGetters('monitoringDashboard', { links: 'linksWithMetadata' }),
},
};
</script>
......
app/assets/javascripts/monitoring/stores/getters.js
View file @ 44e8b3bc
import { NOT_IN_DB_PREFIX } from '../constants';
import { addPrefixToCustomVariableParams } from './utils';
import { addPrefixToCustomVariableParams, addDashboardMetaDataToLink } from './utils';
const metricsIdsInPanel = panel =>
panel.metrics.filter(metric => metric.metricId && metric.result).map(metric => metric.metricId);
......@@ -112,6 +112,22 @@ export const filteredEnvironments = state =>
env.name.toLowerCase().includes((state.environmentsSearchTerm || '').trim().toLowerCase()),
);
/**
* User-defined links from the yml file can have other
* dashboard-related metadata baked into it. This method
* returns modified links which will get rendered in the
* metrics dashboard
*
* @param {Object} state
* @returns {Array} modified array of links
*/
export const linksWithMetadata = state => {
const metadata = {
timeRange: state.timeRange,
};
return state.links?.map(addDashboardMetaDataToLink(metadata));
};
/**
* Maps an variables object to an array along with stripping
* the variable prefix.
......
app/assets/javascripts/monitoring/stores/state.js
View file @ 44e8b3bc
......@@ -44,7 +44,7 @@ export default () => ({
* User-defined custom links are passed
* via the dashboard yml file.
*/
links: {},
links: [],
// Other project data
dashboardTimezone: timezones.LOCAL,
annotations: [],
......
app/assets/javascripts/monitoring/stores/utils.js
View file @ 44e8b3bc
......@@ -4,7 +4,8 @@ import { SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { parseTemplatingVariables } from './variable_mapping';
import { NOT_IN_DB_PREFIX } from '../constants';
import { isSafeURL } from '~/lib/utils/url_utility';
import { timeRangeToParams } from '~/lib/utils/datetime_range';
import { isSafeURL, mergeUrlParams } from '~/lib/utils/url_utility';
export const gqClient = createGqClient(
{},
......@@ -210,6 +211,26 @@ const mapToPanelGroupViewModel = ({ group = '', panels = [] }, i) => {
};
};
/**
* Adds dashboard-related metadata to the user-defined links.
*
* As of %13.1, metadata only includes timeRange but in the
* future more info will be added to the links.
*
* @param {Object} metadata
* @returns {Function}
*/
export const addDashboardMetaDataToLink = metadata => link => {
let modifiedLink = { ...link };
if (metadata.timeRange) {
modifiedLink = {
...modifiedLink,
url: mergeUrlParams(timeRangeToParams(metadata.timeRange), link.url),
};
}
return modifiedLink;
};
/**
* Maps a dashboard json object to its view model
*
......
changelogs/unreleased/217736-add-related-dashboard-links-in-metrics-dashboard-mvc2.yml 0 → 100644
View file @ 44e8b3bc
---
title: Add time range to user-defined links in metrics dashboard
merge_request: 33663
author:
type: added
spec/frontend/monitoring/mock_data.js
View file @ 44e8b3bc
......@@ -558,6 +558,89 @@ export const mockLogsPath = '/mockLogsPath';
export const mockLogsHref = `${mockLogsPath}?duration_seconds=${mockTimeRange.duration.seconds}`;
export const mockLinks = [
{
title: 'Job',
url: 'http://intel.com/bibendum/felis/sed/interdum/venenatis.png',
},
{
title: 'Solarbreeze',
url: 'http://ebay.co.uk/primis/in/faucibus.jsp',
},
{
title: 'Bentosanzap',
url: 'http://cargocollective.com/sociis/natoque/penatibus/et/magnis/dis.js',
},
{
title: 'Wrapsafe',
url: 'https://bloomberg.com/tempus/vel/pede/morbi.aspx',
},
{
title: 'Stronghold',
url: 'https://networkadvertising.org/primis/in/faucibus/orci/luctus/et/ultrices.html',
},
{
title: 'Lotstring',
url:
'https://huffingtonpost.com/sapien/a/libero.aspx?et=lacus&ultrices=at&posuere=velit&cubilia=vivamus&curae=vel&duis=nulla&faucibus=eget&accumsan=eros&odio=elementum&curabitur=pellentesque&convallis=quisque&duis=porta&consequat=volutpat&dui=erat&nec=quisque&nisi=erat&volutpat=eros&eleifend=viverra&donec=eget&ut=congue&dolor=eget&morbi=semper&vel=rutrum&lectus=nulla&in=nunc&quam=purus&fringilla=phasellus&rhoncus=in&mauris=felis&enim=donec&leo=semper&rhoncus=sapien&sed=a&vestibulum=libero&sit=nam&amet=dui&cursus=proin&id=leo&turpis=odio&integer=porttitor&aliquet=id&massa=consequat&id=in&lobortis=consequat&convallis=ut&tortor=nulla&risus=sed&dapibus=accumsan&augue=felis&vel=ut&accumsan=at&tellus=dolor&nisi=quis&eu=odio',
},
{
title: 'Cardify',
url:
'http://nature.com/imperdiet/et/commodo/vulputate/justo/in/blandit.json?tempus=posuere&semper=felis&est=sed&quam=lacus&pharetra=morbi&magna=sem&ac=mauris&consequat=laoreet&metus=ut&sapien=rhoncus&ut=aliquet&nunc=pulvinar&vestibulum=sed&ante=nisl&ipsum=nunc&primis=rhoncus&in=dui&faucibus=vel&orci=sem&luctus=sed&et=sagittis&ultrices=nam&posuere=congue&cubilia=risus&curae=semper&mauris=porta&viverra=volutpat&diam=quam&vitae=pede&quam=lobortis&suspendisse=ligula&potenti=sit&nullam=amet&porttitor=eleifend&lacus=pede&at=libero&turpis=quis',
},
{
title: 'Ventosanzap',
url:
'http://stanford.edu/augue/vestibulum/ante/ipsum/primis/in/faucibus.xml?metus=morbi&sapien=quis&ut=tortor&nunc=id&vestibulum=nulla&ante=ultrices&ipsum=aliquet&primis=maecenas&in=leo&faucibus=odio&orci=condimentum&luctus=id&et=luctus&ultrices=nec&posuere=molestie&cubilia=sed&curae=justo&mauris=pellentesque&viverra=viverra&diam=pede&vitae=ac&quam=diam&suspendisse=cras&potenti=pellentesque&nullam=volutpat&porttitor=dui&lacus=maecenas&at=tristique&turpis=est&donec=et&posuere=tempus&metus=semper&vitae=est&ipsum=quam&aliquam=pharetra&non=magna&mauris=ac&morbi=consequat&non=metus',
},
{
title: 'Cardguard',
url:
'https://google.com.hk/lacinia/eget/tincidunt/eget/tempus/vel.js?at=eget&turpis=nunc&a=donec',
},
{
title: 'Namfix',
url:
'https://fotki.com/eget/rutrum/at/lorem.jsp?at=id&vulputate=nulla&vitae=ultrices&nisl=aliquet&aenean=maecenas&lectus=leo&pellentesque=odio&eget=condimentum&nunc=id&donec=luctus&quis=nec&orci=molestie&eget=sed&orci=justo&vehicula=pellentesque&condimentum=viverra&curabitur=pede&in=ac&libero=diam&ut=cras&massa=pellentesque&volutpat=volutpat&convallis=dui&morbi=maecenas&odio=tristique&odio=est&elementum=et&eu=tempus&interdum=semper&eu=est&tincidunt=quam&in=pharetra&leo=magna&maecenas=ac&pulvinar=consequat&lobortis=metus&est=sapien&phasellus=ut&sit=nunc&amet=vestibulum&erat=ante&nulla=ipsum&tempus=primis&vivamus=in&in=faucibus&felis=orci&eu=luctus&sapien=et&cursus=ultrices&vestibulum=posuere&proin=cubilia&eu=curae&mi=mauris&nulla=viverra&ac=diam&enim=vitae&in=quam&tempor=suspendisse&turpis=potenti&nec=nullam&euismod=porttitor&scelerisque=lacus&quam=at&turpis=turpis&adipiscing=donec&lorem=posuere&vitae=metus&mattis=vitae&nibh=ipsum&ligula=aliquam&nec=non&sem=mauris&duis=morbi&aliquam=non&convallis=lectus&nunc=aliquam&proin=sit&at=amet',
},
{
title: 'Alpha',
url:
'http://bravesites.com/tempus/vel.jpg?risus=est&auctor=phasellus&sed=sit&tristique=amet&in=erat&tempus=nulla&sit=tempus&amet=vivamus&sem=in&fusce=felis&consequat=eu&nulla=sapien&nisl=cursus&nunc=vestibulum&nisl=proin&duis=eu&bibendum=mi&felis=nulla&sed=ac&interdum=enim&venenatis=in&turpis=tempor&enim=turpis&blandit=nec&mi=euismod&in=scelerisque&porttitor=quam&pede=turpis&justo=adipiscing&eu=lorem&massa=vitae&donec=mattis&dapibus=nibh&duis=ligula',
},
{
title: 'Sonsing',
url:
'http://microsoft.com/blandit.js?quis=ante&lectus=vestibulum&suspendisse=ante&potenti=ipsum&in=primis&eleifend=in&quam=faucibus&a=orci&odio=luctus&in=et&hac=ultrices&habitasse=posuere&platea=cubilia&dictumst=curae&maecenas=duis&ut=faucibus&massa=accumsan&quis=odio&augue=curabitur&luctus=convallis&tincidunt=duis&nulla=consequat&mollis=dui&molestie=nec&lorem=nisi&quisque=volutpat&ut=eleifend&erat=donec&curabitur=ut&gravida=dolor&nisi=morbi&at=vel&nibh=lectus&in=in&hac=quam&habitasse=fringilla&platea=rhoncus&dictumst=mauris&aliquam=enim&augue=leo&quam=rhoncus&sollicitudin=sed&vitae=vestibulum&consectetuer=sit&eget=amet&rutrum=cursus&at=id&lorem=turpis&integer=integer&tincidunt=aliquet&ante=massa&vel=id&ipsum=lobortis&praesent=convallis&blandit=tortor&lacinia=risus&erat=dapibus&vestibulum=augue&sed=vel&magna=accumsan&at=tellus&nunc=nisi&commodo=eu&placerat=orci&praesent=mauris&blandit=lacinia&nam=sapien&nulla=quis&integer=libero',
},
{
title: 'Fintone',
url:
'https://linkedin.com/duis/bibendum/felis/sed/interdum/venenatis.json?ut=justo&suscipit=sollicitudin&a=ut&feugiat=suscipit&et=a&eros=feugiat&vestibulum=et&ac=eros&est=vestibulum&lacinia=ac&nisi=est&venenatis=lacinia&tristique=nisi&fusce=venenatis&congue=tristique&diam=fusce&id=congue&ornare=diam&imperdiet=id&sapien=ornare&urna=imperdiet&pretium=sapien&nisl=urna&ut=pretium&volutpat=nisl&sapien=ut&arcu=volutpat&sed=sapien&augue=arcu&aliquam=sed&erat=augue&volutpat=aliquam&in=erat&congue=volutpat&etiam=in&justo=congue&etiam=etiam&pretium=justo&iaculis=etiam&justo=pretium&in=iaculis&hac=justo&habitasse=in&platea=hac&dictumst=habitasse&etiam=platea&faucibus=dictumst&cursus=etiam&urna=faucibus&ut=cursus&tellus=urna&nulla=ut&ut=tellus&erat=nulla&id=ut&mauris=erat&vulputate=id&elementum=mauris&nullam=vulputate&varius=elementum&nulla=nullam&facilisi=varius&cras=nulla&non=facilisi&velit=cras&nec=non&nisi=velit&vulputate=nec&nonummy=nisi&maecenas=vulputate&tincidunt=nonummy&lacus=maecenas&at=tincidunt&velit=lacus&vivamus=at&vel=velit&nulla=vivamus&eget=vel&eros=nulla&elementum=eget',
},
{
title: 'Fix San',
url:
'http://pinterest.com/mi/in/porttitor/pede.png?varius=nibh&integer=quisque&ac=id&leo=justo&pellentesque=sit&ultrices=amet&mattis=sapien&odio=dignissim&donec=vestibulum&vitae=vestibulum&nisi=ante&nam=ipsum&ultrices=primis&libero=in&non=faucibus&mattis=orci&pulvinar=luctus&nulla=et&pede=ultrices&ullamcorper=posuere&augue=cubilia&a=curae&suscipit=nulla&nulla=dapibus&elit=dolor&ac=vel&nulla=est&sed=donec&vel=odio&enim=justo&sit=sollicitudin&amet=ut&nunc=suscipit&viverra=a&dapibus=feugiat&nulla=et&suscipit=eros&ligula=vestibulum&in=ac&lacus=est&curabitur=lacinia&at=nisi&ipsum=venenatis&ac=tristique&tellus=fusce&semper=congue&interdum=diam&mauris=id&ullamcorper=ornare&purus=imperdiet&sit=sapien&amet=urna&nulla=pretium&quisque=nisl&arcu=ut&libero=volutpat&rutrum=sapien&ac=arcu&lobortis=sed&vel=augue&dapibus=aliquam&at=erat&diam=volutpat&nam=in&tristique=congue&tortor=etiam',
},
{
title: 'Ronstring',
url:
'https://ebay.com/ut/erat.aspx?nulla=sed&eget=nisl&eros=nunc&elementum=rhoncus&pellentesque=dui&quisque=vel&porta=sem&volutpat=sed&erat=sagittis&quisque=nam&erat=congue&eros=risus&viverra=semper&eget=porta&congue=volutpat&eget=quam&semper=pede&rutrum=lobortis&nulla=ligula',
},
{
title: 'It',
url:
'http://symantec.com/tortor/sollicitudin/mi/sit/amet.json?in=nullam&libero=varius&ut=nulla&massa=facilisi&volutpat=cras&convallis=non&morbi=velit&odio=nec&odio=nisi&elementum=vulputate&eu=nonummy&interdum=maecenas&eu=tincidunt&tincidunt=lacus&in=at&leo=velit&maecenas=vivamus&pulvinar=vel&lobortis=nulla&est=eget&phasellus=eros&sit=elementum&amet=pellentesque&erat=quisque&nulla=porta&tempus=volutpat&vivamus=erat&in=quisque&felis=erat&eu=eros&sapien=viverra&cursus=eget&vestibulum=congue&proin=eget&eu=semper',
},
{
title: 'Andalax',
url:
'https://acquirethisname.com/tortor/eu.js?volutpat=mauris&dui=laoreet&maecenas=ut&tristique=rhoncus&est=aliquet&et=pulvinar&tempus=sed&semper=nisl&est=nunc&quam=rhoncus&pharetra=dui&magna=vel&ac=sem&consequat=sed&metus=sagittis&sapien=nam&ut=congue&nunc=risus&vestibulum=semper&ante=porta&ipsum=volutpat&primis=quam&in=pede&faucibus=lobortis&orci=ligula&luctus=sit&et=amet&ultrices=eleifend&posuere=pede&cubilia=libero&curae=quis&mauris=orci&viverra=nullam&diam=molestie&vitae=nibh&quam=in&suspendisse=lectus&potenti=pellentesque&nullam=at&porttitor=nulla&lacus=suspendisse&at=potenti&turpis=cras&donec=in&posuere=purus&metus=eu&vitae=magna&ipsum=vulputate&aliquam=luctus&non=cum&mauris=sociis&morbi=natoque&non=penatibus&lectus=et&aliquam=magnis&sit=dis&amet=parturient&diam=montes&in=nascetur&magna=ridiculus&bibendum=mus',
},
];
const templatingVariableTypes = {
text: {
simple: 'Simple text',
......
spec/frontend/monitoring/store/getters_spec.js
View file @ 44e8b3bc
......@@ -8,6 +8,7 @@ import {
metricsResult,
dashboardGitResponse,
mockTemplatingDataResponses,
mockLinks,
} from '../mock_data';
import {
metricsDashboardPayload,
......@@ -401,4 +402,37 @@ describe('Monitoring store Getters', () => {
expect(selectedDashboard(state)).toEqual(null);
});
});
describe('linksWithMetadata', () => {
let state;
const setupState = (initState = {}) => {
state = {
...state,
...initState,
};
};
beforeAll(() => {
setupState({
links: mockLinks,
});
});
afterAll(() => {
state = null;
});
it.each`
timeRange | output
${{}} | ${''}
${{ start: '2020-01-01T00:00:00.000Z', end: '2020-01-31T23:59:00.000Z' }} | ${'start=2020-01-01T00%3A00%3A00.000Z&end=2020-01-31T23%3A59%3A00.000Z'}
${{ duration: { seconds: 86400 } }} | ${'duration_seconds=86400'}
`('linksWithMetadata returns URLs with time range', ({ timeRange, output }) => {
setupState({ timeRange });
const links = getters.linksWithMetadata(state);
links.forEach(({ url }) => {
expect(url).toMatch(output);
});
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7