Merge pull request #434 from cailloumajor/performance-api-url-params

Rework performance API parameters
cailloumajor · Sep 1, 2023 · d05476f · d05476f
2 parents ef3ebdd + cd716a8
commit d05476f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 21 deletions.
diff --git a/integration/e2e-tests-server.mjs b/integration/e2e-tests-server.mjs
@@ -62,6 +62,9 @@ app.get("/compute-api/timeline/*", (req, res) => {
   res.type("application/msgpack")
   res.send(Buffer.from(timelineData, "base64"))
 })
+app.get("/compute-api/performance/*", (req, res) => {
+  res.json(0)
+})
 
 app.put("/change-origin", express.text(), (req, res) => {
   changeOrigin = req.body

diff --git a/src/components/TimelineDisplay.vue b/src/components/TimelineDisplay.vue
@@ -146,16 +146,17 @@ onMounted(() => {
     200,
   )
 
-  useResizeObserver(cardElem, (entries) => {
-    for (const entry of entries) {
-      if (entry.contentBoxSize?.length) {
-        cardHeight.value = entry.contentBoxSize[0].blockSize
-        onResize(entry.contentBoxSize[0])
+  setTimeout(() => {
+    useResizeObserver(cardElem, (entries) => {
+      for (const entry of entries) {
+        if (entry.contentBoxSize?.length) {
+          cardHeight.value = entry.contentBoxSize[0].blockSize
+          onResize(entry.contentBoxSize[0])
+        }
       }
-    }
-  })
-
-  setInterval(drawTimeline, timelineRefreshMillis)
+    })
+    setInterval(drawTimeline, timelineRefreshMillis)
+  }, 200)
 })
 
 await init(wasmUrl)

diff --git a/src/components/__tests__/TimelineDisplay.cy.ts b/src/components/__tests__/TimelineDisplay.cy.ts
@@ -117,9 +117,6 @@ describe("TimelineDisplay", () => {
       targetCycleTime: 84.653,
     })
 
-    // The first request is issued before the store has refreshed, so assert on
-    // the second request.
-    cy.wait("@timeline-request")
     cy.wait("@timeline-request")
       .its("request.query")
       .should("include", { targetCycleTime: "84.653" })

diff --git a/src/pages/LineDashboard.vue b/src/pages/LineDashboard.vue
@@ -315,7 +315,12 @@ const timelineLegend = computed<Status[]>(() => [
 
 const updatePerformance = () => {
   mande(`${computeApiPath}/performance`)
-    .get<number>(props.id, { headers: { "client-time": dayjs().format() } })
+    .get<number>(props.id, {
+      query: {
+        clientTime: dayjs().format(),
+        targetCycleTime: campaignDataStore.targetCycleTime,
+      },
+    })
     .then((value) => {
       performanceError.value = false
       performanceRatio.value = value
@@ -325,8 +330,11 @@ const updatePerformance = () => {
       performanceError.value = true
     })
 }
-updatePerformance()
-setInterval(updatePerformance, performanceRefreshMillis)
+
+setTimeout(() => {
+  updatePerformance()
+  setInterval(updatePerformance, performanceRefreshMillis)
+}, 1000)
 
 machineDataLinkBoot(machineData, props.id)
 </script>

diff --git a/src/pages/__tests__/LineDashboard.cy.ts b/src/pages/__tests__/LineDashboard.cy.ts
@@ -422,31 +422,49 @@ describe("LineDashboard", () => {
 
       mountComponent()
 
+      cy.tick(1100)
+
       cy.dataCy("metric-4").dataCy("value").should("have.text", "ERR")
       cy.dataCy("metric-4").dataCy("color").should("have.text", "negative")
     })
 
     it("passes current time to compute API", () => {
       mountComponent()
 
+      cy.tick(1100)
       cy.wait("@performance-request")
-        .its("request.headers")
-        .should("include", { "client-time": "1984-12-09T04:30:00+03:00" })
+        .its("request.query")
+        .should("include", { clientTime: "1984-12-09T04:30:01+03:00" })
 
       cy.tick(performanceRefreshMillis * 1.1)
       cy.wait("@performance-request")
-        .its("request.headers")
-        .should("include", { "client-time": "1984-12-09T04:31:00+03:00" })
+        .its("request.query")
+        .should("include", { clientTime: "1984-12-09T04:31:01+03:00" })
 
       cy.tick(performanceRefreshMillis * 1.1)
       cy.wait("@performance-request")
-        .its("request.headers")
-        .should("include", { "client-time": "1984-12-09T04:32:00+03:00" })
+        .its("request.query")
+        .should("include", { clientTime: "1984-12-09T04:32:01+03:00" })
+    })
+
+    it("passes target cycle time to compute API", () => {
+      mountComponent()
+
+      cy.wrap(useCampaignDataStore()).invoke("$patch", {
+        targetCycleTime: 64.46,
+      })
+
+      cy.tick(1100)
+
+      cy.wait("@performance-request")
+        .its("request.query")
+        .should("include", { targetCycleTime: "64.46" })
     })
 
     it("sets the metric text", () => {
       mountComponent()
 
+      cy.tick(1100)
       cy.dataCy("metric-4").dataCy("value").should("have.text", "12.3")
 
       cy.tick(performanceRefreshMillis * 1.1)
@@ -459,6 +477,7 @@ describe("LineDashboard", () => {
     it("sets the metric color", () => {
       mountComponent()
 
+      cy.tick(1100)
       cy.dataCy("metric-4").dataCy("color").should("have.text", "negative")
 
       cy.tick(performanceRefreshMillis * 1.1)