add token usage status message

Author: tmunzer-AIDE

angular/src/app/pages/tools/token_usage/usage.component.html

@@ -8,7 +8,11 @@
         </div>
             <button  class="stroked xlarge" [disabled]="!api_token" (click)="check_usage()">Get Info</button>
     </div>
-    <div class="usage" >
+    <div class="info">
+        <span *ngIf="invalid" class="error">Invalid Token</span>
+        <span *ngIf="working">Check {{check_index}} / {{check_total}} </span>
+    </div>
+    <div class="usage" >        
         <div class="text-container">
             <div class="label">API request usage: </div>
             <div *ngIf="usage.requests > -1" class="value">{{usage.requests}}</div>
@@ -17,10 +21,10 @@
             <div *ngIf="usage.request_limit > -1" class="value">{{usage.request_limit}}</div>
             <div *ngIf="usage.request_limit == -1" class="value">-</div>
         </div>
-        <div *ngIf="usage.request_percentage>=100" class="progress-bar" role="progressbar" [ngStyle]="{'background': 'radial-gradient(closest-side, #161c26 79%, transparent 80% 100%), conic-gradient(#ff6969 '+usage.request_percentage+'%, #698bc7 0)'}">
+        <div *ngIf="usage.request_percentage>=100" class="progress-bar" role="progressbar" [ngStyle]="{'background': 'radial-gradient(closest-side, #202836 79%, transparent 80% 100%), conic-gradient(#ff6969 '+usage.request_percentage+'%, #698bc7 0)'}">
             {{usage.request_percentage | number: '1.0-0' }}%
         </div>
-        <div *ngIf="usage.request_percentage<100" class="progress-bar" role="progressbar" [ngStyle]="{'background': 'radial-gradient(closest-side, #161c26 79%, transparent 80% 100%), conic-gradient(#7dff69 '+usage.request_percentage+'%, #698bc7 0)'}">
+        <div *ngIf="usage.request_percentage<100" class="progress-bar" role="progressbar" [ngStyle]="{'background': 'radial-gradient(closest-side, #202836 79%, transparent 80% 100%), conic-gradient(#7dff69 '+usage.request_percentage+'%, #698bc7 0)'}">
             {{usage.request_percentage | number: '1.0-0' }}%
         </div>
     </div>

angular/src/app/pages/tools/token_usage/usage.component.scss

@@ -1,11 +1,20 @@
 .box-token {
     margin: 1em;
 }
+
+.info{
+    font-size: larger;
+    text-align: center;
+    height: 1.5em;
+}
+.info .error {
+    color: #ff0000d7;
+}
 .usage{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: 1em;
+    padding: 0 1em 1em;
     font-size: small;
 }
 

angular/src/app/pages/tools/token_usage/usage.component.ts

@@ -42,38 +42,59 @@ export class TokenUsageComponent implements OnInit {
     request_limit: -1,
     request_percentage: 0
   };
+  working:boolean = false;
+  invalid: boolean = false;
+  check_index:number=0;
+  check_total:number=0;
   api_token: string = "";
 
   ngOnInit() {
+    this.invalid = false;
+    this.check_index = 0;
+    this.api_token = "";
+    this._cd.detectChanges()
   }
-
+  
   check_usage() {
     const api_hosts = this._browser.getHostApi()
+    this.working = true;
+    this.invalid = false;
+    this.check_index = 0;
+    this.check_total = api_hosts.length;
     this.check_cloud_usage(api_hosts);
   }
 
-  private check_cloud_usage(api_hosts, index = 0): void {
-    if (index < api_hosts.length) {
+  private check_cloud_usage(api_hosts): void {
+    this._cd.detectChanges()
+    if (this.check_index < api_hosts.length) {
       this._http.get(
-        "https://" + api_hosts[index] + "/api/v1/self/usage",
+        "https://" + api_hosts[this.check_index] + "/api/v1/self/usage",
         { headers: { "Authorization": "Token " + this.api_token }, observe: 'response' }
       ).subscribe(data => {
         if (data.status == 200) {
           this.usage.requests = data.body["requests"];
           this.usage.request_limit = data.body["request_limit"];
           this.usage.request_percentage = (this.usage.requests / this.usage.request_limit) * 100;
+          this.working =false;
           this._cd.detectChanges()
         } else if (data.status == 429) {
           this.usage.requests = 5000;
           this.usage.request_limit = 5000;
           this.usage.request_percentage = 100;
+          this.working =false;
           this._cd.detectChanges()
         } else {
-          this.check_cloud_usage(api_hosts, index + 1);
+          this.check_index +=1;
+          this.check_cloud_usage(api_hosts);
         }
       }, err => {
-        this.check_cloud_usage(api_hosts, index + 1);
+        this.check_index +=1;
+        this.check_cloud_usage(api_hosts);
       })
+    } else {
+      this.working =false;
+      this.invalid = true;
+      this._cd.detectChanges()
     }
   }