web: improve error handing for fetch in AdminLoginChart

web/src/api/Client.ts

@@ -1,3 +1,5 @@
+import { gettext } from "django";
+import { showMessage } from "../elements/messages/MessageContainer";
 import { getCookie } from "../utils";
 import { NotFoundError, RequestError } from "./Error";
 
@@ -47,6 +49,13 @@ export class Client {
                 }
                 return r;
             })
+            .catch((e) => {
+                showMessage({
+                    level_tag: "error",
+                    message: gettext(`Unexpected error while fetching: ${e.toString()}`),
+                });
+                return e;
+            })
             .then((r) => r.json())
             .then((r) => <T>r);
     }

web/src/elements/AdminLoginsChart.ts

@@ -1,16 +1,21 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import Chart from "chart.js";
-import { showMessage } from "./messages/MessageContainer";
+import { DefaultClient } from "../api/Client";
 
 interface TickValue {
     value: number;
     major: boolean;
 }
 
+export interface LoginMetrics {
+    logins_failed_per_1h: { x: number, y: number }[];
+    logins_per_1h: { x: number, y: number }[];
+}
+
 @customElement("ak-admin-logins-chart")
 export class AdminLoginsChart extends LitElement {
     @property()
-    url = "";
+    url: string[] = [];
 
     chart?: Chart;
 
@@ -40,15 +45,7 @@ export class AdminLoginsChart extends LitElement {
     }
 
     firstUpdated(): void {
-        fetch(this.url)
+        DefaultClient.fetch<LoginMetrics>(this.url)
-            .then((r) => r.json())
-            .catch((e) => {
-                showMessage({
-                    level_tag: "error",
-                    message: "Unexpected error"
-                });
-                console.error(e);
-            })
             .then((r) => {
                 const canvas = <HTMLCanvasElement>this.shadowRoot?.querySelector("canvas");
                 if (!canvas) {

web/src/pages/admin-overview/AdminOverviewPage.ts

@@ -1,6 +1,5 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-import { DefaultClient } from "../../api/Client";
 import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/AdminLoginsChart";
@@ -31,7 +30,7 @@ export class AdminOverviewPage extends LitElement {
         <section class="pf-c-page__main-section">
             <div class="pf-l-gallery pf-m-gutter">
                 <ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Logins over the last 24 hours" style="grid-column-end: span 3;grid-row-end: span 2;">
-                    <ak-admin-logins-chart url="${DefaultClient.makeUrl(["admin", "metrics"])}"></ak-admin-logins-chart>
+                    <ak-admin-logins-chart url="${["admin", "metrics"]}"></ak-admin-logins-chart>
                 </ak-aggregate-card>
                 <ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Apps with most usage" style="grid-column-end: span 2;grid-row-end: span 3;">
                     <ak-top-applications-table></ak-top-applications-table>

web/src/pages/applications/ApplicationViewPage.ts

@@ -1,7 +1,6 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { Application } from "../../api/Applications";
-import { DefaultClient } from "../../api/Client";
 import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/Tabs";
@@ -71,7 +70,7 @@ export class ApplicationViewPage extends LitElement {
                             <div class="pf-c-card__body">
                                 ${this.application ? html`
                                     <ak-admin-logins-chart
-                                        url="${DefaultClient.makeUrl(["core", "applications", this.application?.slug, "metrics"])}">
+                                        url="${["core", "applications", this.application?.slug, "metrics"]}">
                                     </ak-admin-logins-chart>`: ""}
                             </div>
                         </div>