diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/dashboard_header.vue')
| -rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard_header.vue | 294 |
1 files changed, 0 insertions, 294 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard_header.vue b/app/assets/javascripts/monitoring/components/dashboard_header.vue deleted file mode 100644 index f4dc29f2184..00000000000 --- a/app/assets/javascripts/monitoring/components/dashboard_header.vue +++ /dev/null @@ -1,294 +0,0 @@ -<script> -import { - GlButton, - GlDropdown, - GlLoadingIcon, - GlDropdownItem, - GlDropdownSectionHeader, - GlSearchBoxByType, - GlModalDirective, - GlTooltipDirective, - GlIcon, -} from '@gitlab/ui'; -import { debounce } from 'lodash'; -import { mapActions, mapState, mapGetters } from 'vuex'; -import invalidUrl from '~/lib/utils/invalid_url'; -import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated -import { s__ } from '~/locale'; -import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue'; - -import { timeRanges } from '~/vue_shared/constants'; -import { timezones } from '../format_date'; -import { timeRangeToUrl } from '../utils'; -import ActionsMenu from './dashboard_actions_menu.vue'; -import DashboardsDropdown from './dashboards_dropdown.vue'; -import RefreshButton from './refresh_button.vue'; - -export default { - i18n: { - metricsSettings: s__('Metrics|Metrics Settings'), - }, - components: { - GlIcon, - GlButton, - GlDropdown, - GlLoadingIcon, - GlDropdownItem, - GlDropdownSectionHeader, - - GlSearchBoxByType, - - DateTimePicker, - DashboardsDropdown, - RefreshButton, - - ActionsMenu, - }, - 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', [ - 'emptyState', - 'environmentsLoading', - 'currentEnvironmentName', - 'dashboardTimezone', - 'projectPath', - 'canAccessOperationsSettings', - 'operationsSettingsPath', - 'currentDashboard', - 'externalDashboardUrl', - ]), - ...mapGetters('monitoringDashboard', ['selectedDashboard', 'filteredEnvironments']), - shouldShowEmptyState() { - return Boolean(this.emptyState); - }, - shouldShowEnvironmentsDropdownNoMatchedMsg() { - return !this.environmentsLoading && this.filteredEnvironments.length === 0; - }, - addingMetricsAvailable() { - return ( - this.customMetricsAvailable && - !this.shouldShowEmptyState && - // Custom metrics only available on system dashboards because - // they are stored in the database. This can be improved. See: - // https://gitlab.com/gitlab-org/gitlab/-/issues/28241 - this.selectedDashboard?.out_of_the_box_dashboard - ); - }, - showRearrangePanelsBtn() { - return !this.shouldShowEmptyState && this.rearrangePanelsAvailable; - }, - environmentDropdownText() { - return this.currentEnvironmentName ?? ''; - }, - displayUtc() { - return this.dashboardTimezone === timezones.UTC; - }, - shouldShowSettingsButton() { - return this.canAccessOperationsSettings && this.operationsSettingsPath; - }, - isOOTBDashboard() { - return this.selectedDashboard?.out_of_the_box_dashboard ?? false; - }, - }, - methods: { - ...mapActions('monitoringDashboard', ['filterEnvironments']), - selectDashboard(dashboard) { - // 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}`); // eslint-disable-line import/no-deprecated - }, - debouncedEnvironmentsSearch: debounce(function environmentsSearchOnInput(searchTerm) { - this.filterEnvironments(searchTerm); - }, 500), - onDateTimePickerInput(timeRange) { - redirectTo(timeRangeToUrl(timeRange)); // eslint-disable-line import/no-deprecated - }, - onDateTimePickerInvalid() { - this.$emit('dateTimePickerInvalid'); - }, - - toggleRearrangingPanels() { - this.$emit('setRearrangingPanels', !this.isRearrangingPanels); - }, - 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); - }, - }, - timeRanges, -}; -</script> - -<template> - <div ref="prometheusGraphsHeader"> - <div class="gl-mb-3 gl-mr-3 gl-display-flex gl-sm-display-block"> - <dashboards-dropdown - id="monitor-dashboards-dropdown" - class="flex-grow-1" - toggle-class="dropdown-menu-toggle" - :default-branch="defaultBranch" - @selectDashboard="selectDashboard" - /> - </div> - - <span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span> - - <div class="mb-2 pr-2 d-flex d-sm-block"> - <gl-dropdown - id="monitor-environments-dropdown" - ref="monitorEnvironmentsDropdown" - class="flex-grow-1" - data-testid="environments-dropdown" - toggle-class="dropdown-menu-toggle" - menu-class="monitor-environment-dropdown-menu" - :text="environmentDropdownText" - > - <div class="d-flex flex-column overflow-hidden"> - <gl-dropdown-section-header>{{ __('Environment') }}</gl-dropdown-section-header> - <gl-search-box-by-type @input="debouncedEnvironmentsSearch" /> - - <gl-loading-icon v-if="environmentsLoading" size="sm" :inline="true" /> - <div v-else class="flex-fill overflow-auto"> - <gl-dropdown-item - v-for="environment in filteredEnvironments" - :key="environment.id" - is-check-item - :is-checked="environment.name === currentEnvironmentName" - :href="getEnvironmentPath(environment.id)" - > - {{ environment.name }} - </gl-dropdown-item> - </div> - <div - v-show="shouldShowEnvironmentsDropdownNoMatchedMsg" - ref="monitorEnvironmentsDropdownMsg" - class="text-secondary no-matches-message" - > - {{ __('No matching results') }} - </div> - </div> - </gl-dropdown> - </div> - - <div class="mb-2 pr-2 d-flex d-sm-block"> - <date-time-picker - ref="dateTimePicker" - class="flex-grow-1 show-last-dropdown" - :value="selectedTimeRange" - :options="$options.timeRanges" - :utc="displayUtc" - @input="onDateTimePickerInput" - @invalid="onDateTimePickerInvalid" - /> - </div> - - <div class="mb-2 pr-2 d-flex d-sm-block"> - <refresh-button /> - </div> - - <div class="flex-grow-1"></div> - - <div class="d-sm-flex"> - <div v-if="showRearrangePanelsBtn" class="gl-mb-3 gl-mr-3 gl-display-flex"> - <gl-button - :pressed="isRearrangingPanels" - variant="default" - class="flex-grow-1 js-rearrange-button" - @click="toggleRearrangingPanels" - > - {{ __('Arrange charts') }} - </gl-button> - </div> - - <div - v-if="externalDashboardUrl && externalDashboardUrl.length" - class="gl-mb-3 gl-mr-3 gl-display-flex gl-sm-display-block" - > - <gl-button - class="flex-grow-1 js-external-dashboard-link" - variant="confirm" - category="primary" - :href="externalDashboardUrl" - target="_blank" - rel="noopener noreferrer" - > - {{ __('View full dashboard') }} <gl-icon name="external-link" /> - </gl-button> - </div> - - <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> - - <template v-if="shouldShowSettingsButton"> - <span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span> - - <div class="gl-mb-3 gl-mr-3 d-flex d-sm-block"> - <gl-button - v-gl-tooltip - data-testid="metrics-settings-button" - icon="settings" - :href="operationsSettingsPath" - :title="$options.i18n.metricsSettings" - :aria-label="$options.i18n.metricsSettings" - /> - </div> - </template> - </div> - </div> -</template> |