debian-mirror-gitlab/app/assets/javascripts/monitoring/components/dashboard_header.vue

293 lines
8.8 KiB
Vue
Raw Normal View History

2020-06-23 00:09:42 +05:30
<script>
import { debounce } from 'lodash';
import { mapActions, mapState, mapGetters } from 'vuex';
import {
2020-07-28 23:09:34 +05:30
GlButton,
2020-11-24 15:15:51 +05:30
GlDropdown,
2020-06-23 00:09:42 +05:30
GlLoadingIcon,
2020-11-24 15:15:51 +05:30
GlDropdownItem,
GlDropdownSectionHeader,
2020-06-23 00:09:42 +05:30
GlSearchBoxByType,
GlModalDirective,
GlTooltipDirective,
2020-11-24 15:15:51 +05:30
GlIcon,
2020-06-23 00:09:42 +05:30
} from '@gitlab/ui';
import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
import invalidUrl from '~/lib/utils/invalid_url';
import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
import DashboardsDropdown from './dashboards_dropdown.vue';
2020-07-28 23:09:34 +05:30
import RefreshButton from './refresh_button.vue';
2020-10-24 23:57:45 +05:30
import ActionsMenu from './dashboard_actions_menu.vue';
2020-06-23 00:09:42 +05:30
2020-10-24 23:57:45 +05:30
import { timeRangeToUrl } from '../utils';
2020-06-23 00:09:42 +05:30
import { timeRanges } from '~/vue_shared/constants';
import { timezones } from '../format_date';
export default {
components: {
2020-11-24 15:15:51 +05:30
GlIcon,
2020-07-28 23:09:34 +05:30
GlButton,
2020-11-24 15:15:51 +05:30
GlDropdown,
2020-10-24 23:57:45 +05:30
GlLoadingIcon,
2020-11-24 15:15:51 +05:30
GlDropdownItem,
GlDropdownSectionHeader,
2020-10-24 23:57:45 +05:30
2020-06-23 00:09:42 +05:30
GlSearchBoxByType,
DateTimePicker,
DashboardsDropdown,
2020-07-28 23:09:34 +05:30
RefreshButton,
2020-10-24 23:57:45 +05:30
ActionsMenu,
2020-06-23 00:09:42 +05:30
},
directives: {
GlModal: GlModalDirective,
GlTooltip: GlTooltipDirective,
},
props: {
defaultBranch: {
type: String,
required: true,
},
rearrangePanelsAvailable: {
type: Boolean,
required: false,
default: false,
},
customMetricsAvailable: {
type: Boolean,
required: false,
default: false,
},
customMetricsPath: {
type: String,
required: false,
default: invalidUrl,
},
validateQueryPath: {
type: String,
required: false,
default: invalidUrl,
},
isRearrangingPanels: {
type: Boolean,
required: true,
},
selectedTimeRange: {
type: Object,
required: true,
},
},
computed: {
...mapState('monitoringDashboard', [
2020-07-28 23:09:34 +05:30
'emptyState',
2020-06-23 00:09:42 +05:30
'environmentsLoading',
'currentEnvironmentName',
'dashboardTimezone',
2020-07-28 23:09:34 +05:30
'projectPath',
'canAccessOperationsSettings',
'operationsSettingsPath',
'currentDashboard',
2020-10-24 23:57:45 +05:30
'externalDashboardUrl',
2020-06-23 00:09:42 +05:30
]),
...mapGetters('monitoringDashboard', ['selectedDashboard', 'filteredEnvironments']),
2020-07-28 23:09:34 +05:30
shouldShowEmptyState() {
return Boolean(this.emptyState);
},
2020-06-23 00:09:42 +05:30
shouldShowEnvironmentsDropdownNoMatchedMsg() {
return !this.environmentsLoading && this.filteredEnvironments.length === 0;
},
addingMetricsAvailable() {
return (
this.customMetricsAvailable &&
2020-07-28 23:09:34 +05:30
!this.shouldShowEmptyState &&
2020-06-23 00:09:42 +05:30
// Custom metrics only avaialble on system dashboards because
// they are stored in the database. This can be improved. See:
// https://gitlab.com/gitlab-org/gitlab/-/issues/28241
2020-10-24 23:57:45 +05:30
this.selectedDashboard?.out_of_the_box_dashboard
2020-06-23 00:09:42 +05:30
);
},
showRearrangePanelsBtn() {
2020-07-28 23:09:34 +05:30
return !this.shouldShowEmptyState && this.rearrangePanelsAvailable;
2020-06-23 00:09:42 +05:30
},
2020-10-24 23:57:45 +05:30
environmentDropdownText() {
return this.currentEnvironmentName ?? '';
},
2020-06-23 00:09:42 +05:30
displayUtc() {
return this.dashboardTimezone === timezones.UTC;
},
2020-07-28 23:09:34 +05:30
shouldShowSettingsButton() {
return this.canAccessOperationsSettings && this.operationsSettingsPath;
},
2020-10-24 23:57:45 +05:30
isOOTBDashboard() {
return this.selectedDashboard?.out_of_the_box_dashboard ?? false;
},
2020-06-23 00:09:42 +05:30
},
methods: {
2020-10-24 23:57:45 +05:30
...mapActions('monitoringDashboard', ['filterEnvironments']),
2020-06-23 00:09:42 +05:30
selectDashboard(dashboard) {
2020-07-28 23:09:34 +05:30
// Once the sidebar See metrics link is updated to the new URL,
// this sort of hardcoding will not be necessary.
// https://gitlab.com/gitlab-org/gitlab/-/issues/229277
const baseURL = `${this.projectPath}/-/metrics`;
const dashboardPath = encodeURIComponent(
dashboard.out_of_the_box_dashboard ? dashboard.path : dashboard.display_name,
);
redirectTo(`${baseURL}/${dashboardPath}`);
2020-06-23 00:09:42 +05:30
},
debouncedEnvironmentsSearch: debounce(function environmentsSearchOnInput(searchTerm) {
this.filterEnvironments(searchTerm);
}, 500),
onDateTimePickerInput(timeRange) {
redirectTo(timeRangeToUrl(timeRange));
},
onDateTimePickerInvalid() {
this.$emit('dateTimePickerInvalid');
},
toggleRearrangingPanels() {
this.$emit('setRearrangingPanels', !this.isRearrangingPanels);
},
2020-07-28 23:09:34 +05:30
getEnvironmentPath(environment) {
// Once the sidebar See metrics link is updated to the new URL,
// this sort of hardcoding will not be necessary.
// https://gitlab.com/gitlab-org/gitlab/-/issues/229277
const baseURL = `${this.projectPath}/-/metrics`;
const dashboardPath = encodeURIComponent(this.currentDashboard || '');
// The environment_metrics_spec.rb requires the URL to not have
// slashes. Hence, this additional check.
const url = dashboardPath ? `${baseURL}/${dashboardPath}` : baseURL;
return mergeUrlParams({ environment }, url);
},
2020-06-23 00:09:42 +05:30
},
timeRanges,
};
</script>
<template>
<div ref="prometheusGraphsHeader">
2020-07-28 23:09:34 +05:30
<div class="mb-2 mr-2 d-flex d-sm-block">
2020-06-23 00:09:42 +05:30
<dashboards-dropdown
id="monitor-dashboards-dropdown"
data-qa-selector="dashboards_filter_dropdown"
class="flex-grow-1"
toggle-class="dropdown-menu-toggle"
:default-branch="defaultBranch"
@selectDashboard="selectDashboard"
/>
</div>
2020-07-28 23:09:34 +05:30
<span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span>
2020-06-23 00:09:42 +05:30
<div class="mb-2 pr-2 d-flex d-sm-block">
2020-11-24 15:15:51 +05:30
<gl-dropdown
2020-06-23 00:09:42 +05:30
id="monitor-environments-dropdown"
ref="monitorEnvironmentsDropdown"
class="flex-grow-1"
data-qa-selector="environments_dropdown"
toggle-class="dropdown-menu-toggle"
menu-class="monitor-environment-dropdown-menu"
2020-10-24 23:57:45 +05:30
:text="environmentDropdownText"
2020-06-23 00:09:42 +05:30
>
<div class="d-flex flex-column overflow-hidden">
2020-11-24 15:15:51 +05:30
<gl-dropdown-section-header>{{ __('Environment') }}</gl-dropdown-section-header>
2021-01-03 14:25:43 +05:30
<gl-search-box-by-type @input="debouncedEnvironmentsSearch" />
2020-10-24 23:57:45 +05:30
<gl-loading-icon v-if="environmentsLoading" :inline="true" />
2020-06-23 00:09:42 +05:30
<div v-else class="flex-fill overflow-auto">
2020-11-24 15:15:51 +05:30
<gl-dropdown-item
2020-06-23 00:09:42 +05:30
v-for="environment in filteredEnvironments"
:key="environment.id"
2020-10-24 23:57:45 +05:30
:is-check-item="true"
:is-checked="environment.name === currentEnvironmentName"
2020-07-28 23:09:34 +05:30
:href="getEnvironmentPath(environment.id)"
2020-06-23 00:09:42 +05:30
>
2020-10-24 23:57:45 +05:30
{{ environment.name }}
2020-11-24 15:15:51 +05:30
</gl-dropdown-item>
2020-06-23 00:09:42 +05:30
</div>
<div
v-show="shouldShowEnvironmentsDropdownNoMatchedMsg"
ref="monitorEnvironmentsDropdownMsg"
class="text-secondary no-matches-message"
>
{{ __('No matching results') }}
</div>
</div>
2020-11-24 15:15:51 +05:30
</gl-dropdown>
2020-06-23 00:09:42 +05:30
</div>
<div class="mb-2 pr-2 d-flex d-sm-block">
<date-time-picker
ref="dateTimePicker"
class="flex-grow-1 show-last-dropdown"
data-qa-selector="range_picker_dropdown"
:value="selectedTimeRange"
:options="$options.timeRanges"
:utc="displayUtc"
@input="onDateTimePickerInput"
@invalid="onDateTimePickerInvalid"
/>
</div>
<div class="mb-2 pr-2 d-flex d-sm-block">
2020-07-28 23:09:34 +05:30
<refresh-button />
2020-06-23 00:09:42 +05:30
</div>
<div class="flex-grow-1"></div>
<div class="d-sm-flex">
<div v-if="showRearrangePanelsBtn" class="mb-2 mr-2 d-flex">
2020-10-24 23:57:45 +05:30
<gl-button
2020-06-23 00:09:42 +05:30
:pressed="isRearrangingPanels"
variant="default"
class="flex-grow-1 js-rearrange-button"
@click="toggleRearrangingPanels"
>
{{ __('Arrange charts') }}
2020-10-24 23:57:45 +05:30
</gl-button>
2020-06-23 00:09:42 +05:30
</div>
2020-07-28 23:09:34 +05:30
<div
v-if="externalDashboardUrl && externalDashboardUrl.length"
class="mb-2 mr-2 d-flex d-sm-block"
>
2020-10-24 23:57:45 +05:30
<gl-button
2020-06-23 00:09:42 +05:30
class="flex-grow-1 js-external-dashboard-link"
2020-10-24 23:57:45 +05:30
variant="info"
category="primary"
2020-06-23 00:09:42 +05:30
:href="externalDashboardUrl"
target="_blank"
rel="noopener noreferrer"
>
2020-11-24 15:15:51 +05:30
{{ __('View full dashboard') }} <gl-icon name="external-link" />
2020-10-24 23:57:45 +05:30
</gl-button>
2020-06-23 00:09:42 +05:30
</div>
2020-07-28 23:09:34 +05:30
2020-10-24 23:57:45 +05:30
<div class="gl-mb-3 gl-mr-3 d-flex d-sm-block">
<actions-menu
:adding-metrics-available="addingMetricsAvailable"
:custom-metrics-path="customMetricsPath"
:validate-query-path="validateQueryPath"
:default-branch="defaultBranch"
:is-ootb-dashboard="isOOTBDashboard"
/>
</div>
2020-07-28 23:09:34 +05:30
2020-10-24 23:57:45 +05:30
<template v-if="shouldShowSettingsButton">
<span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span>
2020-07-28 23:09:34 +05:30
2020-10-24 23:57:45 +05:30
<div class="mb-2 mr-2 d-flex d-sm-block">
<gl-button
v-gl-tooltip
data-testid="metrics-settings-button"
icon="settings"
:href="operationsSettingsPath"
:title="s__('Metrics|Metrics Settings')"
2020-07-28 23:09:34 +05:30
/>
2020-10-24 23:57:45 +05:30
</div>
</template>
2020-06-23 00:09:42 +05:30
</div>
</div>
</template>