feat(*): manage multi kinds for log to customer

packages/components/ng-log-live-tail/src/component.js

@@ -7,6 +7,7 @@ export default {
   transclude: {
     tile: '?tile',
     description: '?description',
+    kinds: '?kinds',
   },
   bindings: {
     logApiUrl: '<',

packages/components/ng-log-live-tail/src/template.html

@@ -3,6 +3,7 @@
 </oui-message>
 
 <div data-ng-transclude="description" class="my-2"></div>
+<div data-ng-transclude="kinds"></div>
 
 <div class="d-flex w-100 flex-wrap">
     <div class="log-live-tail" data-ng-class="{'fullScreen': $ctrl.fullScreen}">

packages/manager/modules/log-to-customer/src/index.js

@@ -3,6 +3,7 @@ import 'angular-translate';
 
 import ovhLogToCustomerLiveTail from './live-tail';
 import ovhLogToCustomerList from './list';
+import ovhLogToCustomerSelectKinds from './select-kinds';
 import tiles from './tiles/component';
 
 import '@uirouter/angularjs';
@@ -15,6 +16,7 @@ angular
     'ui.router',
     ovhLogToCustomerLiveTail,
     ovhLogToCustomerList,
+    ovhLogToCustomerSelectKinds,
   ])
   .component('logTile', tiles)
   .run(/* @ngTranslationsInject:json ./translations */);

packages/manager/modules/log-to-customer/src/list/component.js

@@ -11,5 +11,6 @@ export default {
     trackingHits: '<',
     trackClick: '<',
     apiVersion: '<?',
+    logKindsList: '<?',
   },
 };

packages/manager/modules/log-to-customer/src/list/controller.js

@@ -20,7 +20,7 @@ export default class LogToCustomerListCtrl {
   }
 
   $onInit() {
-    this.streamLoading = {};
+    this.streamLoading = { all: false };
     this.accountList = [];
     this.streams = [];
     this.streamSubscriptions = {};
@@ -46,6 +46,13 @@ export default class LogToCustomerListCtrl {
       });
   }
 
+  reloadSubscribedStreams() {
+    this.streamLoading.all = true;
+    this.getSubscribedStreams().finally(() => {
+      this.streamLoading.all = false;
+    });
+  }
+
   alertError(message = '') {
     this.Alerter.error(this.$translate.instant('error_message', { message }));
   }

packages/manager/modules/log-to-customer/src/list/template.html

@@ -2,9 +2,21 @@
     data-heading="{{ :: 'logs_list_title' | translate }}"
     data-description="{{ :: $ctrl.description }}"
 >
-    <oui-back-button data-on-click="$ctrl.goBack()"> </oui-back-button>
+    <oui-back-button
+        data-on-click="$ctrl.goBack($ctrl.logSubscriptionApiData.params.kind)"
+    >
+    </oui-back-button>
 </oui-header>
 
+<log-select-kinds
+    data-ng-if="$ctrl.logKindsList.length > 1"
+    class="row"
+    data-kinds="$ctrl.logKindsList"
+    data-on-change="$ctrl.reloadSubscribedStreams()"
+    data-ng-model="$ctrl.logSubscriptionApiData.params.kind"
+>
+</log-select-kinds>
+
 <oui-button
     class="my-3"
     data-icon-left="oui-icon-plus"
@@ -126,24 +138,24 @@
                     data-variant="secondary"
                     data-ng-if="!$ctrl.streamSubscriptions.hasOwnProperty($row.streamId)"
                     data-ng-click="$ctrl.createLogSubscription($row.streamId)"
-                    data-disabled="$ctrl.streamLoading[$row.streamId]"
+                    data-disabled="$ctrl.streamLoading[$row.streamId] || $ctrl.streamLoading.all"
                 >
                     <span data-translate="list_button_subscribe"></span>
                     <oui-spinner
                         size="s"
-                        data-ng-if="$ctrl.streamLoading[$row.streamId]"
+                        data-ng-if="$ctrl.streamLoading[$row.streamId] || $ctrl.streamLoading.all"
                     ></oui-spinner>
                 </oui-button>
                 <oui-button
                     data-variant="secondary"
                     data-ng-if="$ctrl.streamSubscriptions.hasOwnProperty($row.streamId)"
                     data-ng-click="$ctrl.deleteLogSubscription($row.streamId)"
-                    data-disabled="$ctrl.streamLoading[$row.streamId]"
+                    data-disabled="$ctrl.streamLoading[$row.streamId] || $ctrl.streamLoading.all"
                 >
                     <span data-translate="list_button_unsubscribe"></span>
                     <oui-spinner
                         size="s"
-                        data-ng-if="$ctrl.streamLoading[$row.streamId]"
+                        data-ng-if="$ctrl.streamLoading[$row.streamId] || $ctrl.streamLoading.all"
                     ></oui-spinner>
                 </oui-button>
             </div>

packages/manager/modules/log-to-customer/src/live-tail/template.html

@@ -1,14 +1,3 @@
-<div class="my-2" data-ng-if="$ctrl.logKindsList.length > 1">
-    <oui-radio-toggle-group dense data-model="$ctrl.kind" direction="row">
-        <oui-radio
-            data-ng-repeat="kind in $ctrl.logKindsList"
-            value="kind.name"
-        >
-            <span data-ng-bind="kind.displayName"></span>
-        </oui-radio>
-    </oui-radio-toggle-group>
-</div>
-
 <log-live-tail
     data-log-keys="$ctrl.logKeys"
     data-log-api-url="$ctrl.logApiUrl"
@@ -28,7 +17,14 @@
             <i class="oui-icon oui-icon-external-link" aria-hidden="true"></i>
         </a>
     </description>
-
+    <kinds data-ng-if="$ctrl.logKindsList.length > 1">
+        <log-select-kinds
+            class="row"
+            data-kinds="$ctrl.logKindsList"
+            data-ng-model="$ctrl.kind"
+        >
+        </log-select-kinds>
+    </kinds>
     <tile>
         <log-tile
             data-log-subscription-url="$ctrl.logSubscriptionUrl"

packages/manager/modules/log-to-customer/src/select-kinds/component.js

@@ -0,0 +1,12 @@
+import template from './template.html';
+
+export default {
+  template,
+  bindings: {
+    kinds: '<',
+    ngModel: '=',
+    onChange: '&',
+  },
+  require: '^ngModel',
+  name: 'logSelectKinds',
+};

packages/manager/modules/log-to-customer/src/select-kinds/index.js

@@ -0,0 +1,7 @@
+import component from './component';
+
+const moduleName = 'ovhLogToCustomerSelectKinds';
+
+angular.module(moduleName, []).component(component.name, component);
+
+export default moduleName;

packages/manager/modules/log-to-customer/src/select-kinds/template.html

@@ -0,0 +1,15 @@
+<div class="form-group col-md-2 col-xs-6">
+    <label
+        for="select-logs-kind"
+        class="control-label"
+        data-translate="logs_select_kind"
+    >
+    </label>
+    <oui-select
+        name="select-logs-kind"
+        data-model="$ctrl.ngModel"
+        data-items=":: $ctrl.kinds"
+        data-on-change="$ctrl.onChange()"
+        data-placeholder="{{:: 'logs_select_kind' | translate }}"
+    ></oui-select>
+</div>

packages/manager/modules/log-to-customer/src/tiles/controller.js

@@ -36,6 +36,14 @@ export default class LogToCustomerTileCtrl {
     this.loadStreams();
   }
 
+  async $onChanges({ kind }) {
+    if (kind) {
+      this.loading = true;
+      await this.getSubscribedStreams();
+      this.loading = false;
+    }
+  }
+
   loadStreams() {
     this.loading = true;
     this.streamSubscriptions = [];

packages/manager/modules/log-to-customer/src/translations/Messages_fr_FR.json

@@ -33,5 +33,6 @@
   "list_button_unsubscribe": "Se désabonner",
   "streams_45_days": "45 jours",
   "streams_disk_full": "Espace disque insuffisant",
-  "error_message": "Une erreur est survenue : {{message}}"
+  "error_message": "Une erreur est survenue : {{message}}",
+  "logs_select_kind": "Sélectionnez un type de log"
 }