Add Infinite scrolling to Tracing list
What does this MR do and why?
- Add Infinite Scrolling to Tracing list
- Remove table sorting ( as doesn't make too much sense with infinite scrolling. Plus we are going to add sorting on the API. Discussed here. )
- Removed padding from content-wrapper so that scrolling is smoother and legend text sits at the bottom.
gitlab-org/opstrace/opstrace#2272 (closed)
Screenshots or screen recordings
How to set up and validate locally
- Enable FF
:observability_tracing
Apply patch to load mocked data (note it's gonna keep loading the same data over and over endlessly
diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index 6c8156f29432..ddb06c10e3d5 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/app/assets/javascripts/observability/client.js
@@ -1,5 +1,6 @@
import * as Sentry from '@sentry/browser';
import axios from '~/lib/utils/axios_utils';
+import mockData from './mock_traces.json';
function reportErrorAndThrow(e) {
Sentry.captureException(e);
@@ -9,10 +10,11 @@ function reportErrorAndThrow(e) {
async function enableTraces(provisioningUrl) {
try {
// Note: axios.put(url, undefined, {withCredentials: true}) does not send cookies properly, so need to use the API below for the correct behaviour
- return await axios(provisioningUrl, {
- method: 'put',
- withCredentials: true,
- });
+ // return await axios(provisioningUrl, {
+ // method: 'put',
+ // withCredentials: true,
+ // });
+ return true;
} catch (e) {
return reportErrorAndThrow(e);
}
@@ -21,7 +23,9 @@ async function enableTraces(provisioningUrl) {
// Provisioning API spec: https://gitlab.com/gitlab-org/opstrace/opstrace/-/blob/main/provisioning-api/pkg/provisioningapi/routes.go#L37
async function isTracingEnabled(provisioningUrl) {
try {
- const { data } = await axios.get(provisioningUrl, { withCredentials: true });
+ // const { data } = await axios.get(provisioningUrl, { withCredentials: true });
+ const data = { status: 'ready' };
+
if (data && data.status) {
// we currently ignore the 'status' payload and just check if the request was successful
// We might improve this as part of https://gitlab.com/gitlab-org/opstrace/opstrace/-/issues/2315
@@ -42,12 +46,13 @@ async function fetchTrace(tracingUrl, traceId) {
throw new Error('traceId is required.');
}
- const { data } = await axios.get(tracingUrl, {
- withCredentials: true,
- params: {
- trace_id: traceId,
- },
- });
+ // const { data } = await axios.get(tracingUrl, {
+ // withCredentials: true,
+ // params: {
+ // trace_id: traceId,
+ // },
+ // });
+ const data = { traces: [mockData.traces.find((t) => t.trace_id === traceId)] };
if (!Array.isArray(data.traces) || data.traces.length === 0) {
throw new Error('traces are missing/invalid in the response'); // eslint-disable-line @gitlab/require-i18n-strings
@@ -176,10 +181,11 @@ async function fetchTraces(tracingUrl, { filters = {}, pageToken, pageSize } = {
}
try {
- const { data } = await axios.get(tracingUrl, {
- withCredentials: true,
- params,
- });
+ // const { data } = await axios.get(tracingUrl, {
+ // withCredentials: true,
+ // params,
+ // });
+ const data = mockData;
if (!Array.isArray(data.traces)) {
throw new Error('traces are missing/invalid in the response'); // eslint-disable-line @gitlab/require-i18n-strings
}
diff --git a/app/assets/javascripts/observability/components/observability_container.vue b/app/assets/javascripts/observability/components/observability_container.vue
index b7697cea2996..26f6998d5969 100644
--- a/app/assets/javascripts/observability/components/observability_container.vue
+++ b/app/assets/javascripts/observability/components/observability_container.vue
@@ -33,12 +33,12 @@ export default {
// TODO: Improve local GDK dev experience with tracing https://gitlab.com/gitlab-org/opstrace/opstrace/-/issues/2308
// Uncomment the lines below to to test this locally
- // setTimeout(() => {
- // this.messageHandler({
- // data: { type: 'AUTH_COMPLETION', status: 'success' },
- // origin: new URL(this.oauthUrl).origin,
- // });
- // }, 2000);
+ setTimeout(() => {
+ this.messageHandler({
+ data: { type: 'AUTH_COMPLETION', status: 'success' },
+ origin: new URL(this.oauthUrl).origin,
+ });
+ }, 2000);
},
destroyed() {
window.removeEventListener('message', this.messageHandler);
Edited by Daniele Rossetti