<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Label this issue](https://contributors.gitlab.com/manage-issue?action=label&projectId=278964&issueIid=592978) - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=592978) </details> <!--IssueSummary end--> ## Context After an [Accessibility Audit](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1196#note_891976890) ~&quot;group::design system&quot; decided that the best course of action would be to deprecate the infinite scroll component. [Infinite Scrolling and Accessibility (It's Usually Bad)](http://www.webaxe.org/infinite-scrolling-and-accessibility/), has a list of the issues with infinite scroll and additional resources. A "load more" pattern or pagination gives the user control and allows them to opt in to more results being shown and to have a clear sense of what's happening. The time has come for this component to be removed from the design system. This issue allows us to remove the component from gitlab-ui without breaking GitLab, as part of the broader [Deprecation of GLInfiniteScroll component](https://gitlab.com/groups/gitlab-org/-/work_items/6830) effort. ## Current behaviour {width="862" height="600"} The logs list has infinite scroll for results ### Steps to reproduce <details> <summary>Mock patch</summary> ```diff diff --git a/ee/app/assets/javascripts/logs/list_index.vue b/ee/app/assets/javascripts/logs/list_index.vue index 8329e544093a1..b70b69f9845c3 100644 --- a/ee/app/assets/javascripts/logs/list_index.vue +++ b/ee/app/assets/javascripts/logs/list_index.vue @@ -1,5 +1,6 @@ <script> import { buildClient } from '~/observability/client'; +import { createMockLogsClient } from './mock_client'; import LogsList from './list/logs_list.vue'; export default { @@ -25,8 +26,14 @@ export default { }, }, data() { + // Use mock client if query param is set + const useMock = new URLSearchParams(window.location.search).has('mock'); + const observabilityClient = useMock + ? createMockLogsClient({ delay: 300 }) + : buildClient(this.apiConfig); + return { - observabilityClient: buildClient(this.apiConfig), + observabilityClient, }; }, }; diff --git a/ee/app/assets/javascripts/logs/mock_client.js b/ee/app/assets/javascripts/logs/mock_client.js new file mode 100644 index 0000000000000..8d5e2d65d207b --- /dev/null +++ b/ee/app/assets/javascripts/logs/mock_client.js @@ -0,0 +1,211 @@ +/** + * Mock observability client for testing logs list with infinite scroll + * Use this to replace the real client during local development + */ + +const LOGS_PER_PAGE = 100; +const TOTAL_PAGES = 6; // 600 total logs + +/** + * Generate mock log data + * @param {number} startIndex - Starting index for log generation + * @param {number} count - Number of logs to generate + * @returns {Array} Array of mock log objects + */ +function generateMockLogs(startIndex, count) { + const severityNames = ['DEBUG', 'INFO', 'WARN', 'ERROR', 'FATAL']; + const severityNumbers = [0, 1, 2, 3, 4]; + const services = ['auth-service', 'api-gateway', 'database', 'cache', 'payment-service']; + const messages = [ + 'Request processed successfully', + 'Database query executed', + 'Cache hit', + 'Authentication failed', + 'Connection timeout', + 'Invalid request parameter', + 'Resource not found', + 'Internal server error', + ]; + + return Array.from({ length: count }, (_, i) => { + const index = startIndex + i; + const severityIndex = index % severityNames.length; + + return { + fingerprint: `fingerprint-${String(index).padStart(5, '0')}`, + severity_name: severityNames[severityIndex], + severity_number: severityNumbers[severityIndex], + service_name: services[index % services.length], + body: messages[index % messages.length], + timestamp: new Date(Date.now() - Math.random() * 86400000).toISOString(), + trace_id: `trace-${String(index).padStart(5, '0')}`, + span_id: `span-${String(index).padStart(5, '0')}`, + attributes: { + 'http.method': ['GET', 'POST', 'PUT', 'DELETE'][index % 4], + 'http.status_code': [200, 201, 400, 404, 500][index % 5], + 'http.url': `/api/v1/resource/${index}`, + }, + }; + }); +} + +/** + * Mock observability client for logs with pagination support + * Simulates API responses with configurable delays + */ +export function createMockLogsClient(options = {}) { + const { + logsPerPage = LOGS_PER_PAGE, + totalPages = TOTAL_PAGES, + delay = 500, // ms delay to simulate network latency + } = options; + + let fetchedLogs = []; + + return { + /** + * Fetch logs with pagination support + * @param {Object} params - Fetch parameters + * @param {Object} params.filters - Filter object + * @param {string} params.pageToken - Page token for pagination + * @param {number} params.pageSize - Number of logs per page + * @returns {Promise<Object>} Logs and next page token + */ + fetchLogs: async ({ filters = {}, pageToken, pageSize = logsPerPage }) => { + // Simulate network delay + await new Promise((resolve) => setTimeout(resolve, delay)); + + const pageNum = pageToken ? parseInt(pageToken, 10) : 0; + const startIndex = pageNum * pageSize; + const hasNextPage = pageNum < totalPages - 1; + + const logs = generateMockLogs(startIndex, pageSize); + fetchedLogs = [...fetchedLogs, ...logs]; + + return { + logs, + nextPageToken: hasNextPage ? String(pageNum + 1) : null, + }; + }, + + /** + * Fetch logs search metadata + * @param {Object} params - Fetch parameters + * @param {Object} params.filters - Filter object + * @returns {Promise<Object>} Metadata with summary and severity counts + */ + fetchLogsSearchMetadata: async ({ filters = {} }) => { + await new Promise((resolve) => setTimeout(resolve, delay)); + + return { + summary: { + total_logs: 600, + services: ['auth-service', 'api-gateway', 'database', 'cache', 'payment-service'], + }, + severity_numbers_counts: [ + { severity_number: 0, count: 120 }, // DEBUG + { severity_number: 1, count: 200 }, // INFO + { severity_number: 2, count: 150 }, // WARN + { severity_number: 3, count: 100 }, // ERROR + { severity_number: 4, count: 30 }, // FATAL + ], + }; + }, + + /** + * Fetch traces (for compatibility with full client) + * @returns {Promise<Object>} Traces and next page token + */ + fetchTraces: async () => { + await new Promise((resolve) => setTimeout(resolve, delay)); + return { traces: [], next_page_token: null }; + }, + + /** + * Fetch traces analytics (for compatibility with full client) + * @returns {Promise<Array>} Analytics data + */ + fetchTracesAnalytics: async () => { + await new Promise((resolve) => setTimeout(resolve, delay)); + return []; + }, + + /** + * Fetch a single trace by ID (for compatibility with full client) + * @param {string} traceId - Trace ID + * @returns {Promise<Object>} Trace details + */ + fetchTrace: async (traceId) => { + await new Promise((resolve) => setTimeout(resolve, delay)); + return { traceId, spans: [] }; + }, + + /** + * Fetch available services (for compatibility with full client) + * @returns {Promise<Array>} List of services + */ + fetchServices: async () => { + await new Promise((resolve) => setTimeout(resolve, delay)); + return []; + }, + + /** + * Fetch operations for a service (for compatibility with full client) + * @param {string} serviceName - Service name + * @returns {Promise<Array>} List of operations + */ + fetchOperations: async (serviceName) => { + await new Promise((resolve) => setTimeout(resolve, delay)); + return []; + }, + + /** + * Fetch metrics (for compatibility with full client) + * @returns {Promise<Object>} Metrics + */ + fetchMetrics: async () => { + await new Promise((resolve) => setTimeout(resolve, delay)); + return { metrics: [] }; + }, + + /** + * Fetch metric by name and type (for compatibility with full client) + * @returns {Promise<Array>} Metric results + */ + fetchMetric: async () => { + await new Promise((resolve) => setTimeout(resolve, delay)); + return []; + }, + + /** + * Fetch metric search metadata (for compatibility with full client) + * @returns {Promise<Object>} Metadata + */ + fetchMetricSearchMetadata: async () => { + await new Promise((resolve) => setTimeout(resolve, delay)); + return {}; + }, + + /** + * Fetch usage data (for compatibility with full client) + * @returns {Promise<Object>} Usage data + */ + fetchUsageData: async () => { + await new Promise((resolve) => setTimeout(resolve, delay)); + return {}; + }, + + /** + * Get all fetched logs so far (useful for debugging) + * @returns {Array} All logs that have been fetched + */ + getAllFetchedLogs: () => fetchedLogs, + + /** + * Reset the mock client state + */ + reset: () => { + fetchedLogs = []; + }, + }; +} ``` </details> 1. Enable `observability_features` feature flag ([http://127.0.0.1:3000/rails/features/](http://127.0.0.1:3000/rails/features/)) 2. Navigate to **Project** \> **Monitor** \> **Logs** 1. If using the mock patch add `?mock` to url, for example [http://127.0.0.1:3000/flightjs/Flight/-/logs?mock](http://127.0.0.1:3000/flightjs/Flight/-/logs?mock) 3. Scroll to the bottom of the list ## Migration path If: * there is no performance harm from displaying all results on load, show all with no pagination. else if: * comparison between items using cmd F or similar is important, use a [load more](https://design.gitlab.com/patterns/loading#loading-more) button. else if: * the number of pages is known at the start, use [offset pagination](https://design.gitlab.com/components/pagination/#offset-pagination). else: * Use [keyset pagination](https://design.gitlab.com/components/pagination#keyset-pagination). ## Next steps * [ ] Review the migration path above and decide on the appropriate pattern * [ ] Schedule the work for %&quot;19.0&quot; or %&quot;19.1&quot; * [ ] If there are special circumstances please request help before %&quot;19.0&quot; * [ ] Implement the change * [ ] GlInfiniteScroll will be removed from the gitlab-ui package at the end of %&quot;19.1&quot; We're (~&quot;group::design system&quot;) here to help in any way we can. If you have questions, please reach out to @danmh or @sdejonge in this issue or in [#g_pajamas-design-system](https://gitlab.enterprise.slack.com/archives/CDNNDD1T3).