Commit 6b41118f authored by Phil Hughes's avatar Phil Hughes

Merge branch 'add-monitoring-widgets' into 'master'

Adjust monitoring graphs to support widgets in EE

See merge request gitlab-org/gitlab-ce!18062
parents 45444c8e 56efb9ee
...@@ -174,7 +174,10 @@ export default { ...@@ -174,7 +174,10 @@ export default {
:tags-path="tagsPath" :tags-path="tagsPath"
:show-legend="showLegend" :show-legend="showLegend"
:small-graph="forceSmallGraph" :small-graph="forceSmallGraph"
/> >
<!-- EE content -->
{{ null }}
</graph>
</graph-group> </graph-group>
</div> </div>
<empty-state <empty-state
......
...@@ -232,9 +232,14 @@ export default { ...@@ -232,9 +232,14 @@ export default {
@mouseover="showFlagContent = true" @mouseover="showFlagContent = true"
@mouseleave="showFlagContent = false" @mouseleave="showFlagContent = false"
> >
<h5 class="text-center graph-title"> <div class="prometheus-graph-header">
{{ graphData.title }} <h5 class="prometheus-graph-title">
</h5> {{ graphData.title }}
</h5>
<div class="prometheus-graph-widgets">
<slot></slot>
</div>
</div>
<div <div
class="prometheus-svg-container" class="prometheus-svg-container"
:style="paddingBottomRootSvg" :style="paddingBottomRootSvg"
......
...@@ -23,7 +23,6 @@ ...@@ -23,7 +23,6 @@
} }
.btn-group { .btn-group {
> a { > a {
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
} }
...@@ -245,6 +244,7 @@ ...@@ -245,6 +244,7 @@
.prometheus-graph { .prometheus-graph {
flex: 1 0 auto; flex: 1 0 auto;
min-width: 450px; min-width: 450px;
max-width: 100%;
padding: $gl-padding / 2; padding: $gl-padding / 2;
h5 { h5 {
...@@ -256,6 +256,17 @@ ...@@ -256,6 +256,17 @@
} }
} }
.prometheus-graph-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: $gl-padding-8;
h5 {
margin: 0;
}
}
.prometheus-graph-cursor { .prometheus-graph-cursor {
position: absolute; position: absolute;
background: $theme-gray-600; background: $theme-gray-600;
......
...@@ -18,9 +18,7 @@ const createComponent = propsData => { ...@@ -18,9 +18,7 @@ const createComponent = propsData => {
}).$mount(); }).$mount();
}; };
const convertedMetrics = convertDatesMultipleSeries( const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
singleRowMetricsMultipleSeries,
);
describe('Graph', () => { describe('Graph', () => {
beforeEach(() => { beforeEach(() => {
...@@ -36,7 +34,7 @@ describe('Graph', () => { ...@@ -36,7 +34,7 @@ describe('Graph', () => {
projectPath, projectPath,
}); });
expect(component.$el.querySelector('.text-center').innerText.trim()).toBe( expect(component.$el.querySelector('.prometheus-graph-title').innerText.trim()).toBe(
component.graphData.title, component.graphData.title,
); );
}); });
...@@ -52,9 +50,7 @@ describe('Graph', () => { ...@@ -52,9 +50,7 @@ describe('Graph', () => {
}); });
const transformedHeight = `${component.graphHeight - 100}`; const transformedHeight = `${component.graphHeight - 100}`;
expect(component.axisTransform.indexOf(transformedHeight)).not.toEqual( expect(component.axisTransform.indexOf(transformedHeight)).not.toEqual(-1);
-1,
);
}); });
it('outerViewBox gets a width and height property based on the DOM size of the element', () => { it('outerViewBox gets a width and height property based on the DOM size of the element', () => {
......
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