1 files changed, 93 insertions, 0 deletions
diff --git a/app/assets/javascripts/tracing/components/tracing_list.vue b/app/assets/javascripts/tracing/components/tracing_list.vue
new file mode 100644
index 00000000000..294e520d7ac
--- /dev/null
+++ b/app/assets/javascripts/tracing/components/tracing_list.vue
@@ -0,0 +1,93 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { createAlert } from '~/alert';
+import TracingEmptyState from './tracing_empty_state.vue';
+import TracingTableList from './tracing_table_list.vue';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    TracingTableList,
+    TracingEmptyState,
+  },
+  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: [],
+    };
+  },
+  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: __('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: __('Failed to enable tracing.'),
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+    async fetchTraces() {
+      this.loading = true;
+      try {
+        const traces = await this.observabilityClient.fetchTraces();
+        this.traces = traces;
+      } catch (e) {
+        createAlert({
+          message: __('Failed to load traces.'),
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</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" />
+
+      <tracing-table-list v-else :traces="traces" @reload="fetchTraces" />
+    </template>
+  </div>
+</template>