Add AccountListEntry

src/server_manager/web_app/app.ts

@@ -340,7 +340,10 @@ export class App {
     }
     try {
       this.digitalOceanAccount = digitalOceanAccount;
-      this.appRoot.digitalOceanAccountName = await this.digitalOceanAccount.getName();
+      this.appRoot.digitalOceanAccount = {
+        id: this.digitalOceanAccount.getId(),
+        name: await this.digitalOceanAccount.getName()
+      };
       const status = await this.digitalOceanAccount.getStatus();
       if (status !== digitalocean.Status.ACTIVE) {
         return [];
@@ -619,7 +622,7 @@ export class App {
         this.removeServer(serverEntry.id);
       }
     }
-    this.appRoot.digitalOceanAccountName = '';
+    this.appRoot.digitalOceanAccount = null;
   }
 
   // Clears the GCP credentials and returns to the intro screen.

src/server_manager/web_app/ui_components/app-root.js

@@ -51,6 +51,13 @@ import {ServerView} from './outline-server-view.js';
 
 const TOS_ACK_LOCAL_STORAGE_KEY = 'tos-ack';
 
+/**
+ * A cloud account to be displayed
+ * @typedef {Object} AccountListEntry
+ * @prop {string} id
+ * @prop {string} name
+ */
+
 /**
  * An access key to be displayed
  * @typedef {Object} ServerListEntry
@@ -381,14 +388,14 @@ export class AppRoot extends mixinBehaviors
         <app-header-layout>
           <div class="app-container">
             <iron-pages attr-for-selected="id" selected="{{ currentPage }}">
-              <outline-intro-step id="intro" digital-ocean-account-name="{{digitalOceanAccountName}}" gcp-account-name="{{gcpAccountName}}" localize="[[localize]]"></outline-intro-step>
+              <outline-intro-step id="intro" digital-ocean-account-name="{{digitalOceanAccount.name}}" gcp-account-name="{{gcpAccountName}}" localize="[[localize]]"></outline-intro-step>
               <outline-do-oauth-step id="digitalOceanOauth" localize="[[localize]]"></outline-do-oauth-step>
               <outline-gcp-oauth-step id="gcpOauth" localize="[[localize]]"></outline-gcp-oauth-step>
               <outline-manual-server-entry id="manualEntry" localize="[[localize]]"></outline-manual-server-entry>
               <outline-region-picker-step id="regionPicker" localize="[[localize]]"></outline-region-picker-step>
               <div id="serverView">
-                <template is="dom-repeat" items="{{serverList}}" as="server">
-                  <outline-server-view id="serverView-{{_base64Encode(server.id)}}" language="[[language]]" localize="[[localize]]" hidden\$="{{!_isServerSelected(selectedServerId, server)}}"></outline-server-view>
+                <template is="dom-repeat" items="[[serverList]]" as="server">
+                  <outline-server-view id="serverView-[[_base64Encode(server.id)]]" language="[[language]]" localize="[[localize]]" hidden\$="[[!_isServerSelected(selectedServerId, server)]]"></outline-server-view>
                 </template>
               </div>
             </iron-pages>
@@ -448,20 +455,20 @@ export class AppRoot extends mixinBehaviors
   static expandedServersTemplate() {
     return html`
       <!-- DigitalOcean servers -->
-      <div class="servers-section" hidden\$="[[!digitalOceanAccountName]]">
+      <div class="servers-section" hidden\$="[[!digitalOceanAccount]]">
         <div class="servers-header">
           <span>[[localize('servers-digitalocean')]]</span>
           <paper-menu-button horizontal-align="left" class="" close-on-activate="" no-animations="" dynamic-align="" no-overlap="">
             <paper-icon-button icon="more-vert" slot="dropdown-trigger"></paper-icon-button>
             <div class="do-overflow-menu" slot="dropdown-content">
               <h4>[[localize('digitalocean-disconnect-account')]]</h4>
-              <div class="account-info"><img src="images/digital_ocean_logo.svg">[[digitalOceanAccountName]]</div>
+              <div class="account-info"><img src="images/digital_ocean_logo.svg">[[digitalOceanAccount.name]]</div>
               <div class="sign-out-button" on-tap="signOutTapped">[[localize('digitalocean-disconnect')]]</div>
             </div>
           </paper-menu-button>
         </div>
         <div class="servers-container">
-          <template is="dom-repeat" items="[[serverList]]" as="server" filter="_isServerManaged" sort="_sortServersByName">
+          <template is="dom-repeat" items="[[serverList]]" as="server" filter="[[_accountServerFilter(digitalOceanAccount)]]" sort="_sortServersByName">
             <div class\$="server [[_computeServerClasses(selectedServerId, server)]]" data-server\$="[[server]]" on-tap="_showServer">
               <img class="server-icon" src\$="images/[[_computeServerImage(selectedServerId, server)]]">
               <span>[[server.name]]</span>
@@ -489,9 +496,9 @@ export class AppRoot extends mixinBehaviors
   static minimizedServersTemplate() {
     return html`
       <!-- DigitalOcean servers -->
-      <div class="side-bar-section servers-section" hidden\$="[[!digitalOceanAccountName]]">
+      <div class="side-bar-section servers-section" hidden\$="[[!digitalOceanAccount]]">
         <img class="provider-icon" src="images/do_white_logo.svg">
-        <template is="dom-repeat" items="[[serverList]]" as="server" filter="_isServerManaged" sort="_sortServersByName">
+        <template is="dom-repeat" items="[[serverList]]" as="server" filter="[[_accountServerFilter(digitalOceanAccount)]]" sort="_sortServersByName">
           <div class\$="server [[_computeServerClasses(selectedServerId, server)]]" data-server\$="[[server]]" on-tap="_showServer">
             <img class="server-icon" src\$="images/[[_computeServerImage(selectedServerId, server)]]">
           </div>
@@ -522,8 +529,8 @@ export class AppRoot extends mixinBehaviors
       useKeyIfMissing: {type: Boolean},
       serverList: {type: Array},
       selectedServerId: {type: String},
-      digitalOceanAccountName: String,
-      gcpAccountName: String,
+      digitalOceanAccount: Object,
+      gcpAccount: Object,
       outlineVersion: String,
       userAcceptedTos: {
         type: Boolean,
@@ -552,8 +559,10 @@ export class AppRoot extends mixinBehaviors
     this.useKeyIfMissing = true;
     /** @type {ServerListEntry[]} */
     this.serverList = [];
-    this.digitalOceanAccountName = '';
-    this.gcpAccountName = '';
+    /** @type {AccountListEntry} */
+    this.digitalOceanAccount = null;
+    /** @type {AccountListEntry} */
+    this.gcpAccount = null;
     this.outlineVersion = '';
     this.currentPage = 'intro';
     this.shouldShowSideBar = false;
@@ -904,8 +913,11 @@ export class AppRoot extends mixinBehaviors
     return shouldShowSideBar ? 'side-bar-margin' : '';
   }
 
-  _isServerManaged(server) {
-    return !!server.accountId;
+  /**
+   * @param {AccountListEntry} account
+   */
+  _accountServerFilter(account) {
+    return (server) => account && server.accountId === account.id;
   }
 
   _isServerManual(server) {