Data limits UI

src/server_manager/bower.json

@@ -25,7 +25,6 @@
     "iron-pages": "PolymerElements/iron-pages#^2.0.1",
     "outline-i18n": "Jigsaw-Code/outline-i18n#^0.0.7",
     "paper-button": "PolymerElements/paper-button#^2.0.0",
-    "paper-checkbox": "PolymerElements/paper-checkbox#^2.0.4",
     "paper-dialog": "PolymerElements/paper-dialog#^2.0.1",
     "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0",
     "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^2.0.2",
@@ -36,6 +35,8 @@
     "paper-progress": "PolymerElements/paper-progress#^2.0.1",
     "paper-tabs": "PolymerElements/paper-tabs#^2.1.1",
     "paper-toast": "PolymerElements/paper-toast#^2.0.0",
+    "paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
+    "paper-tooltip": "PolymerElements/paper-tooltip#^2.0.0",
     "web-animations-js": "web-animations/web-animations-js",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^v1.1.0"
   }

src/server_manager/messages/en.json

@@ -25,6 +25,11 @@
   "confirmation-server-destroy-title": "Destroy Server?",
   "confirmation-server-remove": "This action removes your server from the Outline Manager, but does not block proxy access to users. You will still need to manually delete the Outline server from your host machine.",
   "confirmation-server-remove-title": "Remove Server?",
+  "data-limits": "Data limits",
+  "data-limits-description": "Set a 30 day trailing data transfer limit for access keys on this server. Available at least until {date}.",
+  "data-limits-dialog-text": "Go to the Settings tab to set a data transfer limit for access keys on this server.",
+  "data-limits-dialog-title": "Avoid data overages",
+  "data-limits-usage": "{used} of {total} used",
   "destroy": "Destroy",
   "digitalocean-disconnect": "Disconnect",
   "digitalocean-disconnect-account": "Disconnect DigitalOcean account",
@@ -47,14 +52,19 @@
   "error-metrics": "Error setting metrics enabled",
   "error-network": "A network error occurred.",
   "error-not-saved": "Not Saved",
+  "error-remove-data-limit": "Could not disable access key data limit",
   "error-server-creation": "There was an error creating your Outline server.",
   "error-server-destroy": "Failed to destroy server",
   "error-server-removed": "{serverName} no longer present in your DigitalOcean account.",
   "error-server-rename": "Failed to rename server",
   "error-server-unreachable": "Your Outline Server was installed correctly, but we are not able to connect to it. Most likely this is because your server's firewall rules are blocking incoming connections. Please review them and make sure to allow incoming TCP connections on ports ranging from 1024 to 65535.",
   "error-server-unreachable-title": "Unable to connect to your Outline Server",
   "error-servers-removed": "{serverNames} no longer present in your DigitalOcean account.",
+  "error-set-data-limit": "Could not set access key data limit",
   "error-unexpected": "An unexpected error occurred.",
+  "experiments": "Experiments",
+  "experiments-description": "Test new features and provide us with {openLink}feedback{closeLink} before they are released.",
+  "experiments-disclaimer": "Experiments are in development and may change or be removed from the app. If you are currently reporting metrics, use of experimental features will be included. Please see the {openLink}data collection policy{closeLink} for more details.",
   "feedback-cloud-provider": "Select cloud provider",
   "feedback-cloud-provider-error": "Please select a cloud provider.",
   "feedback-connection": "Can't connect to my server",
@@ -140,8 +150,8 @@
   "server-access-keys": "Access keys",
   "server-connect-devices": "Connect your devices",
   "server-connections": "Connections",
-  "server-data-transfer": "Data transferred / 30 days",
-  "server-data-used": "Allowance used / 30 days",
+  "server-data-transfer": "Data transferred / last 30 days",
+  "server-data-used": "Allowance used / last 30 days",
   "server-destroy": "Destroy server",
   "server-help-access-key-description": "Share access keys with friends, so they can connect to your Outline server. They can use the same access key on all their devices.",
   "server-help-access-key-next": "Next",
@@ -158,7 +168,7 @@
   "server-unreachable-description": "We're having issues connecting to this server.",
   "server-unreachable-managed-description": "Try again or remove this server from the application.",
   "server-unreachable-manual-description": "Try again or destroy this server and the virtual host.",
-  "server-usage": "Usage / 30 days",
+  "server-usage": "Usage (last 30 days)",
   "servers-add": "Add server",
   "servers-digitalocean": "DigitalOcean servers",
   "servers-manual": "Servers",
@@ -193,12 +203,12 @@
   "setup-tested": "Tested on VULTR, Linode, and Liquid Web",
   "setup-title": "Choose a cloud service to set up Outline.",
   "share-description": "Copy this invitation and send it from a communication tool you trust. {openLink}Need help?{closeLink}",
-  "share-invite": "You\u2019re invited to connect to my Outline server. Use it to access the open internet, no matter where you are. Follow the instructions on your invitation link below to download the Outline App and get connected.",
+  "share-invite": "You’re invited to connect to my Outline server. Use it to access the open internet, no matter where you are. Follow the instructions on your invitation link below to download the Outline App and get connected.",
   "share-invite-copied": "Copied to clipboard",
   "share-invite-copy": "Copy invitation",
   "share-invite-copy-access-key": "Copy your access key:",
   "share-invite-instructions": "Follow our invitation instructions on GitHub:",
   "share-invite-trouble": "Having trouble accessing the invitation link?",
   "share-title": "Share access",
   "terms-of-service": "I have read and understood the {openLink}Outline Terms of Service{closeLink}"
-}
+}

src/server_manager/messages/master_messages.json

@@ -145,6 +145,42 @@
     "message": "Remove Server?",
     "description": "This string appears in a dialog that requests user confirmation for removing a server from the application. 'Remove' in this context does not imply server deletion."
   },
+  "data_limits": {
+    "message": "Data limits",
+    "description": "This string appears as a title in a section to configure access key data transfer limits."
+  },
+  "data_limits_description": {
+    "message": "Set a 30 day trailing data transfer limit for access keys on this server. Available at least until $DATE$.",
+    "description": "This string appears as an explanation to the access key data transfer limits feature.",
+    "placeholders": {
+      "DATE": {
+        "content": "{date}",
+        "example": "December 9, 2019"
+      }
+    }
+  },
+  "data_limits_dialog_text": {
+    "message": "Go to the Settings tab to set a data transfer limit for access keys on this server.",
+    "description": "This string appears as a text in a dialog to advertise the data limits feature."
+  },
+  "data_limits_dialog_title": {
+    "message": "Avoid data overages",
+    "description": "This string appears as a title in a dialog to advertise the data limits feature."
+  },
+  "data_limits_usage": {
+    "message": "$USED$ of $TOTAL$ used",
+    "description": "This string appears as a title in a dialog to advertise the data limits feature.",
+    "placeholders": {
+      "USED": {
+        "content": "{used}",
+        "example": "10 GB"
+      },
+      "TOTAL": {
+        "content": "{total}",
+        "example": "50 GB"
+      }
+    }
+  },
   "destroy": {
     "message": "Destroy",
     "description": "This string appears as a button in a dialog that requests user confirmation for destroying a server. Clicking the button causes the server to be deleted."
@@ -277,6 +313,42 @@
     "message": "An unexpected error occurred.",
     "description": "This string signifies that an error we didn't expect was encountered."
   },
+  "error_set_data_limit": {
+    "message": "Could not set access key data limit",
+    "description": "This string appears in an error notification toast. It is shown on failure to set a data transfer limit on access keys."
+  },
+  "error_remove_data_limit": {
+    "message": "Could not disable access key data limit",
+    "description": "This string appears in an error notification toast. It is shown on failure to remove a data transfer limit on access keys."
+  },
+  "experiments": {
+    "message": "Experiments",
+    "description": "This string is the title of a section that displays opt-in experimental features."
+  },
+  "experiments_description": {
+    "message": "Test new features and provide us with $START_OF_LINK$feedback$END_OF_LINK$ before they are released.",
+    "description": "This string is the description of a section that displays opt-in experimental features.",
+    "placeholders": {
+      "END_OF_LINK": {
+        "content": "{closeLink}"
+      },
+      "START_OF_LINK": {
+        "content": "{openLink}"
+      }
+    }
+  },
+  "experiments_disclaimer": {
+    "message": "Experiments are in development and may change or be removed from the app. If you are currently reporting metrics, use of experimental features will be included. Please see the $START_OF_LINK$data collection policy$END_OF_LINK$ for more details.",
+    "description": "This string provides a disclaimer to opting into experimental features.",
+    "placeholders": {
+      "END_OF_LINK": {
+        "content": "{closeLink}"
+      },
+      "START_OF_LINK": {
+        "content": "{openLink}"
+      }
+    }
+  },
   "feedback_cloud_provider": {
     "message": "Select cloud provider",
     "description": "This string appears in the feedback dialog as an placeholder within a drop-down. Allows the user to select a cloud provider for certain feedback categories."
@@ -656,11 +728,11 @@
     "description": "This string appears within the server view as a header of the section that displays server information and access keys."
   },
   "server_data_transfer": {
-    "message": "Data transferred / 30 days",
+    "message": "Data transferred / last 30 days",
     "description": "This string appears within the server view as the header of a card that displays the amount of data transferred by the server."
   },
   "server_data_used": {
-    "message": "Allowance used / 30 days",
+    "message": "Allowance used / last 30 days",
     "description": "This string appears within the server view as the header of a card that displays the amount of data transferred by the server as a percentage of the total available data."
   },
   "server_destroy": {
@@ -734,7 +806,7 @@
     "description": "This string appears within a server view as a header. Displayed when a server's information cannot be displayed because it is not reachable. Prompts the user to retry contacting the server or destroy it."
   },
   "server_usage": {
-    "message": "Usage / 30 days",
+    "message": "Usage (last 30 days)",
     "description": "This string appears within the server view as a header of a table column that displays the breakdown of data usage by access key."
   },
   "servers_add": {

src/server_manager/model/server.ts

@@ -37,6 +37,15 @@ export interface Server {
   // Removes the access key given by id.
   removeAccessKey(accessKeyId: AccessKeyId): Promise<void>;
 
+  // Sets a data transfer limit over a 30 day rolling window for all access keys.
+  setAccessKeyDataLimit(limit: DataLimit): Promise<void>;
+
+  // Returns the access key data transfer limit, or undefined if it has not been set.
+  getAccessKeyDataLimit(): DataLimit|undefined;
+
+  // Removes the access key data transfer limit.
+  removeAccessKeyDataLimit(): Promise<void>;
+
   // Returns whether metrics are enabled.
   getMetricsEnabled(): boolean;
 
@@ -147,7 +156,6 @@ export interface ManualServerRepository {
   listServers(): Promise<ManualServer[]>;
   // Adds a manual server using the config (e.g. user input).
   addServer(config: ManualServerConfig): Promise<ManualServer>;
-
   // Retrieves a server with `config`.
   findServer(config: ManualServerConfig): ManualServer|undefined;
 }
@@ -172,3 +180,9 @@ export interface DataUsageByAccessKey {
   // a change on the shadowbox server.
   bytesTransferredByUserId: {[accessKeyId: string]: number};
 }
+
+// Data transfer allowance, measured in bytes.
+// NOTE: Must be kept in sync with the definition in src/shadowbox/access_key.ts.
+export interface DataLimit {
+  readonly bytes: number;
+}

src/server_manager/ui_components/cloud-install-styles.html

@@ -81,7 +81,13 @@
       }
 
       paper-dropdown-menu {
-        width: 100%;
+        --paper-input-container-underline: {
+          color: var(--primary-green);
+        };
+      }
+
+      paper-input, paper-textarea, paper-dropdown-menu {
+        --paper-input-container-focus-color: var(--primary-green);
       }
 
       app-toolbar {
@@ -112,7 +118,6 @@
         margin-bottom: 24px;
       }
 
-
       paper-dialog {
         max-width: 540px;
         min-width: 480px;
@@ -124,7 +129,6 @@
         margin: 0;
       }
 
-
       paper-dialog-scrollable img{
         padding-top: 24px;
         padding-bottom: 24px;
@@ -141,6 +145,13 @@
         height: 150px;
       }
 
+      paper-tooltip {
+        --paper-tooltip-text-color: #000;
+        --paper-tooltip-background: #FFF;
+        --paper-tooltip-duration-in: 100;
+        --paper-tooltip-duration-out: 100;
+      }
+
       .instructions-list {
         margin: auto;
         padding-right: 42px;
@@ -202,6 +213,7 @@
 
       a {
         text-decoration: none;
+        color: var(--primary-green);
       }
 
       /*

src/server_manager/ui_components/outline-feedback-dialog.html

@@ -60,8 +60,8 @@
         margin: 0;
         font-size: 12px;
       }
-      paper-input, paper-textarea, paper-dropdown-menu {
-        --paper-input-container-focus-color: var(--primary-green);
+      paper-dropdown-menu {
+        width: 100%;
       }
       paper-textarea {
         --iron-autogrow-textarea: {

src/server_manager/ui_components/outline-help-bubble.html

@@ -19,14 +19,19 @@
 
 <dom-module id='outline-help-bubble'>
   <template>
+    <style include='cloud-install-styles'></style>
     <style>
       :host {
         margin: 10px;
         z-index: 100;
       }
+      paper-button {
+        color: var(--primary-green);
+      }
       .helpContent {
-        background-color: var(--primary-green);
-        padding: 32px 32px 32px 32px;
+        background-color: #FFF;
+        color: #000;
+        padding: 24px;
         font-size: 14px;
         width: 250px;
         border-radius: 4px;
@@ -68,31 +73,40 @@
         display: inline-block;
       }
       .upArrow {
-        border-bottom: 10px solid var(--primary-green);
+        border-bottom: 10px solid #FFF;
         border-left: 10px solid transparent;
         border-right: 10px solid transparent;
       }
       .downArrow {
-        border-top: 10px solid var(--primary-green);
+        border-top: 10px solid #FFF;
         border-left: 10px solid transparent;
         border-right: 10px solid transparent;
       }
       .rightArrow {
-        border-left: 10px solid var(--primary-green);
+        border-left: 10px solid #FFF;
         border-top: 10px solid transparent;
         border-bottom: 10px solid transparent;
       }
       .leftArrow {
-        border-right: 10px solid var(--primary-green);
+        border-right: 10px solid #FFF;
         border-top: 10px solid transparent;
         border-bottom: 10px solid transparent;
       }
-      :host(.offset-right) .upArrowWrapper, :host(.offset-right) .downArrowWrapper {
-        margin-left: 30%;
+      /* rtl:begin:ignore */
+      /* Multiple :host selectors must not have spacing between them */
+      :host(:dir(ltr)):host(.offset-right) .upArrowWrapper, :host(:dir(ltr)):host(.offset-right) .downArrowWrapper {
+        margin-left: 35%;
+      }
+      :host(:dir(ltr)):host(.offset-left) .upArrowWrapper, :host(:dir(ltr)):host(.offset-left) .downArrowWrapper {
+        margin-left: -35%;
+      }
+      :host(:dir(rtl)):host(.offset-right) .upArrowWrapper, :host(:dir(rtl)):host(.offset-right) .downArrowWrapper {
+        margin-right: 35%;
       }
-      :host(.offset-left) .upArrowWrapper, :host(.offset-left) .downArrowWrapper {
-        margin-left: -30%;
+      :host(:dir(rtl)):host(.offset-left) .upArrowWrapper, :host(:dir(rtl)):host(.offset-left) .downArrowWrapper {
+        margin-right: -35%;
       }
+      /* rtl:end:ignore */
     </style>
     <div class="rightArrowWrapper"><div class="rightArrow"></div></div>
     <div class="leftArrowWrapper"><div class="leftArrow"></div></div>
@@ -133,12 +147,14 @@
         this.positionTarget = positionTarget;
         this.refit();
 
-        // Listen to scroll event so the help bubble can reposition if needed.
+        // Listen to scroll and resize events so the help bubble can reposition if needed.
         window.addEventListener('scroll', this.refit.bind(this));
+        window.addEventListener('resize', this.refit.bind(this));
       },
       hide: function() {
         this.setAttribute('hidden', true);
         window.removeEventListener('scroll', this.refit.bind(this));
+        window.removeEventListener('resize', this.refit.bind(this));
         this.fire('outline-help-bubble-dismissed');
       }
     });