Merge branch 'psi-funtional-line-component' into 'master'

Speed up job log rendering

See merge request gitlab-org/gitlab!35504

app/assets/javascripts/jobs/components/log/line.vue

@@ -2,9 +2,7 @@
 import LineNumber from './line_number.vue';
 
 export default {
-  components: {
-    LineNumber,
-  },
+  functional: true,
   props: {
     line: {
       type: Object,
@@ -15,18 +13,28 @@ export default {
       required: true,
     },
   },
+  render(h, { props }) {
+    const { line, path } = props;
+
+    const chars = line.content.map(content => {
+      return h(
+        'span',
+        {
+          class: ['ws-pre-wrap', content.style],
+        },
+        content.text,
+      );
+    });
+
+    return h('div', { class: 'js-line log-line' }, [
+      h(LineNumber, {
+        props: {
+          lineNumber: line.lineNumber,
+          path,
+        },
+      }),
+      ...chars,
+    ]);
+  },
 };
 </script>
-
-<template>
-  <div class="js-line log-line">
-    <line-number :line-number="line.lineNumber" :path="path" />
-    <span
-      v-for="(content, i) in line.content"
-      :key="i"
-      :class="content.style"
-      class="ws-pre-wrap"
-      >{{ content.text }}</span
-    >
-  </div>
-</template>

app/assets/javascripts/jobs/components/log/line_number.vue

 <script>
-import { GlLink } from '@gitlab/ui';
-
 export default {
-  components: {
-    GlLink,
-  },
+  functional: true,
   props: {
     lineNumber: {
       type: Number,
@@ -15,41 +11,24 @@ export default {
       required: true,
     },
   },
-  computed: {
-    /**
-     * Builds the url for each line number
-     *
-     * @returns {String}
-     */
-    buildLineNumber() {
-      return `${this.path}#${this.lineNumberId}`;
-    },
-    /**
-     * Array indexes start with 0, so we add 1
-     * to create the line number
-     *
-     * @returns {Number} the line number
-     */
-    parsedLineNumber() {
-      return this.lineNumber + 1;
-    },
+  render(h, { props }) {
+    const { lineNumber, path } = props;
 
-    /**
-     * Creates the anchor for each link
-     *
-     * @returns {String}
-     */
-    lineNumberId() {
-      return `L${this.parsedLineNumber}`;
-    },
+    const parsedLineNumber = lineNumber + 1;
+    const lineId = `L${parsedLineNumber}`;
+    const lineHref = `${path}#${lineId}`;
+
+    return h(
+      'a',
+      {
+        class: 'gl-link d-inline-block text-right line-number flex-shrink-0',
+        attrs: {
+          id: lineId,
+          href: lineHref,
+        },
+      },
+      parsedLineNumber,
+    );
   },
 };
 </script>
-<template>
-  <gl-link
-    :id="lineNumberId"
-    class="d-inline-block text-right line-number flex-shrink-0"
-    :href="buildLineNumber"
-    >{{ parsedLineNumber }}</gl-link
-  >
-</template>

changelogs/unreleased/psi-funtional-line-component.yml

+---
+title: Performance improvement for job logs
+merge_request: 35504
+author:
+type: performance