[Lorenz] Load dependency graph from GS bucket, fallback to localhost

Currently we only load from localhost. That will not work in production,
so first try to access a graph from gs://clank-dependency-graphs, then
fall back to localhost (which cannot GET from the bucket due to CORS).

Bug: 1111056
Change-Id: Idf06dfeb6eb49047e7c4c54f60c99e156f0387d7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2327463
Commit-Queue: Henrique Nakashima <hnakashima@chromium.org>
Reviewed-by: Mohamed Heikal <mheikal@chromium.org>
Cr-Commit-Position: refs/heads/master@{#793703}

tools/android/dependency_analysis/js/src/class_view.js

@@ -2,17 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// For ease of development, we serve our testing data on localhost:8888. This
-// should be changed as we find other ways to serve the assets (eg. user upload
-// or hosted externally).
-const LOCALHOST = 'http://localhost:8888';
-
 import Vue from 'vue';
 import ClassGraphPage from './vue_components/class_graph_page.vue';
+import {loadGraph} from './load_graph.js';
 import * as d3 from 'd3';
 
 document.addEventListener('DOMContentLoaded', () => {
-  d3.json(`${LOCALHOST}/json_graph.txt`).then(data => {
+  loadGraph().then(data => {
     new Vue({
       el: '#class-graph-page',
       render: createElement => createElement(
@@ -24,5 +20,7 @@ document.addEventListener('DOMContentLoaded', () => {
           },
       ),
     });
+  }).catch(e => {
+    document.write("Error loading graph.");
   });
 });

tools/android/dependency_analysis/js/src/load_graph.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// For ease of development, we load the graph from this hardcoded location by
+// default. This should be changed when a snapshot picker is implemented.
+const LATEST_GRAPH = 'https://storage.googleapis.com/clank-dependency-graphs/latest.json';
+
+// We serve our testing data on localhost:8888 as a
+// fallback that will be triggered if CORS blocks the request. In production,
+// the request should go through as the domain is allowed. In localhost, CORS
+// will always block the request.
+const LOCALHOST_GRAPH = 'http://localhost:8888/json_graph.txt';
+
+import * as d3 from 'd3';
+
+/**
+ * Retrieve the graph to show.
+ * @return {Promise} Promise resolved with the graph data.
+ */
+async function loadGraph() {
+  try {
+    // First, try LATEST_GRAPH from Cloud, which should work from production but
+    // fail in local development.
+    const data = await d3.json(LATEST_GRAPH);
+    console.log(`Loaded graph from ${LATEST_GRAPH}`);
+    return data;
+  } catch (e) {
+    // Then try LOCALHOST_GRAPH from localhost, which should work in local
+    // development.
+    const data = await d3.json(LOCALHOST_GRAPH);
+    console.log(`Loaded graph from ${LOCALHOST_GRAPH}`);
+    return data;
+  }
+}
+
+export {
+  loadGraph,
+};

tools/android/dependency_analysis/js/src/package_view.js

@@ -2,17 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// For ease of development, we serve our testing data on localhost:8888. This
-// should be changed as we find other ways to serve the assets (eg. user upload
-// or hosted externally).
-const LOCALHOST = 'http://localhost:8888';
-
 import Vue from 'vue';
 import PackageGraphPage from './vue_components/package_graph_page.vue';
+import {loadGraph} from './load_graph.js';
 import * as d3 from 'd3';
 
 document.addEventListener('DOMContentLoaded', () => {
-  d3.json(`${LOCALHOST}/json_graph.txt`).then(data => {
+  loadGraph().then(data => {
     new Vue({
       el: '#package-graph-page',
       render: createElement => createElement(
@@ -24,5 +20,7 @@ document.addEventListener('DOMContentLoaded', () => {
           },
       ),
     });
+  }).catch(e => {
+    document.write("Error loading graph.");
   });
 });