badd device detection & show non-desktop msg, show must-login msg, up…

…date readme, bump ver

README.md

@@ -3,7 +3,7 @@
     <h3 align="center" style="font-weight: bold; text-align: center; font-size: 34px; margin-bottom: -45px">🔦</h3>
     <h3 align="center" style="font-weight: bold; text-align: center; font-size: 34px; margin-bottom: -10px">elasTasks</h3>
   </a>
-  <p align="center">The missing UI wrapper around selected parts of the ElasticSearch Tasks API</p>
+  <p align="center">The missing UI wrapper around selected parts of the <a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/tasks.html" target="_blank">ElasticSearch Tasks API</a></p>
 </p>
 
 ---
@@ -14,7 +14,7 @@
 
 ## Background
 
-Inspired by a [closed Kibana github issue](https://github.com/elastic/kibana/issues/42621):
+This application attempts to solve the problem detailed in the [unresolved Kibana issue #42621](https://github.com/elastic/kibana/issues/42621):
 
 > Long-running tasks can leak processes and kill a cluster. Users need a way to detect slow queries and kill these tasks. We can start down the road of addressing this problem by building a “Tasks” app that show a list of all tasks that are running, indicate ones that are cancellable, display any available information that the API provides, and give users the ability to cancel these tasks.
 
@@ -34,7 +34,7 @@ Locally:
 
 elasTasks is a client-side application with no server backend. Data lives only on your machine/browser. No information or ES data is sent to any server.
 
-When connecting to an ElasticSearch host you may opt out of [CorsAnywhere](https://github.com/Rob--W/cors-anywhere/) -- a NodeJS reverse proxy which adds CORS headers to the proxied request.
+When connecting to an ElasticSearch host you may opt out of enabling [CorsAnywhere](https://github.com/Rob--W/cors-anywhere/) -- a NodeJS reverse proxy which adds CORS headers to the proxied request.
 
 ## Contributing
 

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elastasks",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -21,6 +21,7 @@
     "@angular/router": "~9.1.9",
     "@types/elasticsearch": "^5.0.36",
     "ng-zorro-antd": "^9.3.0",
+    "ngx-device-detector": "^2.0.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

app/src/app/pages/login/login.component.html

@@ -1,18 +1,12 @@
 <nz-modal [(nzVisible)]="isLoginModalVisible"
           [nzFooter]="null"
+          nzClosable="false"
           nzTitle="Connect to Host"
           nzWidth="960px">
   <form nz-form
         [formGroup]="validateForm"
         (ngSubmit)="submitForm()">
 
-    <nz-alert nzType="success"
-              [ngStyle]="{'margin-bottom.px': 20}"
-              [nzCloseable]="true"
-              nzMessage="elasTasks is a client-side application with no server backend.
-              Data lives only on your machine/browser.
-              No information or ES data is sent to any server."></nz-alert>
-
     <nz-card [nzTitle]="">
       <nz-form-item>
         <nz-form-label [nzSm]="3"
@@ -129,6 +123,13 @@
 
     <br>
 
+    <nz-alert nzType="success"
+              [ngStyle]="{'margin-bottom.px': 20}"
+              [nzCloseable]="true"
+              nzMessage="elasTasks is a client-side application with no server backend.
+              Data lives only on your machine/browser.
+              No information or ES data is sent to any server."></nz-alert>
+
     <div nz-col
          nzSpan="24">
       <nz-form-item nz-row>

app/src/app/pages/login/login.component.ts

@@ -7,6 +7,8 @@ import {
 import { Router, ActivatedRoute } from "@angular/router";
 import { HttpErrorResponse } from "@angular/common/http";
 import { merge } from "rxjs";
+import { NzMessageService } from "ng-zorro-antd";
+import { DeviceDetectorService } from "ngx-device-detector";
 
 @Component({
   selector: "app-login",
@@ -29,12 +31,31 @@ export class LoginComponent implements OnInit {
     private fb: FormBuilder,
     private es: ElasticsearchService,
     private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private message: NzMessageService,
+    private device: DeviceDetectorService
   ) {
     if (this.route.snapshot.queryParamMap.get("force")) {
       this.es.flushHost();
       this.isLoginModalVisible = true;
     }
+
+    if (this.route.snapshot.queryParamMap.get("infoMsg")) {
+      this.message.warning(
+        "Could not establish connection. Please connect to your cluster first.",
+        {
+          nzDuration: 5e3,
+          nzPauseOnHover: true
+        }
+      );
+    }
+
+    if (!this.device.isDesktop()) {
+      this.message.info("This application is optimized for desktops.", {
+        nzDuration: 8e3,
+        nzPauseOnHover: true
+      });
+    }
   }
 
   private apiKeyShouldDisable() {

app/src/app/pages/login/login.module.ts

@@ -13,7 +13,8 @@ import {
   NzAlertModule,
   NzModalModule,
   NzCheckboxModule,
-  NzTagModule
+  NzTagModule,
+  NzMessageModule
 } from "ng-zorro-antd";
 import { ReactiveFormsModule, FormsModule } from "@angular/forms";
 import { CommonModule } from "@angular/common";
@@ -33,6 +34,7 @@ import { CommonModule } from "@angular/common";
     NzModalModule,
     NzCheckboxModule,
     NzTagModule,
+    NzMessageModule,
     LoginRoutingModule
   ],
   declarations: [LoginComponent],

app/src/app/pages/tasks/tasks.component.ts

@@ -124,11 +124,17 @@ export class TasksComponent implements OnInit {
       this.es.initClient();
       const r = (await this.es.ping()) as any;
       if (!r || (r && typeof r.tagline !== "string")) {
-        this.router.navigate(["/login"]);
+        this.router.navigate(["/login"], {
+          queryParams: {
+            infoMsg: true
+          }
+        });
         return;
       }
     } else {
-      this.router.navigate(["/login"], { queryParams: { force: true } });
+      this.router.navigate(["/login"], {
+        queryParams: { force: true, infoMsg: true }
+      });
       return;
     }
 

app/src/styles.scss

@@ -29,6 +29,6 @@ app-login {
   }
 }
 
-nz-form-item + nz-alert {
-  margin-top: 20px;
+nz-alert {
+  margin-bottom: 20px;
 }