debian-mirror-gitlab/app/assets/javascripts/logs/components/environment_logs.vue

243 lines
6.8 KiB
Vue
Raw Normal View History

2020-04-08 14:13:33 +05:30
<script>
import {
GlSprintf,
GlAlert,
2021-01-03 14:25:43 +05:30
GlDropdown,
GlDropdownSectionHeader,
GlDropdownItem,
2020-04-08 14:13:33 +05:30
GlInfiniteScroll,
} from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { throttle } from 'lodash';
import { mapActions, mapState, mapGetters } from 'vuex';
2020-04-22 19:07:51 +05:30
2020-04-08 14:13:33 +05:30
import { timeRangeFromUrl } from '~/monitoring/utils';
2021-03-11 19:13:27 +05:30
import { defaultTimeRange } from '~/vue_shared/constants';
2020-04-08 14:13:33 +05:30
import { formatDate } from '../utils';
2021-03-11 19:13:27 +05:30
import LogAdvancedFilters from './log_advanced_filters.vue';
import LogControlButtons from './log_control_buttons.vue';
import LogSimpleFilters from './log_simple_filters.vue';
2020-04-08 14:13:33 +05:30
export default {
components: {
GlSprintf,
GlAlert,
2021-01-03 14:25:43 +05:30
GlDropdown,
GlDropdownSectionHeader,
GlDropdownItem,
2020-04-08 14:13:33 +05:30
GlInfiniteScroll,
2020-04-22 19:07:51 +05:30
LogSimpleFilters,
LogAdvancedFilters,
2020-04-08 14:13:33 +05:30
LogControlButtons,
},
props: {
environmentName: {
type: String,
required: false,
default: '',
},
currentPodName: {
type: [String, null],
required: false,
default: null,
},
environmentsPath: {
type: String,
required: false,
default: '',
},
clusterApplicationsDocumentationPath: {
type: String,
required: true,
},
2020-07-28 23:09:34 +05:30
clustersPath: {
type: String,
required: true,
},
2020-04-08 14:13:33 +05:30
},
data() {
return {
isElasticStackCalloutDismissed: false,
scrollDownButtonDisabled: true,
};
},
computed: {
2021-09-04 01:27:46 +05:30
...mapState('environmentLogs', ['environments', 'timeRange', 'logs', 'pods']),
2020-04-22 19:07:51 +05:30
...mapGetters('environmentLogs', ['trace', 'showAdvancedFilters']),
2020-04-08 14:13:33 +05:30
showLoader() {
return this.logs.isLoading;
},
shouldShowElasticStackCallout() {
2020-04-22 19:07:51 +05:30
return !(
this.environments.isLoading ||
this.isElasticStackCalloutDismissed ||
this.showAdvancedFilters
);
2020-04-08 14:13:33 +05:30
},
},
mounted() {
this.setInitData({
timeRange: timeRangeFromUrl() || defaultTimeRange,
environmentName: this.environmentName,
podName: this.currentPodName,
});
this.fetchEnvironments(this.environmentsPath);
},
methods: {
...mapActions('environmentLogs', [
'setInitData',
'showEnvironment',
'fetchEnvironments',
2020-06-23 00:09:42 +05:30
'refreshPodLogs',
2020-04-08 14:13:33 +05:30
'fetchMoreLogsPrepend',
2020-04-22 19:07:51 +05:30
'dismissRequestEnvironmentsError',
'dismissInvalidTimeRangeWarning',
'dismissRequestLogsError',
2020-04-08 14:13:33 +05:30
]),
2020-04-22 19:07:51 +05:30
isCurrentEnvironment(envName) {
return envName === this.environments.current;
},
2020-04-08 14:13:33 +05:30
topReached() {
if (!this.logs.isLoading) {
this.fetchMoreLogsPrepend();
}
},
scrollDown() {
this.$refs.infiniteScroll.scrollDown();
},
scroll: throttle(function scrollThrottled({ target = {} }) {
const { scrollTop = 0, clientHeight = 0, scrollHeight = 0 } = target;
this.scrollDownButtonDisabled = scrollTop + clientHeight === scrollHeight;
}, 200),
2021-09-30 23:02:18 +05:30
formatDate,
2020-04-08 14:13:33 +05:30
},
};
</script>
<template>
2020-04-22 19:07:51 +05:30
<div class="environment-logs-viewer d-flex flex-column py-3">
2020-04-08 14:13:33 +05:30
<gl-alert
v-if="shouldShowElasticStackCallout"
2020-04-22 19:07:51 +05:30
ref="elasticsearchNotice"
class="mb-3"
2020-04-08 14:13:33 +05:30
@dismiss="isElasticStackCalloutDismissed = true"
>
{{
s__(
'Environments|Install Elastic Stack on your cluster to enable advanced querying capabilities such as full text search.',
)
}}
<a :href="clusterApplicationsDocumentationPath">
<strong>
{{ s__('View Documentation') }}
</strong>
</a>
</gl-alert>
2020-04-22 19:07:51 +05:30
<gl-alert
v-if="environments.fetchError"
class="mb-3"
variant="danger"
@dismiss="dismissRequestEnvironmentsError"
>
{{ s__('Metrics|There was an error fetching the environments data, please try again') }}
</gl-alert>
<gl-alert
v-if="timeRange.invalidWarning"
class="mb-3"
variant="warning"
@dismiss="dismissInvalidTimeRangeWarning"
>
{{ s__('Metrics|Invalid time range, please verify.') }}
</gl-alert>
<gl-alert
v-if="logs.fetchError"
class="mb-3"
variant="danger"
@dismiss="dismissRequestLogsError"
>
{{ s__('Environments|There was an error fetching the logs. Please try again.') }}
</gl-alert>
<div class="top-bar d-md-flex border bg-secondary-50 pt-2 pr-1 pb-0 pl-2">
<div class="flex-grow-0">
2021-01-03 14:25:43 +05:30
<gl-dropdown
2020-04-22 19:07:51 +05:30
id="environments-dropdown"
2021-09-04 01:27:46 +05:30
:text="environments.current"
2020-04-22 19:07:51 +05:30
:disabled="environments.isLoading"
2021-03-11 19:13:27 +05:30
class="gl-mr-3 gl-mb-3 gl-display-flex gl-md-display-block js-environments-dropdown"
2020-04-08 14:13:33 +05:30
>
2021-01-03 14:25:43 +05:30
<gl-dropdown-section-header>
2020-07-28 23:09:34 +05:30
{{ s__('Environments|Environments') }}
2021-01-03 14:25:43 +05:30
</gl-dropdown-section-header>
<gl-dropdown-item
2020-04-22 19:07:51 +05:30
v-for="env in environments.options"
:key="env.id"
2021-01-03 14:25:43 +05:30
:is-check-item="true"
:is-checked="isCurrentEnvironment(env.name)"
2020-04-22 19:07:51 +05:30
@click="showEnvironment(env.name)"
2020-04-08 14:13:33 +05:30
>
2021-01-03 14:25:43 +05:30
{{ env.name }}
</gl-dropdown-item>
</gl-dropdown>
2020-04-08 14:13:33 +05:30
</div>
2020-04-22 19:07:51 +05:30
<log-advanced-filters
v-if="showAdvancedFilters"
ref="log-advanced-filters"
class="d-md-flex flex-grow-1 min-width-0"
:disabled="environments.isLoading"
/>
<log-simple-filters
v-else
ref="log-simple-filters"
class="d-md-flex flex-grow-1 min-width-0"
:disabled="environments.isLoading"
/>
2020-04-08 14:13:33 +05:30
<log-control-buttons
ref="scrollButtons"
2020-07-28 23:09:34 +05:30
class="flex-grow-0 pr-2 mb-2 controllers gl-display-inline-flex"
2020-04-08 14:13:33 +05:30
:scroll-down-button-disabled="scrollDownButtonDisabled"
2020-06-23 00:09:42 +05:30
@refresh="refreshPodLogs()"
2020-04-08 14:13:33 +05:30
@scrollDown="scrollDown"
/>
</div>
<gl-infinite-scroll
ref="infiniteScroll"
2020-04-22 19:07:51 +05:30
class="log-lines overflow-auto flex-grow-1 min-height-0"
2020-04-08 14:13:33 +05:30
:fetched-items="logs.lines.length"
@topReached="topReached"
@scroll="scroll"
>
<template #items>
<pre
2020-04-22 19:07:51 +05:30
ref="logTrace"
class="build-trace"
2020-04-08 14:13:33 +05:30
><code class="bash js-build-output"><div v-if="showLoader" class="build-loader-animation js-build-loader-animation">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>{{trace}}
</code></pre>
</template>
2021-03-08 18:12:59 +05:30
<template #default><div></div></template>
2020-04-08 14:13:33 +05:30
</gl-infinite-scroll>
2020-04-22 19:07:51 +05:30
<div ref="logFooter" class="py-2 px-3 text-white bg-secondary-900">
2020-04-08 14:13:33 +05:30
<gl-sprintf :message="s__('Environments|Logs from %{start} to %{end}.')">
2021-09-30 23:02:18 +05:30
<template #start>{{ formatDate(timeRange.current.start) }}</template>
<template #end>{{ formatDate(timeRange.current.end) }}</template>
2020-04-08 14:13:33 +05:30
</gl-sprintf>
<gl-sprintf
v-if="!logs.isComplete"
:message="s__('Environments|Currently showing %{fetched} results.')"
>
<template #fetched>{{ logs.lines.length }}</template>
</gl-sprintf>
2021-03-08 18:12:59 +05:30
<template v-else> {{ s__('Environments|Currently showing all results.') }}</template>
2020-04-08 14:13:33 +05:30
</div>
</div>
</template>