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"
|
: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 {
|
||||||
@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 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group {
|
.btn-group {
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
color: $gl-text-color-secondary;
|
color: $gl-text-color-secondary;
|
||||||
}
|
}
|
||||||
|
@ -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 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 => {
|
||||||
}).$mount();
|
}).$mount();
|
||||||
};
|
};
|
||||||
|
|
||||||
const convertedMetrics = convertDatesMultipleSeries(
|
const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
|
||||||
singleRowMetricsMultipleSeries,
|
|
||||||
);
|
|
||||||
|
|
||||||
describe('Graph', () => {
|
describe('Graph', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
@ -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', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
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', () => {
|
||||||
|
|
Loading…
Reference in New Issue