Commit 91b1e9dc authored by Phil Hughes's avatar Phil Hughes

Merge branch 'adriel-use-svg-icon-for-deployment-series' into 'master'

Use SVG icon for deployment series

See merge request gitlab-org/gitlab-ce!24652
parents 8b02d58e b3bd2405
Pipeline #46463978 failed with stages
in 5 minutes and 41 seconds
/* eslint-disable import/prefer-default-export */
import axios from '~/lib/utils/axios_utils';
/**
* Retrieve SVG icon path content from gitlab/svg sprite icons
* @param {String} name
*/
export const getSvgIconPathContent = name =>
axios
.get(gon.sprite_icons)
.then(({ data: svgs }) =>
new DOMParser()
.parseFromString(svgs, 'text/xml')
.querySelector(`#${name} path`)
.getAttribute('d'),
)
.catch(() => null);
......@@ -2,6 +2,7 @@
import { GlAreaChart } from '@gitlab/ui/dist/charts';
import dateFormat from 'dateformat';
import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
let debouncedResize;
......@@ -48,6 +49,7 @@ export default {
return {
width: 0,
height: 0,
scatterSymbol: undefined,
};
},
computed: {
......@@ -121,6 +123,8 @@ export default {
return {
type: 'scatter',
data: this.recentDeployments.map(deployment => [deployment.createdAt, 0]),
symbol: this.scatterSymbol,
symbolSize: 14,
};
},
xAxisLabel() {
......@@ -140,12 +144,22 @@ export default {
created() {
debouncedResize = debounceByAnimationFrame(this.onResize);
window.addEventListener('resize', debouncedResize);
this.getScatterSymbol();
},
methods: {
formatTooltipText(params) {
const [date, value] = params;
return [dateFormat(date, 'dd mmm yyyy, h:MMtt'), value.toFixed(3)];
},
getScatterSymbol() {
getSvgIconPathContent('rocket')
.then(path => {
if (path) {
this.scatterSymbol = `path://${path}`;
}
})
.catch(() => {});
},
onResize() {
const { width, height } = this.$refs.areaChart.$el.getBoundingClientRect();
this.width = width;
......
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import * as iconUtils from '~/lib/utils/icon_utils';
describe('Icon utils', () => {
describe('getSvgIconPathContent', () => {
let spriteIcons;
beforeAll(() => {
spriteIcons = gon.sprite_icons;
gon.sprite_icons = 'mockSpriteIconsEndpoint';
});
afterAll(() => {
gon.sprite_icons = spriteIcons;
});
let axiosMock;
let mockEndpoint;
let getIcon;
const mockName = 'mockIconName';
const mockPath = 'mockPath';
beforeEach(() => {
axiosMock = new MockAdapter(axios);
mockEndpoint = axiosMock.onGet(gon.sprite_icons);
getIcon = iconUtils.getSvgIconPathContent(mockName);
});
afterEach(() => {
axiosMock.restore();
});
it('extracts svg icon path content from sprite icons', done => {
mockEndpoint.replyOnce(
200,
`<svg><symbol id="${mockName}"><path d="${mockPath}"/></symbol></svg>`,
);
getIcon
.then(path => {
expect(path).toBe(mockPath);
done();
})
.catch(done.fail);
});
it('returns null if icon path content does not exist', done => {
mockEndpoint.replyOnce(200, ``);
getIcon
.then(path => {
expect(path).toBe(null);
done();
})
.catch(done.fail);
});
it('returns null if an http error occurs', done => {
mockEndpoint.replyOnce(500);
getIcon
.then(path => {
expect(path).toBe(null);
done();
})
.catch(done.fail);
});
});
});
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