Cache JSON data

Related to gitlab-org/gitlab#349613 (closed)

This is a second try after reverting https://gitlab.com/gitlab-org/growth/product-intelligence/metric-dictionary/-/merge_requests/21.

The original MR loaded the data/manifest.json file using:

import dataManifest from '@/static/data/manifest.json'

This import was being cached, and after reloading the data files, the manifest was not getting updated. So the data URLs were malformed. To fix this, I'm explicitly busting the cache for this file (changes at https://gitlab.com/gitlab-org/growth/product-intelligence/metric-dictionary/-/merge_requests/22/diffs?commit_id=ab31b89ac354cf7257002507a4bf36a77aae4455).

How to set up and validate locally

1. Comment items in the SERVICE_PING_METRIC_FOLDERS array at lib/loader.rb and run bin/seed to simulate changes in the data that would generate a different hash.
2. Build the JSON data and print the current hash:

   bin/build && cat web/static/data/manifest.json

3. Restart the built-in server in production mode. On /web. This replicates our deploy job.

   yarn build && yarn generate && yarn start

4. In the browser, verify that the request for /data/manifest.json returns the same hashes as seen on step #2.
5. In the browser, verify that the data files are properly cached, until the data changes.
6. Repeat the steps generating different hashes, and the manifest should be up-to-date every time.

How to replicate the former error

Follow the same steps above after making the following changes to the code (going back to the former method of loading the manifest):

--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -3,6 +3,7 @@ import { GlLabel, GlButton } from '@gitlab/ui'
 import DataTable from '@/mixins/data-table'
 import LocalStorage from '@/mixins/local-storage'
 import getDataManifest from '@/assets/get-data-manifest'
+import dataManifest from '@/static/data/manifest.json'

 export default {
   name: 'ServicePingPage',
@@ -219,7 +220,7 @@ export default {

   created() {
     this.dataUrl = new URL(
-      `data/service_ping.${this.dataManifest.service_ping}.json`,
+      `data/service_ping.${dataManifest.service_ping}.json`,
       location.origin
     ).toString()
   },