Use new build log endpoints for some speed improvements

Author: fauxpark

src/App.vue

@@ -13,7 +13,7 @@
     <BuildList :list="passingKeyboards" :filter="filter" @show-error-pane="showErrors">
       Builds Passing
     </BuildList>
-    <ErrorPane :visible="showErrorPane" :error-log="errorLog" @backdrop-clicked="hideErrors" />
+    <ErrorPane :visible="showErrorPane" :error-log="errorLog" :loading="errorLogLoading" @backdrop-clicked="hideErrors" />
   </div>
 </template>
 
@@ -35,34 +35,67 @@ const filter = ref('')
 const passingKeyboards = ref([])
 const failingKeyboards = ref([])
 const errorLog = ref('')
+const errorLogLoading = ref(false)
 const showErrorPane = ref(false)
 
 onMounted(() => {
-  downloadBuildLog()
+  loadBuildSummary()
 })
 
-function downloadBuildLog() {
+async function loadBuildSummary() {
   const start = performance.now()
-  axios
-    .get(`${import.meta.env.VITE_QMK_API_BASEURL}/v1/keyboards/build_log`, {
-      onDownloadProgress: (e) => {
-        loadProgress.value = Math.floor((e.loaded / e.total) * 100)
-      }
-    })
-    .then((res) => {
-      if (res.status === 200) {
-        buildLog = res.data
-        binKeyboards()
+
+  try {
+    const { status, data } = await axios.get(
+      `${import.meta.env.VITE_QMK_API_BASEURL}/v1/keyboards/build_summary`,
+      {
+        onDownloadProgress: (e) => {
+          loadProgress.value = Math.floor((e.loaded / e.total) * 100)
+        }
       }
-    })
-    .then(() => {
-      loading.value = false
-      loadTime.value = ((performance.now() - start) / 1000).toFixed(2)
-    })
+    )
+
+    if (status === 200) {
+      buildLog = data
+      binKeyboards()
+    }
+  } catch (e) {
+    console.log(e.message)
+  }
+
+  loading.value = false
+  loadTime.value = ((performance.now() - start) / 1000).toFixed(2)
+}
+
+async function loadBuildLog(keyboard) {
+  errorLogLoading.value = true
+
+  try {
+    const { status, statusText, data } = await axios.get(
+      `${import.meta.env.VITE_QMK_API_BASEURL}/v1/keyboards/${keyboard}/build_log`
+    )
+
+    if (status === 200) {
+      buildLog[keyboard].message = data.message
+      errorLog.value = data.message
+    } else {
+      buildLog[keyboard].message = `ERROR ${status}: ${statusText}`
+    }
+  } catch (e) {
+    buildLog[keyboard].message = `ERROR: ${e.message}`
+  }
+
+  errorLogLoading.value = false;
+  errorLog.value = buildLog[keyboard].message
 }
 
 function showErrors(key) {
-  errorLog.value = buildLog[key].message
+  if (!('message' in buildLog[key])) {
+    loadBuildLog(key)
+  } else {
+    errorLog.value = buildLog[key].message
+  }
+
   showErrorPane.value = true
 }
 

src/components/ErrorPane.vue

@@ -8,7 +8,8 @@
         <h4>Detailed Error Log</h4>
       </div>
       <div id="error-text">
-        <pre v-html="colorizedErrorLog"></pre>
+        <p v-if="loading" id="error-loading">Loading…</p>
+        <pre v-else v-html="colorizedErrorLog"></pre>
       </div>
     </div>
   </Transition>
@@ -26,6 +27,10 @@ const props = defineProps({
     type: String,
     required: true
   },
+  loading: {
+    type: Boolean,
+    required: true
+  },
   visible: {
     type: Boolean,
     required: true
@@ -65,6 +70,9 @@ const colorizedErrorLog = computed(() => ansiConverter.toHtml(props.errorLog))
   overflow: auto;
   margin: 6px;
 }
+#error-loading {
+  text-align: center;
+}
 
 #backdrop {
   position: fixed;