Add info nudge for cloudflare

kukukikits · Nov 8, 2019 · e88bded · e88bded
1 parent ce1912c
commit e88bded
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 35 deletions.
diff --git a/admin/src/react-components/data-transfer.js b/admin/src/react-components/data-transfer.js
@@ -37,8 +37,6 @@ const workerScript = (workerDomain, assetsDomain) => {
   const STORAGE_HOST = "${document.location.origin}";
   const ASSETS_HOST = "https://${assetsDomain}";
 
-  let cache = caches.default;
-  
   addEventListener("fetch", e => {
     const request = e.request;
     const origin = request.headers.get("Origin");
@@ -47,14 +45,11 @@ const workerScript = (workerDomain, assetsDomain) => {
     const isCorsProxy = request.url.indexOf(CORS_PROXY_HOST) === 0;
     const proxyUrl = new URL(isCorsProxy ? CORS_PROXY_HOST : PROXY_HOST);
     const targetPath = request.url.substring((isCorsProxy ? CORS_PROXY_HOST : PROXY_HOST).length + 1);
-    let useCache = false;
     let targetUrl;
   
     if (targetPath.indexOf("files/") === 0) {
-      useCache = true;
       targetUrl = \`\${STORAGE_HOST}/\${targetPath}\`;
     } else if (targetPath.indexOf("hubs/") === 0 || targetPath.indexOf("spoke/") === 0 || targetPath.indexOf("admin/") === 0) {
-      useCache = true;
       targetUrl = \`\${ASSETS_HOST}/\${targetPath}\`;
     } else {
       if (!isCorsProxy) {
@@ -72,28 +67,7 @@ const workerScript = (workerDomain, assetsDomain) => {
     requestHeaders.delete("Origin"); // Some domains disallow access from improper Origins
   
     e.respondWith((async () => {
-      let cacheReq;
-      let res;
-      let fetched = false;
-  
-      if (useCache) {
-        cacheReq = new Request(targetUrl, { headers: requestHeaders, method: request.method, redirect: "manual" });
-        res = await cache.match(cacheReq, {});
-      }
-  
-      if (!res) {
-        res = await fetch(targetUrl, { headers: requestHeaders, method: request.method, redirect: "manual", referrer: request.referrer, referrerPolicy: request.referrerPolicy });      
-        fetched = true;
-      }
-  
-      let body = res.body;
-  
-      if (useCache && fetched) {
-        const [body1, body2] = res.body.tee();
-        body = body2;
-        await cache.put(cacheReq, new Response(body1, { status: res.status, statusText: res.statusText, headers: res.headers }));
-      }
-  
+      const res = await fetch(targetUrl, { headers: requestHeaders, method: request.method, redirect: "manual", referrer: request.referrer, referrerPolicy: request.referrerPolicy });      
       const responseHeaders = new Headers(res.headers);
       const redirectLocation = responseHeaders.get("Location") || responseHeaders.get("location");
   
@@ -116,7 +90,7 @@ const workerScript = (workerDomain, assetsDomain) => {
       responseHeaders.set("Vary", "Origin");
       responseHeaders.set('X-Content-Type-Options', "nosniff");
   
-      return new Response(body, { status: res.status, statusText: res.statusText, headers: responseHeaders });  
+      return new Response(res.body, { status: res.status, statusText: res.statusText, headers: responseHeaders });  
     })());
   });`;
 };
@@ -203,8 +177,8 @@ class DataTransferComponent extends Component {
             <Typography variant="body2" gutterBottom>
               Hubs Cloud uses bandwidth from your cloud provider to deliver content.
               <br />
-              You can potentially reduce your data transfer costs by switching your CDN to Cloudflare, which does not
-              charge for data transfer costs to your users.
+              You can reduce your data transfer costs by switching your CDN to Cloudflare, which does not charge for
+              data transfer costs to your users.
             </Typography>
             <Typography variant="subheading" gutterBottom className={this.props.classes.section}>
               Worker Setup
@@ -249,6 +223,9 @@ class DataTransferComponent extends Component {
                   In the &apos;SSL/TLS&apos; section of your Cloudflare domain settings, set the encryption mode to{" "}
                   <b>Full</b>.
                 </li>
+                <li>
+                  In the &apos;Caching&apos; section of your Cloudflare domain settings, turn <b>off</b> Always Online.
+                </li>
                 <li>
                   In the Workers section of your Cloudflare domain, launch the editor, click &quot;Add Script&quot; on
                   the left and name it <pre>hubs-worker</pre>
@@ -293,6 +270,10 @@ class DataTransferComponent extends Component {
                   Once *both* links above are working, enable the &apos;Use Cloudflare Worker&apos; setting below and
                   click &apos;Save&apos; on this page.
                 </li>
+                <li>
+                  If you need more than 100,000 requests per day for content, you&apos;ll need to add a Worker Unlimited
+                  Subscription for an additional $5/mo.
+                </li>
               </ol>
               <FormControlLabel
                 control={

diff --git a/admin/src/react-components/system-editor.js b/admin/src/react-components/system-editor.js
@@ -9,9 +9,10 @@ import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import Warning from "@material-ui/icons/Warning";
+import Info from "@material-ui/icons/Info";
 import { fetchReticulumAuthenticated } from "hubs/src/utils/phoenix-utils";
 import withCommonStyles from "../utils/with-common-styles";
-import { getAdminInfo } from "../utils/ita";
+import { getAdminInfo, getConfig } from "../utils/ita";
 
 // Send quota to use as heuristic for checking if in SES sandbox
 // https://forums.aws.amazon.com/thread.jspa?threadID=61090
@@ -26,7 +27,9 @@ class SystemEditorComponent extends Component {
 
   async componentDidMount() {
     const adminInfo = await getAdminInfo();
-    this.setState({ adminInfo });
+    const retConfig = await getConfig("reticulum");
+
+    this.setState({ adminInfo, retConfig });
     this.updateReticulumMeta();
   }
 
@@ -38,11 +41,18 @@ class SystemEditorComponent extends Component {
   render() {
     const needsAvatars = this.state.reticulumMeta.repo && !this.state.reticulumMeta.repo.avatar_listings.any;
     const needsScenes = this.state.reticulumMeta.repo && !this.state.reticulumMeta.repo.scene_listings.any;
+
     const isInSESSandbox =
       this.state.adminInfo &&
       this.state.adminInfo.using_ses &&
       this.state.adminInfo.ses_max_24_hour_send <= MAX_AWS_SES_QUOTA_FOR_SANDBOX;
 
+    const isUsingCloudflare =
+      this.state.adminInfo &&
+      this.state.retConfig &&
+      this.state.retConfig.phx &&
+      this.state.retConfig.phx.cors_proxy_url_host === `cors-proxy.${this.state.adminInfo.worker_domain}`;
+
     return (
       <Card className={this.props.classes.container}>
         <Title title="Hubs Cloud" />
@@ -124,6 +134,18 @@ class SystemEditorComponent extends Component {
                   />
                 </ListItem>
               )}
+              {!isUsingCloudflare && (
+                <ListItem>
+                  <ListItemIcon className={this.props.classes.infoIcon}>
+                    <Info />
+                  </ListItemIcon>
+                  <ListItemText
+                    inset
+                    primary="You are using your cloud provider to serve content."
+                    secondary="You can reduce data transfer costs by using Cloudflare's CDN to serve content. Choose 'Data Transfer' on the left for more info."
+                  />
+                </ListItem>
+              )}
             </List>
           )}
         </CardContent>

diff --git a/admin/src/utils/with-common-styles.js b/admin/src/utils/with-common-styles.js
@@ -1,4 +1,4 @@
-import { green, amber } from "@material-ui/core/colors";
+import { blue, green, amber } from "@material-ui/core/colors";
 
 const getCommon = theme => ({
   container: {
@@ -19,6 +19,10 @@ const getCommon = theme => ({
     width: "100%"
   },
 
+  infoIcon: {
+    color: blue[200]
+  },
+
   warningIcon: {
     color: amber[700]
   },

diff --git a/habitat/hooks/run b/habitat/hooks/run
@@ -40,8 +40,8 @@ AWSCLI={{ pkgPathFor "core/aws-cli" }}/bin/aws
 
 if [[ "{{ cfg.deploy.type }}" == "s3" ]] ;
 then
-  $AWSCLI s3 sync --region {{ cfg.deploy.region }} --acl public-read --cache-control "max-age=31556926" --include "*" --exclude "*.wasm" "$TEMP_DIST_PATH/assets" "s3://{{ cfg.deploy.target }}/hubs/assets"
-  $AWSCLI s3 sync --region {{ cfg.deploy.region }} --acl public-read --cache-control "max-age=31556926" --exclude "*" --include "*.wasm" --content-type "application/wasm" "$TEMP_DIST_PATH/assets" "s3://{{ cfg.deploy.target }}/hubs/assets"
+  $AWSCLI s3 sync --region {{ cfg.deploy.region }} --acl public-read --cache-control "public, max-age=31536000" --include "*" --exclude "*.wasm" "$TEMP_DIST_PATH/assets" "s3://{{ cfg.deploy.target }}/hubs/assets"
+  $AWSCLI s3 sync --region {{ cfg.deploy.region }} --acl public-read --cache-control "public, max-age=31536000" --exclude "*" --include "*.wasm" --content-type "application/wasm" "$TEMP_DIST_PATH/assets" "s3://{{ cfg.deploy.target }}/hubs/assets"
 
   $AWSCLI s3 sync --region {{ cfg.deploy.region }} --acl public-read --cache-control "no-cache" --delete "$TEMP_DIST_PATH/pages" "s3://{{ cfg.deploy.target }}/hubs/pages/latest"
   $AWSCLI s3 sync --region {{ cfg.deploy.region }} --acl public-read --cache-control "no-cache" --delete "$TEMP_DIST_PATH/pages" "s3://{{ cfg.deploy.target }}/hubs/pages/releases/{{ pkg.version }}.{{ pkg.release }}"