MB-47110: Upgrade Logs Collect Info page to Angular.

"Start Collecting" button is disabled now until the form is valid
for starting collecting logs.
"Get Cluster Summary" modal is closing after the text is copied
with a success/error message.
A new plugin is added for copying text in Angular code: "ngx-clipboard".
A new Angular component is added for the selectable list of nodes:
"mn-selectable-nodes".
A new implementation for "mnStripPortHTML" filter is added in both
Angular and AngularJS.

Change-Id: I513772664baeb5a81d3ab6acdb31d7647fc0d895
Reviewed-on: http://review.couchbase.org/c/ns_server/+/156485
Well-Formed: Build Bot <[email protected]>
Tested-by: Raluca Lupu <[email protected]>
Reviewed-by: Pavel Blagodov <[email protected]>

Author: lukaisthewolf

priv/public/ui/app/components/directives/mn_selectable_nodes_list.html

@@ -38,9 +38,9 @@
            ng-attr-id="collected_node_list_{{node.otpNode}}"
            ng-disabled="mnThisCtl.mnIsNodeDisabled({node:node})">
         <label
-           title="{{node.hostname | mnStripPortHTML:mnThisCtl.nodes}}"
+           title="{{node.hostname | mnStripPortHTML}}"
            for="collected_node_list_{{node.otpNode}}">
-          {{ node.hostname | mnStripPortHTML:mnThisCtl.nodes }}
+          {{node.hostname | mnStripPortHTML}}
         </label>
       </span>
       <span

priv/public/ui/app/components/mn_filters.js

@@ -1,11 +1,12 @@
 import angular from "/ui/web_modules/angular.js";
+import mnPoolDefault from "/ui/app/components/mn_pool_default.js";
 import lodash from "/ui/web_modules/lodash.js";
 let _ = lodash;
 
 export default 'mnFilters';
 
 angular
-  .module('mnFilters', [])
+  .module('mnFilters', [mnPoolDefault])
   .filter('mnCount', mnCount)
   .filter('removeEmptyValue', removeEmptyValue)
   .filter('formatProgressMessage', formatProgressMessage)
@@ -483,34 +484,12 @@ function mnMakeSafeForCSS() {
     });
   };
 }
-function mnStripPortHTML() {
-  var cachedAllServers;
-  var cachedIsStripping;
-  var strippingRE = /:8091$/;
-
-  return function (value, allServers) {
-    if (allServers === undefined) {
-      throw new Error("second argument is required!");
-    }
-    let allNames;
-    let isStripping;
-    if (cachedAllServers === allServers) {
-      isStripping = cachedIsStripping;
-    } else {
-      if (allServers.length == 0 || _.isString(allServers[0])) {
-        allNames = allServers;
-      } else {
-        allNames = _.pluck(allServers, 'hostname');
-      }
-      isStripping = _.all(allNames, function (h) {return h.match(strippingRE);});
-      cachedIsStripping = isStripping;
-      cachedAllServers = allServers;
-    }
-    if (isStripping) {
-      var match = value.match(strippingRE);
-      return match ? value.slice(0, match.index) : value;
+function mnStripPortHTML(mnPoolDefault) {
+  return function (hostname) {
+    if (mnPoolDefault.export.isStrippingPort) {
+      return hostname.replace(/:8091$/, '');
     }
-    return value;
+    return hostname;
   };
 }
 function mnTruncateTo3Digits() {

priv/public/ui/app/components/mn_pool_default.js

@@ -11,13 +11,12 @@ licenses/APL2.txt.
 import angular from "/ui/web_modules/angular.js";
 import _ from "/ui/web_modules/lodash.js";
 import mnPools from "/ui/app/components/mn_pools.js";
-import mnFilters from "/ui/app/components/mn_filters.js";
 import mnHelper from "/ui/app/components/mn_helper.js";
 
 export default 'mnPoolDefault';
 
 angular
-  .module('mnPoolDefault', [mnPools, mnFilters, mnHelper])
+  .module('mnPoolDefault', [mnPools, mnHelper])
   .factory('mnPoolDefault', mnPoolDefaultFactory);
 
 function mnPoolDefaultFactory(mnPools, mnHelper, $http, $q, $window, $location, $httpParamSerializerJQLike, $state) {
@@ -87,6 +86,9 @@ function mnPoolDefaultFactory(mnPools, mnHelper, $http, $q, $window, $location,
       poolDefault.thisNode = _.detect(poolDefault.nodes, function (n) {
         return n.thisNode;
       });
+
+      poolDefault.isStrippingPort = poolDefault.nodes.every(node => node.hostname.includes(':8091'));
+
       poolDefault.compat = {
         atLeast51: poolDefault.thisNode.clusterCompatibility >= version51,
         atLeast55: poolDefault.thisNode.clusterCompatibility >= version55,

priv/public/ui/app/components/mn_tasks_details.js

@@ -58,6 +58,7 @@ function mnTasksDetailsFactory($http, $cacheFactory, mnTasksService) {
 
       rv.tasks = tasks;
       rv.tasksXDCR = _.filter(tasks, detectXDCRTask);
+      rv.tasksCollectInfo = _.filter(tasks, detectCollectInfoTask);
       rv.tasksRecovery = _.detect(tasks, detectRecoveryTasks);
       rv.tasksRebalance = _.detect(tasks, detectRebalanceTasks);
       rv.tasksWarmingUp = _.filter(tasks, detectWarmupTask);
@@ -73,6 +74,14 @@ function mnTasksDetailsFactory($http, $cacheFactory, mnTasksService) {
 
       mnTasksService.stream.tasksXDCRPlug.next(rv.tasksXDCR);
 
+      let noCollectInfoTask = {
+        nodesByStatus: {},
+        nodeErrors: [],
+        status: 'idle',
+        perNode: {}
+      };
+      mnTasksService.stream.taskCollectInfoPlug.next(rv.tasksCollectInfo[0] || noCollectInfoTask);
+
       return rv;
     });
   }
@@ -81,6 +90,10 @@ function mnTasksDetailsFactory($http, $cacheFactory, mnTasksService) {
     return taskInfo.type === 'xdcr';
   }
 
+  function detectCollectInfoTask(taskInfo) {
+    return taskInfo.type === 'clusterLogsCollection';
+  }
+
   function detectOrphanBucketTask(taskInfo) {
     return taskInfo.type === "orphanBucket";
   }

priv/public/ui/app/constants/constants.js

@@ -78,6 +78,9 @@ let IEC = {
   Gi: 1073741824
 };
 
+let servicesEnterprise = ["kv", "n1ql", "index", "fts", "cbas", "eventing", "backup"];
+let servicesCE = ["kv", "index", "fts", "n1ql"];
+
 class MnHttpRequestRestricted {
   constructor(){}
 }
@@ -92,5 +95,7 @@ export {
   docBytesLimit,
   viewsPerPageLimit,
   IEC,
+  servicesEnterprise,
+  servicesCE,
   MN_HTTP_REQUEST_RESTRICTED
 };

priv/public/ui/app/mn.admin.service.js

@@ -80,6 +80,15 @@ class MnAdminService {
     this.stream.getNodes =
       this.stream.getPoolsDefault.pipe(pluck("nodes"));
 
+    this.stream.nodesByOtp = this.stream.getNodes
+      .pipe(map(R.groupBy(R.prop('otpNode'))));
+
+    this.stream.isGroupsAvailable =
+      this.stream.getPoolsDefault.pipe(pluck("isGroupsAvailable"), distinctUntilChanged());
+
+    this.stream.isStrippingPort =
+      this.stream.getPoolsDefault.pipe(pluck("isStrippingPort"), distinctUntilChanged());
+
     this.stream.failedOverNodes = this.stream.getNodes.pipe(
       map(nodes => nodes.filter(node => node.clusterMembership === "inactiveFailed")));
 

priv/public/ui/app/mn.app.imports.js

@@ -79,6 +79,12 @@ let logsListState = {
   lazyLoad: mnLoadNgModule('./mn.logs.list.module.js', "MnLogsListModule")
 };
 
+let logsCollectInfo = {
+  name: "app.admin.logs.collectInfo.**",
+  url: "/collectInfo",
+  lazyLoad: mnLoadNgModule('./mn.logs.collectInfo.module.js', "MnLogsCollectInfoModule")
+}
+
 let groupsState = {
   name: 'app.admin.groups.**',
   url: '/groups',
@@ -208,6 +214,7 @@ let mnAppImports = [
       bucketsState,
       logsState,
       logsListState,
+      logsCollectInfo,
       alertsState,
       groupsState,
       gsiState,

priv/public/ui/app/mn.app.module.js

@@ -15,6 +15,7 @@ import { MnHelperService } from './mn.helper.service.js';
 import { MnTasksService } from './mn.tasks.service.js';
 
 import { MnSecurityService } from './mn.security.service.js';
+import { MnServerGroupsService } from './mn.server.groups.service.js';
 import { mnAppImports } from './mn.app.imports.js';
 import { MnFormService } from './mn.form.service.js';
 import { MnHttpInterceptor } from './mn.http.interceptor.js';
@@ -42,6 +43,7 @@ class MnAppModule {
       providers: [
         ...ajsUpgradedProviders,
         MnSecurityService,
+        MnServerGroupsService,
         MnAppService,
         MnTasksService,
         MnFormService,

priv/public/ui/app/mn.cluster.summary.dialog.component.js

@@ -0,0 +1,74 @@
+/*
+Copyright 2021-Present Couchbase, Inc.
+
+Use of this software is governed by the Business Source License included in
+the file licenses/BSL-Couchbase.txt.  As of the Change Date specified in that
+file, in accordance with the Business Source License, use of this software will
+be governed by the Apache License, Version 2.0, included in the file
+licenses/APL2.txt.
+*/
+
+import {ChangeDetectionStrategy, Component} from '../web_modules/@angular/core.js';
+import {MnLifeCycleHooksToStream} from './mn.core.js';
+import {NgbActiveModal} from '../web_modules/@ng-bootstrap/ng-bootstrap.js';
+import {ClipboardService} from '../web_modules/ngx-clipboard.js';
+import {MnAlertsService} from './ajs.upgraded.providers.js';
+import {MnLogsCollectInfoService} from './mn.logs.collectInfo.service.js';
+import {takeUntil, filter, map} from '../web_modules/rxjs/operators.js';
+
+export { MnClusterSummaryDialogComponent };
+
+class MnClusterSummaryDialogComponent extends MnLifeCycleHooksToStream {
+
+  static get annotations() { return [
+    new Component({
+      selector: "mn-cluster-summary-dialog",
+      templateUrl: "/ui/app/mn.cluster.summary.dialog.html",
+      providers: [
+        ClipboardService
+      ],
+      changeDetection: ChangeDetectionStrategy.OnPush
+    })
+  ]}
+
+  static get parameters() { return [
+    NgbActiveModal,
+    ClipboardService,
+    MnAlertsService,
+    MnLogsCollectInfoService
+  ]}
+
+  constructor(activeModal, clipboardService, mnAlertsService, mnLogsCollectInfoService) {
+    super();
+
+    this.activeModal = activeModal;
+    this.mnAlertsService = mnAlertsService;
+
+    this.clusterInfo = mnLogsCollectInfoService.stream.clusterInfo
+      .pipe(map(v => JSON.stringify(v, null, 2)));
+
+    clipboardService.copyResponse$
+      .pipe(filter(response => response.isSuccess),
+            takeUntil(this.mnOnDestroy))
+      .subscribe(this.handleSuccessMessage.bind(this));
+
+    clipboardService.copyResponse$
+      .pipe(filter(response => !response.isSuccess),
+            takeUntil(this.mnOnDestroy))
+      .subscribe(this.handleErrorMessage.bind(this));
+  }
+
+  handleSuccessMessage() {
+    this.activeModal.close();
+    this.mnAlertsService.formatAndSetAlerts('Text copied successfully!',
+                                            'success',
+                                            2500);
+  }
+
+  handleErrorMessage() {
+    this.activeModal.close();
+    this.mnAlertsService.formatAndSetAlerts('Unable to copy text!',
+                                            'error',
+                                            2500);
+  }
+}

priv/public/ui/app/mn.cluster.summary.dialog.html

@@ -0,0 +1,33 @@
+<!--
+  Copyright 2021-Present Couchbase, Inc.
+
+  Use of this software is governed by the Business Source License included in
+  the file licenses/BSL-Couchbase.txt.  As of the Change Date specified in that
+  file, in accordance with the Business Source License, use of this software will
+  be governed by the Apache License, Version 2.0, included in the file
+  licenses/APL2.txt.
+-->
+
+<div class="dialog-med height-85vh">
+  <div class="panel-header">
+    <h2>Cluster Summary Info</h2>
+    <a class="ui-dialog-titlebar-close modal-close" (click)="activeModal.dismiss()">X</a>
+  </div>
+
+  <div style="height:calc(100% - 112px);overflow:auto;scroll:auto;margin:.5rem 0 0 0" class="show-scrollbar">
+    <div class="panel-content">
+      <pre id="cluster_info" class="text-small">{{clusterInfo | async}}</pre>
+    </div>
+  </div>
+
+  <div class="panel-footer spaced scroll-shadow margin-top-quarter">
+    <button
+       class="outline ng-isolate-scope"
+       [disabled]="!(clusterInfo | async)"
+       ngxClipboard
+       [cbContent]="clusterInfo | async">
+      Copy to Clipboard
+    </button>
+    <a (click)="activeModal.dismiss()">Close</a>
+  </div>
+</div>