Adjust monitoring graphs to support widgets in EE
This commit is contained in:
parent
45444c8e30
commit
56efb9ee92
|
@ -174,7 +174,10 @@ export default {
|
|||
:tags-path="tagsPath"
|
||||
:show-legend="showLegend"
|
||||
:small-graph="forceSmallGraph"
|
||||
/>
|
||||
>
|
||||
<!-- EE content -->
|
||||
{{ null }}
|
||||
</graph>
|
||||
</graph-group>
|
||||
</div>
|
||||
<empty-state
|
||||
|
|
|
@ -232,9 +232,14 @@ export default {
|
|||
@mouseover="showFlagContent = true"
|
||||
@mouseleave="showFlagContent = false"
|
||||
>
|
||||
<h5 class="text-center graph-title">
|
||||
<div class="prometheus-graph-header">
|
||||
<h5 class="prometheus-graph-title">
|
||||
{{ graphData.title }}
|
||||
</h5>
|
||||
<div class="prometheus-graph-widgets">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="prometheus-svg-container"
|
||||
:style="paddingBottomRootSvg"
|
||||
|
|
|
@ -23,7 +23,6 @@
|
|||
}
|
||||
|
||||
.btn-group {
|
||||
|
||||
> a {
|
||||
color: $gl-text-color-secondary;
|
||||
}
|
||||
|
@ -245,6 +244,7 @@
|
|||
.prometheus-graph {
|
||||
flex: 1 0 auto;
|
||||
min-width: 450px;
|
||||
max-width: 100%;
|
||||
padding: $gl-padding / 2;
|
||||
|
||||
h5 {
|
||||
|
@ -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 {
|
||||
position: absolute;
|
||||
background: $theme-gray-600;
|
||||
|
|
|
@ -18,9 +18,7 @@ const createComponent = propsData => {
|
|||
}).$mount();
|
||||
};
|
||||
|
||||
const convertedMetrics = convertDatesMultipleSeries(
|
||||
singleRowMetricsMultipleSeries,
|
||||
);
|
||||
const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
|
||||
|
||||
describe('Graph', () => {
|
||||
beforeEach(() => {
|
||||
|
@ -36,7 +34,7 @@ describe('Graph', () => {
|
|||
projectPath,
|
||||
});
|
||||
|
||||
expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(
|
||||
expect(component.$el.querySelector('.prometheus-graph-title').innerText.trim()).toBe(
|
||||
component.graphData.title,
|
||||
);
|
||||
});
|
||||
|
@ -52,9 +50,7 @@ describe('Graph', () => {
|
|||
});
|
||||
|
||||
const transformedHeight = `${component.graphHeight - 100}`;
|
||||
expect(component.axisTransform.indexOf(transformedHeight)).not.toEqual(
|
||||
-1,
|
||||
);
|
||||
expect(component.axisTransform.indexOf(transformedHeight)).not.toEqual(-1);
|
||||
});
|
||||
|
||||
it('outerViewBox gets a width and height property based on the DOM size of the element', () => {
|
||||
|
|
Loading…
Reference in New Issue