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

252 lines
7 KiB
Vue
Raw Normal View History

2020-04-08 14:13:33 +05:30
<script>
import { throttle } from 'lodash';
import { mapActions, mapState, mapGetters } from 'vuex';
import {
GlSprintf,
2020-04-22 19:07:51 +05:30
GlIcon,
2020-04-08 14:13:33 +05:30
GlAlert,
GlDropdown,
2020-04-22 19:07:51 +05:30
GlDropdownHeader,
2020-04-08 14:13:33 +05:30
GlDropdownItem,
GlInfiniteScroll,
} from '@gitlab/ui';
2020-04-22 19:07:51 +05:30
import LogSimpleFilters from './log_simple_filters.vue';
import LogAdvancedFilters from './log_advanced_filters.vue';
2020-04-08 14:13:33 +05:30
import LogControlButtons from './log_control_buttons.vue';
2020-04-22 19:07:51 +05:30
import { defaultTimeRange } from '~/vue_shared/constants';
2020-04-08 14:13:33 +05:30
import { timeRangeFromUrl } from '~/monitoring/utils';
import { formatDate } from '../utils';
export default {
components: {
GlSprintf,
2020-04-22 19:07:51 +05:30
GlIcon,
2020-04-08 14:13:33 +05:30
GlAlert,
GlDropdown,
2020-04-22 19:07:51 +05:30
GlDropdownHeader,
2020-04-08 14:13:33 +05:30
GlDropdownItem,
GlInfiniteScroll,
2020-04-22 19:07:51 +05:30
LogSimpleFilters,
LogAdvancedFilters,
2020-04-08 14:13:33 +05:30
LogControlButtons,
},
filters: {
formatDate,
},
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,
},
},
data() {
return {
isElasticStackCalloutDismissed: false,
scrollDownButtonDisabled: true,
};
},
computed: {
...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),
},
};
</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">
<gl-dropdown
id="environments-dropdown"
:text="environments.current"
:disabled="environments.isLoading"
class="mb-2 gl-h-32 pr-2 d-flex d-md-block js-environments-dropdown"
2020-04-08 14:13:33 +05:30
>
2020-04-22 19:07:51 +05:30
<gl-dropdown-header class="text-center">
{{ s__('Environments|Select environment') }}
</gl-dropdown-header>
<gl-dropdown-item
v-for="env in environments.options"
:key="env.id"
@click="showEnvironment(env.name)"
2020-04-08 14:13:33 +05:30
>
2020-04-22 19:07:51 +05:30
<div class="d-flex">
<gl-icon
:class="{ invisible: !isCurrentEnvironment(env.name) }"
name="status_success_borderless"
/>
<div class="flex-grow-1">{{ env.name }}</div>
</div>
</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-04-22 19:07:51 +05:30
class="flex-grow-0 pr-2 mb-2 controllers"
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>
<template #default
><div></div
></template>
</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}.')">
<template #start>{{ timeRange.current.start | formatDate }}</template>
<template #end>{{ timeRange.current.end | formatDate }}</template>
</gl-sprintf>
<gl-sprintf
v-if="!logs.isComplete"
:message="s__('Environments|Currently showing %{fetched} results.')"
>
<template #fetched>{{ logs.lines.length }}</template>
</gl-sprintf>
<template v-else>
{{ s__('Environments|Currently showing all results.') }}</template
>
</div>
</div>
</template>