| ... | @@ -43,11 +43,6 @@ export default { |
... | @@ -43,11 +43,6 @@ export default { |
|
|
required: false,
|
|
required: false,
|
|
|
default: '',
|
|
default: '',
|
|
|
},
|
|
},
|
|
|
showBorder: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
required: false,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
singleEmbed: {
|
|
singleEmbed: {
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
|
required: false,
|
|
required: false,
|
| ... | @@ -272,71 +267,66 @@ export default { |
... | @@ -272,71 +267,66 @@ export default { |
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
<div
|
|
<div class="prometheus-graph">
|
|
|
class="prometheus-graph col-12"
|
|
<div class="prometheus-graph-header">
|
|
|
:class="[showBorder ? 'p-2' : 'p-0', { 'col-lg-6': !singleEmbed }]"
|
|
<h5 class="prometheus-graph-title js-graph-title">{{ graphData.title }}</h5>
|
|
|
>
|
|
<gl-button
|
|
|
<div :class="{ 'prometheus-graph-embed w-100 p-3': showBorder }">
|
|
v-if="exportMetricsToCsvEnabled"
|
|
|
<div class="prometheus-graph-header">
|
|
:href="downloadLink"
|
|
|
<h5 class="prometheus-graph-title js-graph-title">{{ graphData.title }}</h5>
|
|
:title="__('Download CSV')"
|
|
|
<gl-button
|
|
:aria-label="__('Download CSV')"
|
|
|
v-if="exportMetricsToCsvEnabled"
|
|
style="margin-left: 200px;"
|
|
|
:href="downloadLink"
|
|
download="chart_metrics.csv"
|
|
|
:title="__('Download CSV')"
|
|
>
|
|
|
:aria-label="__('Download CSV')"
|
|
{{ __('Download CSV') }}
|
|
|
style="margin-left: 200px;"
|
|
</gl-button>
|
|
|
download="chart_metrics.csv"
|
|
<div class="prometheus-graph-widgets js-graph-widgets">
|
|
|
>
|
|
<slot></slot>
|
|
|
{{ __('Download CSV') }}
|
|
|
|
|
</gl-button>
|
|
|
|
|
<div class="prometheus-graph-widgets js-graph-widgets">
|
|
|
|
|
<slot></slot>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<component
|
|
<component
|
|
|
:is="glChartComponent"
|
|
:is="glChartComponent"
|
|
|
ref="chart"
|
|
ref="chart"
|
|
|
v-bind="$attrs"
|
|
v-bind="$attrs"
|
|
|
:data="chartData"
|
|
:data="chartData"
|
|
|
:option="chartOptions"
|
|
:option="chartOptions"
|
|
|
:format-tooltip-text="formatTooltipText"
|
|
:format-tooltip-text="formatTooltipText"
|
|
|
:thresholds="thresholds"
|
|
:thresholds="thresholds"
|
|
|
:width="width"
|
|
:width="width"
|
|
|
:height="height"
|
|
:height="height"
|
|
|
@updated="onChartUpdated"
|
|
@updated="onChartUpdated"
|
|
|
>
|
|
>
|
|
|
<template v-if="tooltip.isDeployment">
|
|
<template v-if="tooltip.isDeployment">
|
|
|
<template slot="tooltipTitle">
|
|
<template slot="tooltipTitle">
|
|
|
{{ __('Deployed') }}
|
|
{{ __('Deployed') }}
|
|
|
</template>
|
|
</template>
|
|
|
<div slot="tooltipContent" class="d-flex align-items-center">
|
|
<div slot="tooltipContent" class="d-flex align-items-center">
|
|
|
<icon name="commit" class="mr-2" />
|
|
<icon name="commit" class="mr-2" />
|
|
|
<gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
|
|
<gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
<template slot="tooltipTitle">
|
|
|
|
<div class="text-nowrap">
|
|
|
|
{{ tooltip.title }}
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<template v-else>
|
|
<template slot="tooltipContent">
|
|
|
<template slot="tooltipTitle">
|
|
<div
|
|
|
<div class="text-nowrap">
|
|
v-for="(content, key) in tooltip.content"
|
|
|
{{ tooltip.title }}
|
|
:key="key"
|
|
|
|
class="d-flex justify-content-between"
|
|
|
|
>
|
|
|
|
<gl-chart-series-label :color="isMultiSeries ? content.color : ''">
|
|
|
|
{{ content.name }}
|
|
|
|
</gl-chart-series-label>
|
|
|
|
<div class="prepend-left-32">
|
|
|
|
{{ content.value }}
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</div>
|
|
|
<template slot="tooltipContent">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(content, key) in tooltip.content"
|
|
|
|
|
:key="key"
|
|
|
|
|
class="d-flex justify-content-between"
|
|
|
|
|
>
|
|
|
|
|
<gl-chart-series-label :color="isMultiSeries ? content.color : ''">
|
|
|
|
|
{{ content.name }}
|
|
|
|
|
</gl-chart-series-label>
|
|
|
|
|
<div class="prepend-left-32">
|
|
|
|
|
{{ content.value }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
</template>
|
|
|
</component>
|
|
</template>
|
|
|
</div>
|
|
</component>
|
|
|
</div>
|
|
</div>
|
|
|
</template> |
|
</template> |