UI: Fix version-history serializer and update mirage to reflect real API (#15362)

* Fix version-history serializer and update mirage to reflect real API

* add missing periods

* fix tests

Co-authored-by: Claire Bontempo <cbontempo@hashicorp.com>

ui/app/components/clients/current.js

@@ -84,10 +84,10 @@ export default class Current extends Component {
     }
     if (this.upgradeDuringCurrentMonth.length === 2) {
       let versions = this.upgradeDuringCurrentMonth.map((upgrade) => upgrade.id).join(' and ');
-      return `Vault was upgraded to ${versions} during this month`;
+      return `Vault was upgraded to ${versions} during this month.`;
     } else {
       let version = this.upgradeDuringCurrentMonth[0];
-      return `Vault was upgraded to ${version.id} on this month`;
+      return `Vault was upgraded to ${version.id} on this month.`;
     }
   }
 

ui/app/serializers/clients/version-history.js

@@ -1,11 +1,13 @@
 import ApplicationSerializer from '../application';
 
 export default ApplicationSerializer.extend({
-  normalizeFindAllResponse(store, primaryModelClass, payload, id, requestType) {
+  normalizeItems(payload) {
-    let normalizedPayload = [];
+    if (payload.data.keys && Array.isArray(payload.data.keys)) {
-    payload.keys.forEach((key) => {
+      return payload.data.keys.map((key) => {
-      normalizedPayload.push({ id: key, ...payload.key_info[key] });
+        let model = payload.data.key_info[key];
-    });
+        model.id = key;
-    return this._super(store, primaryModelClass, normalizedPayload, id, requestType);
+        return model;
+      });
+    }
   },
 });

ui/mirage/handlers/clients.js

@@ -654,6 +654,11 @@ const handleMockQuery = (queryStartTimestamp, queryEndTimestamp, monthlyData) =>
   const dataEarliestMonth = parseAPITimestamp(monthlyData[0].timestamp);
   const dataLatestMonth = parseAPITimestamp(monthlyData[monthlyData.length - 1].timestamp);
   let transformedMonthlyArray = [...monthlyData];
+  // If query end is before last month in array, return only through end query
+  if (isBefore(queryEndDate, dataLatestMonth)) {
+    let index = monthlyData.findIndex((e) => isSameMonth(queryEndDate, parseAPITimestamp(e.timestamp)));
+    return transformedMonthlyArray.slice(0, index + 1);
+  }
   // If query wants months previous to the data we have, return the full array
   if (isBefore(queryStartDate, dataEarliestMonth)) {
     return transformedMonthlyArray;
@@ -661,12 +666,7 @@ const handleMockQuery = (queryStartTimestamp, queryEndTimestamp, monthlyData) =>
   // If query is after earliest month in array, return latest to month that matches query
   if (isAfter(queryStartDate, dataEarliestMonth)) {
     let index = monthlyData.findIndex((e) => isSameMonth(queryStartDate, parseAPITimestamp(e.timestamp)));
-    transformedMonthlyArray = transformedMonthlyArray.slice(0, index + 1);
+    return transformedMonthlyArray.slice(index);
-  }
-  // If query end is before last month in array, return only through end query
-  if (isBefore(queryEndDate, dataLatestMonth)) {
-    let index = monthlyData.findIndex((e) => isSameMonth(queryEndDate, parseAPITimestamp(e.timestamp)));
-    transformedMonthlyArray = transformedMonthlyArray.slice(index);
   }
   return transformedMonthlyArray;
 };
@@ -675,23 +675,25 @@ export default function (server) {
   // 1.10 API response
   server.get('sys/version-history', function () {
     return {
-      keys: ['1.9.0', '1.9.1', '1.9.2', '1.10.1'],
+      data: {
-      key_info: {
+        keys: ['1.9.0', '1.9.1', '1.9.2', '1.10.1'],
-        '1.9.0': {
+        key_info: {
-          previous_version: null,
+          '1.9.0': {
-          timestamp_installed: '2021-07-03T10:23:16Z',
+            previous_version: null,
-        },
+            timestamp_installed: formatISO(sub(new Date(), { months: 4 })),
-        '1.9.1': {
+          },
-          previous_version: '1.9.0',
+          '1.9.1': {
-          timestamp_installed: '2021-08-03T10:23:16Z',
+            previous_version: '1.9.0',
-        },
+            timestamp_installed: formatISO(sub(new Date(), { months: 3 })),
-        '1.9.2': {
+          },
-          previous_version: '1.9.1',
+          '1.9.2': {
-          timestamp_installed: '2021-09-03T10:23:16Z',
+            previous_version: '1.9.1',
-        },
+            timestamp_installed: formatISO(sub(new Date(), { months: 2 })),
-        '1.10.1': {
+          },
-          previous_version: '1.9.2',
+          '1.10.1': {
-          timestamp_installed: '2021-10-03T10:23:16Z',
+            previous_version: '1.9.2',
+            timestamp_installed: formatISO(sub(new Date(), { months: 1 })),
+          },
         },
       },
     };

ui/tests/acceptance/client-history-test.js

@@ -15,6 +15,7 @@ import {
   SELECTORS,
   sendResponse,
 } from '../helpers/clients';
+import { waitFor } from '@ember/test-waiters';
 
 const searchSelect = create(ss);
 
@@ -210,7 +211,7 @@ module('Acceptance | clients history tab', function (hooks) {
     assert.dom('[data-test-stat-text="total-clients"] .stat-value').hasText('15');
     assert.dom('[data-test-stat-text="entity-clients"] .stat-value').hasText('5');
     assert.dom('[data-test-stat-text="non-entity-clients"] .stat-value').hasText('10');
-    await settled();
+    await waitFor('[data-test-horizontal-bar-chart]');
     assert.dom('[data-test-horizontal-bar-chart]').exists('Shows attribution bar chart');
     assert.dom('[data-test-top-attribution]').includesText('Top auth method');
 
@@ -266,11 +267,13 @@ module('Acceptance | clients history tab', function (hooks) {
       this.get('/v1/sys/internal/counters/config', () => sendResponse(config));
       this.get('/v1/sys/version-history', () =>
         sendResponse({
-          keys: ['1.9.0'],
+          data: {
-          key_info: {
+            keys: ['1.9.0'],
-            '1.9.0': {
+            key_info: {
-              previous_version: null,
+              '1.9.0': {
-              timestamp_installed: formatRFC3339(addMonths(new Date(), -2)),
+                previous_version: null,
+                timestamp_installed: formatRFC3339(addMonths(new Date(), -2)),
+              },
             },
           },
         })