diff options
Diffstat (limited to 'app/assets/javascripts/tracing')
8 files changed, 0 insertions, 628 deletions
diff --git a/app/assets/javascripts/tracing/components/tracing_details.vue b/app/assets/javascripts/tracing/components/tracing_details.vue deleted file mode 100644 index d8b2cbc9469..00000000000 --- a/app/assets/javascripts/tracing/components/tracing_details.vue +++ /dev/null @@ -1,90 +0,0 @@ -<script> -import { GlLoadingIcon } from '@gitlab/ui'; -import { s__ } from '~/locale'; -import { createAlert } from '~/alert'; -import { visitUrl, isSafeURL } from '~/lib/utils/url_utility'; - -export default { - components: { - GlLoadingIcon, - }, - i18n: { - error: s__('Tracing|Failed to load trace details.'), - }, - props: { - observabilityClient: { - required: true, - type: Object, - }, - traceId: { - required: true, - type: String, - }, - tracingIndexUrl: { - required: true, - type: String, - validator: (val) => isSafeURL(val), - }, - }, - data() { - return { - trace: null, - loading: false, - }; - }, - created() { - this.validateAndFetch(); - }, - methods: { - async validateAndFetch() { - if (!this.traceId) { - createAlert({ - message: this.$options.i18n.error, - }); - } - this.loading = true; - try { - const enabled = await this.observabilityClient.isTracingEnabled(); - if (enabled) { - await this.fetchTrace(); - } else { - this.goToTracingIndex(); - } - } catch (e) { - createAlert({ - message: this.$options.i18n.error, - }); - } finally { - this.loading = false; - } - }, - async fetchTrace() { - this.loading = true; - try { - this.trace = await this.observabilityClient.fetchTrace(this.traceId); - } catch (e) { - createAlert({ - message: this.$options.i18n.error, - }); - } finally { - this.loading = false; - } - }, - goToTracingIndex() { - visitUrl(this.tracingIndexUrl); - }, - }, -}; -</script> - -<template> - <div v-if="loading" class="gl-py-5"> - <gl-loading-icon size="lg" /> - </div> - - <!-- TODO Replace with actual trace-details component--> - <div v-else-if="trace" data-testid="trace-details"> - <p>{{ tracingIndexUrl }}</p> - <p>{{ trace }}</p> - </div> -</template> diff --git a/app/assets/javascripts/tracing/components/tracing_empty_state.vue b/app/assets/javascripts/tracing/components/tracing_empty_state.vue deleted file mode 100644 index f17060db6bc..00000000000 --- a/app/assets/javascripts/tracing/components/tracing_empty_state.vue +++ /dev/null @@ -1,35 +0,0 @@ -<script> -import EMPTY_TRACING_SVG from '@gitlab/svgs/dist/illustrations/monitoring/tracing.svg?url'; -import { GlEmptyState, GlButton } from '@gitlab/ui'; -import { s__ } from '~/locale'; - -export default { - EMPTY_TRACING_SVG, - name: 'TracingEmptyState', - i18n: { - title: s__('Tracing|Get started with Tracing'), - description: s__('Tracing|Monitor your applications with GitLab Distributed Tracing.'), - enableButtonText: s__('Tracing|Enable'), - }, - components: { - GlEmptyState, - GlButton, - }, -}; -</script> - -<template> - <gl-empty-state :title="$options.i18n.title" :svg-path="$options.EMPTY_TRACING_SVG"> - <template #description> - <div> - <span>{{ $options.i18n.description }}</span> - </div> - </template> - - <template #actions> - <gl-button variant="confirm" class="gl-mx-2 gl-mb-3" @click="$emit('enable-tracing')"> - {{ $options.i18n.enableButtonText }} - </gl-button> - </template> - </gl-empty-state> -</template> diff --git a/app/assets/javascripts/tracing/components/tracing_list.vue b/app/assets/javascripts/tracing/components/tracing_list.vue deleted file mode 100644 index 21d1353a86d..00000000000 --- a/app/assets/javascripts/tracing/components/tracing_list.vue +++ /dev/null @@ -1,125 +0,0 @@ -<script> -import { GlLoadingIcon } from '@gitlab/ui'; -import { s__ } from '~/locale'; -import { createAlert } from '~/alert'; -import { visitUrl, joinPaths } from '~/lib/utils/url_utility'; -import UrlSync from '~/vue_shared/components/url_sync.vue'; -import { - queryToFilterObj, - filterObjToQuery, - filterObjToFilterToken, - filterTokensToFilterObj, -} from '../filters'; -import TracingEmptyState from './tracing_empty_state.vue'; -import TracingTableList from './tracing_table_list.vue'; -import FilteredSearch from './tracing_list_filtered_search.vue'; - -export default { - components: { - GlLoadingIcon, - TracingTableList, - TracingEmptyState, - FilteredSearch, - UrlSync, - }, - props: { - observabilityClient: { - required: true, - type: Object, - }, - }, - data() { - return { - loading: true, - /** - * tracingEnabled: boolean | null. - * null identifies a state where we don't know if tracing is enabled or not (e.g. when fetching the status from the API fails) - */ - tracingEnabled: null, - traces: [], - filters: queryToFilterObj(window.location.search), - }; - }, - computed: { - query() { - return filterObjToQuery(this.filters); - }, - initialFilterValue() { - return filterObjToFilterToken(this.filters); - }, - }, - async created() { - this.checkEnabled(); - }, - methods: { - async checkEnabled() { - this.loading = true; - try { - this.tracingEnabled = await this.observabilityClient.isTracingEnabled(); - if (this.tracingEnabled) { - await this.fetchTraces(); - } - } catch (e) { - createAlert({ - message: s__('Tracing|Failed to load page.'), - }); - } finally { - this.loading = false; - } - }, - async enableTracing() { - this.loading = true; - try { - await this.observabilityClient.enableTraces(); - this.tracingEnabled = true; - await this.fetchTraces(); - } catch (e) { - createAlert({ - message: s__('Tracing|Failed to enable tracing.'), - }); - } finally { - this.loading = false; - } - }, - async fetchTraces() { - this.loading = true; - try { - const traces = await this.observabilityClient.fetchTraces(this.filters); - this.traces = traces; - } catch (e) { - createAlert({ - message: s__('Tracing|Failed to load traces.'), - }); - } finally { - this.loading = false; - } - }, - selectTrace(trace) { - visitUrl(joinPaths(window.location.pathname, trace.trace_id)); - }, - handleFilters(filterTokens) { - this.filters = filterTokensToFilterObj(filterTokens); - this.fetchTraces(); - }, - }, -}; -</script> - -<template> - <div> - <div v-if="loading" class="gl-py-5"> - <gl-loading-icon size="lg" /> - </div> - - <template v-else-if="tracingEnabled !== null"> - <tracing-empty-state v-if="tracingEnabled === false" @enable-tracing="enableTracing" /> - - <template v-else> - <filtered-search :initial-filters="initialFilterValue" @submit="handleFilters" /> - <url-sync :query="query" /> - - <tracing-table-list :traces="traces" @reload="fetchTraces" @trace-selected="selectTrace" /> - </template> - </template> - </div> -</template> diff --git a/app/assets/javascripts/tracing/components/tracing_list_filtered_search.vue b/app/assets/javascripts/tracing/components/tracing_list_filtered_search.vue deleted file mode 100644 index d086f2d03ff..00000000000 --- a/app/assets/javascripts/tracing/components/tracing_list_filtered_search.vue +++ /dev/null @@ -1,87 +0,0 @@ -<script> -import { GlFilteredSearch, GlFilteredSearchToken } from '@gitlab/ui'; -import { s__ } from '~/locale'; -import { - OPERATORS_IS, - OPERATORS_IS_NOT, -} from '~/vue_shared/components/filtered_search_bar/constants'; -import { - PERIOD_FILTER_TOKEN_TYPE, - SERVICE_NAME_FILTER_TOKEN_TYPE, - OPERATION_FILTER_TOKEN_TYPE, - TRACE_ID_FILTER_TOKEN_TYPE, - DURATION_MS_FILTER_TOKEN_TYPE, -} from '../filters'; - -export default { - availableTokens: [ - { - title: s__('Tracing|Period'), - icon: 'clock', - type: PERIOD_FILTER_TOKEN_TYPE, - token: GlFilteredSearchToken, - operators: OPERATORS_IS, - unique: true, - options: [ - { value: '1m', title: s__('Tracing|Last 1 minute') }, - { value: '15m', title: s__('Tracing|Last 15 minutes') }, - { value: '30m', title: s__('Tracing|Last 30 minutes') }, - { value: '1h', title: s__('Tracing|Last 1 hour') }, - { value: '24h', title: s__('Tracing|Last 24 hours') }, - { value: '7d', title: s__('Tracing|Last 7 days') }, - { value: '14d', title: s__('Tracing|Last 14 days') }, - { value: '30d', title: s__('Tracing|Last 30 days') }, - ], - }, - { - title: s__('Tracing|Service'), - type: SERVICE_NAME_FILTER_TOKEN_TYPE, - token: GlFilteredSearchToken, - operators: OPERATORS_IS_NOT, - }, - { - title: s__('Tracing|Operation'), - type: OPERATION_FILTER_TOKEN_TYPE, - token: GlFilteredSearchToken, - operators: OPERATORS_IS_NOT, - }, - { - title: s__('Tracing|Trace ID'), - type: TRACE_ID_FILTER_TOKEN_TYPE, - token: GlFilteredSearchToken, - operators: OPERATORS_IS_NOT, - }, - { - title: s__('Tracing|Duration (ms)'), - type: DURATION_MS_FILTER_TOKEN_TYPE, - token: GlFilteredSearchToken, - operators: [ - { value: '>', description: s__('Tracing|longer than') }, - { value: '<', description: s__('Tracing|shorter than') }, - ], - }, - ], - components: { - GlFilteredSearch, - }, - props: { - initialFilters: { - type: Array, - required: false, - default: () => [], - }, - }, -}; -</script> - -<template> - <div class="vue-filtered-search-bar-container row-content-block gl-border-t-none"> - <gl-filtered-search - :value="initialFilters" - terms-as-tokens - :placeholder="s__('Tracing|Filter Traces')" - :available-tokens="$options.availableTokens" - @submit="$emit('submit', $event)" - /> - </div> -</template> diff --git a/app/assets/javascripts/tracing/components/tracing_table_list.vue b/app/assets/javascripts/tracing/components/tracing_table_list.vue deleted file mode 100644 index abb1f3ae88c..00000000000 --- a/app/assets/javascripts/tracing/components/tracing_table_list.vue +++ /dev/null @@ -1,101 +0,0 @@ -<script> -import { GlTable, GlLink } from '@gitlab/ui'; -import { s__ } from '~/locale'; - -export const tableDataClass = 'gl-display-flex gl-md-display-table-cell gl-align-items-center'; -export default { - name: 'TracingTableList', - i18n: { - title: s__('Tracing|Traces'), - emptyText: s__('Tracing|No traces to display.'), - emptyLinkText: s__('Tracing|Check again'), - }, - fields: [ - { - key: 'timestamp', - label: s__('Tracing|Date'), - tdClass: tableDataClass, - sortable: true, - }, - { - key: 'service_name', - label: s__('Tracing|Service'), - tdClass: tableDataClass, - sortable: true, - }, - { - key: 'operation', - label: s__('Tracing|Operation'), - tdClass: tableDataClass, - sortable: true, - }, - { - key: 'duration', - label: s__('Tracing|Duration'), - thClass: 'gl-w-15p', - tdClass: tableDataClass, - sortable: true, - }, - ], - components: { - GlTable, - GlLink, - }, - props: { - traces: { - required: true, - type: Array, - }, - }, - methods: { - onSelect(items) { - if (items[0]) { - this.$emit('trace-selected', items[0]); - } - }, - }, -}; -</script> - -<template> - <div> - <h4 class="gl-display-block gl-md-display-none! gl-my-5">{{ $options.i18n.title }}</h4> - - <gl-table - :items="traces" - :fields="$options.fields" - show-empty - sort-by="timestamp" - :sort-desc="true" - fixed - stacked="md" - tbody-tr-class="table-row" - selectable - select-mode="single" - selected-variant="" - @row-selected="onSelect" - > - <template #cell(timestamp)="data"> - {{ data.item.timestamp }} - </template> - - <template #cell(service_name)="data"> - {{ data.item.service_name }} - </template> - - <template #cell(operation)="data"> - {{ data.item.operation }} - </template> - - <template #cell(duration)="data"> - <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings --> - {{ `${data.item.duration} ms` }} - </template> - - <template #empty> - {{ $options.i18n.emptyText }} - <gl-link @click="$emit('reload')">{{ $options.i18n.emptyLinkText }}</gl-link> - </template> - </gl-table> - </div> -</template> diff --git a/app/assets/javascripts/tracing/details_index.vue b/app/assets/javascripts/tracing/details_index.vue deleted file mode 100644 index 5702a88766c..00000000000 --- a/app/assets/javascripts/tracing/details_index.vue +++ /dev/null @@ -1,49 +0,0 @@ -<script> -import ObservabilityContainer from '~/observability/components/observability_container.vue'; -import TracingDetails from './components/tracing_details.vue'; - -export default { - components: { - ObservabilityContainer, - TracingDetails, - }, - props: { - traceId: { - type: String, - required: true, - }, - oauthUrl: { - type: String, - required: true, - }, - tracingUrl: { - type: String, - required: true, - }, - provisioningUrl: { - type: String, - required: true, - }, - tracingIndexUrl: { - required: true, - type: String, - }, - }, -}; -</script> - -<template> - <observability-container - :oauth-url="oauthUrl" - :tracing-url="tracingUrl" - :provisioning-url="provisioningUrl" - > - <template #default="{ observabilityClient }"> - <tracing-details - :trace-id="traceId" - :tracing-index-url="tracingIndexUrl" - :observability-client="observabilityClient" - /> - </template> - </observability-container> -</template> diff --git a/app/assets/javascripts/tracing/filters.js b/app/assets/javascripts/tracing/filters.js deleted file mode 100644 index 88a54b2e69f..00000000000 --- a/app/assets/javascripts/tracing/filters.js +++ /dev/null @@ -1,104 +0,0 @@ -import { - filterToQueryObject, - urlQueryToFilter, - prepareTokens, - processFilters, -} from '~/vue_shared/components/filtered_search_bar/filtered_search_utils'; -import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants'; - -export const PERIOD_FILTER_TOKEN_TYPE = 'period'; -export const SERVICE_NAME_FILTER_TOKEN_TYPE = 'service-name'; -export const OPERATION_FILTER_TOKEN_TYPE = 'operation'; -export const TRACE_ID_FILTER_TOKEN_TYPE = 'trace-id'; -export const DURATION_MS_FILTER_TOKEN_TYPE = 'duration-ms'; - -export function queryToFilterObj(url) { - const filter = urlQueryToFilter(url, { - filteredSearchTermKey: 'search', - customOperators: [ - { - operator: '>', - prefix: 'gt', - }, - { - operator: '<', - prefix: 'lt', - }, - ], - }); - const { - period = null, - service = null, - operation = null, - trace_id: traceId = null, - durationMs = null, - } = filter; - const search = filter[FILTERED_SEARCH_TERM]; - return { - period, - service, - operation, - traceId, - durationMs, - search, - }; -} - -export function filterObjToQuery(filters) { - return filterToQueryObject( - { - period: filters.period, - service: filters.serviceName, - operation: filters.operation, - trace_id: filters.traceId, - durationMs: filters.durationMs, - [FILTERED_SEARCH_TERM]: filters.search, - }, - { - filteredSearchTermKey: 'search', - customOperators: [ - { - operator: '>', - prefix: 'gt', - applyOnlyToKey: 'durationMs', - }, - { - operator: '<', - prefix: 'lt', - applyOnlyToKey: 'durationMs', - }, - ], - }, - ); -} - -export function filterObjToFilterToken(filters) { - return prepareTokens({ - [PERIOD_FILTER_TOKEN_TYPE]: filters.period, - [SERVICE_NAME_FILTER_TOKEN_TYPE]: filters.serviceName, - [OPERATION_FILTER_TOKEN_TYPE]: filters.operation, - [TRACE_ID_FILTER_TOKEN_TYPE]: filters.traceId, - [DURATION_MS_FILTER_TOKEN_TYPE]: filters.durationMs, - [FILTERED_SEARCH_TERM]: filters.search, - }); -} - -export function filterTokensToFilterObj(tokens) { - const { - [SERVICE_NAME_FILTER_TOKEN_TYPE]: serviceName, - [PERIOD_FILTER_TOKEN_TYPE]: period, - [OPERATION_FILTER_TOKEN_TYPE]: operation, - [TRACE_ID_FILTER_TOKEN_TYPE]: traceId, - [DURATION_MS_FILTER_TOKEN_TYPE]: durationMs, - [FILTERED_SEARCH_TERM]: search, - } = processFilters(tokens); - - return { - serviceName, - period, - operation, - traceId, - durationMs, - search, - }; -} diff --git a/app/assets/javascripts/tracing/list_index.vue b/app/assets/javascripts/tracing/list_index.vue deleted file mode 100644 index 432fbb81506..00000000000 --- a/app/assets/javascripts/tracing/list_index.vue +++ /dev/null @@ -1,37 +0,0 @@ -<script> -import ObservabilityContainer from '~/observability/components/observability_container.vue'; -import TracingList from './components/tracing_list.vue'; - -export default { - components: { - ObservabilityContainer, - TracingList, - }, - props: { - oauthUrl: { - type: String, - required: true, - }, - tracingUrl: { - type: String, - required: true, - }, - provisioningUrl: { - type: String, - required: true, - }, - }, -}; -</script> - -<template> - <observability-container - :oauth-url="oauthUrl" - :tracing-url="tracingUrl" - :provisioning-url="provisioningUrl" - > - <template #default="{ observabilityClient }"> - <tracing-list :observability-client="observabilityClient" /> - </template> - </observability-container> -</template> |