168 lines
3.8 KiB
Vue
168 lines
3.8 KiB
Vue
<script>
|
|
import {
|
|
GlButtonGroup,
|
|
GlButton,
|
|
GlDropdown,
|
|
GlDropdownItem,
|
|
GlDropdownDivider,
|
|
GlTooltipDirective,
|
|
} from '@gitlab/ui';
|
|
import Visibility from 'visibilityjs';
|
|
import { mapActions } from 'vuex';
|
|
import { n__, __, s__ } from '~/locale';
|
|
|
|
const makeInterval = (length = 0, unit = 's') => {
|
|
const shortLabel = `${length}${unit}`;
|
|
switch (unit) {
|
|
case 'd':
|
|
return {
|
|
interval: length * 24 * 60 * 60 * 1000,
|
|
shortLabel,
|
|
label: n__('%d day', '%d days', length),
|
|
};
|
|
case 'h':
|
|
return {
|
|
interval: length * 60 * 60 * 1000,
|
|
shortLabel,
|
|
label: n__('%d hour', '%d hours', length),
|
|
};
|
|
case 'm':
|
|
return {
|
|
interval: length * 60 * 1000,
|
|
shortLabel,
|
|
label: n__('%d minute', '%d minutes', length),
|
|
};
|
|
case 's':
|
|
default:
|
|
return {
|
|
interval: length * 1000,
|
|
shortLabel,
|
|
label: n__('%d second', '%d seconds', length),
|
|
};
|
|
}
|
|
};
|
|
|
|
export default {
|
|
i18n: {
|
|
refreshDashboard: s__('Metrics|Refresh dashboard'),
|
|
},
|
|
components: {
|
|
GlButtonGroup,
|
|
GlButton,
|
|
GlDropdown,
|
|
GlDropdownItem,
|
|
GlDropdownDivider,
|
|
},
|
|
directives: {
|
|
GlTooltip: GlTooltipDirective,
|
|
},
|
|
data() {
|
|
return {
|
|
refreshInterval: null,
|
|
timeoutId: null,
|
|
};
|
|
},
|
|
computed: {
|
|
dropdownText() {
|
|
return this.refreshInterval?.shortLabel ?? __('Off');
|
|
},
|
|
},
|
|
watch: {
|
|
refreshInterval() {
|
|
if (this.refreshInterval !== null) {
|
|
this.startAutoRefresh();
|
|
} else {
|
|
this.stopAutoRefresh();
|
|
}
|
|
},
|
|
},
|
|
destroyed() {
|
|
this.stopAutoRefresh();
|
|
},
|
|
methods: {
|
|
...mapActions('monitoringDashboard', ['fetchDashboardData']),
|
|
|
|
refresh() {
|
|
this.fetchDashboardData();
|
|
},
|
|
startAutoRefresh() {
|
|
const schedule = () => {
|
|
if (this.refreshInterval) {
|
|
this.timeoutId = setTimeout(this.startAutoRefresh, this.refreshInterval.interval);
|
|
}
|
|
};
|
|
|
|
this.stopAutoRefresh();
|
|
|
|
if (Visibility.hidden()) {
|
|
// Inactive tab? Skip fetch and schedule again
|
|
schedule();
|
|
} else {
|
|
// Active tab! Fetch data and then schedule when settled
|
|
// eslint-disable-next-line promise/catch-or-return
|
|
this.fetchDashboardData().finally(schedule);
|
|
}
|
|
},
|
|
stopAutoRefresh() {
|
|
clearTimeout(this.timeoutId);
|
|
this.timeoutId = null;
|
|
},
|
|
|
|
setRefreshInterval(option) {
|
|
this.refreshInterval = option;
|
|
},
|
|
removeRefreshInterval() {
|
|
this.refreshInterval = null;
|
|
},
|
|
isChecked(option) {
|
|
if (this.refreshInterval) {
|
|
return option.interval === this.refreshInterval.interval;
|
|
}
|
|
return false;
|
|
},
|
|
},
|
|
|
|
refreshIntervals: [
|
|
makeInterval(5),
|
|
makeInterval(10),
|
|
makeInterval(30),
|
|
makeInterval(5, 'm'),
|
|
makeInterval(30, 'm'),
|
|
makeInterval(1, 'h'),
|
|
makeInterval(2, 'h'),
|
|
makeInterval(12, 'h'),
|
|
makeInterval(1, 'd'),
|
|
],
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<gl-button-group>
|
|
<gl-button
|
|
v-gl-tooltip
|
|
class="gl-flex-grow-1"
|
|
variant="default"
|
|
:title="$options.i18n.refreshDashboard"
|
|
:aria-label="$options.i18n.refreshDashboard"
|
|
icon="retry"
|
|
@click="refresh"
|
|
/>
|
|
<gl-dropdown v-gl-tooltip :title="s__('Metrics|Set refresh rate')" :text="dropdownText">
|
|
<gl-dropdown-item
|
|
is-check-item
|
|
:is-checked="refreshInterval === null"
|
|
@click="removeRefreshInterval()"
|
|
>{{ __('Off') }}</gl-dropdown-item
|
|
>
|
|
<gl-dropdown-divider />
|
|
<gl-dropdown-item
|
|
v-for="(option, i) in $options.refreshIntervals"
|
|
:key="i"
|
|
is-check-item
|
|
:is-checked="isChecked(option)"
|
|
@click="setRefreshInterval(option)"
|
|
>{{ option.label }}</gl-dropdown-item
|
|
>
|
|
</gl-dropdown>
|
|
</gl-button-group>
|
|
</template>
|