@rancher/shell 0.3.9 → 0.3.10

package/plugins/steve/resourceWatcher.js

@@ -5,10 +5,9 @@
 import Socket, {
   NO_WATCH,
   NO_SCHEMA,
-  EVENT_MESSAGE,
   EVENT_CONNECTED,
+  REVISION_TOO_OLD
 } from '@shell/utils/socket';
-import { addParam } from '@shell/utils/url';
 
 export const WATCH_STATUSES = {
   /**
@@ -64,7 +63,7 @@ export const watchKeyFromMessage = (msg) => {
 };
 
 const {
-  WATCH_PENDING, WATCH_REQUESTED, WATCHING, STOPPED, REMOVE_PENDING, REQUESTED_REMOVE
+  WATCH_PENDING, WATCH_REQUESTED, WATCHING, REMOVE_PENDING, REQUESTED_REMOVE
 } = WATCH_STATUSES;
 
 export default class ResourceWatcher extends Socket {
@@ -110,12 +109,13 @@ export default class ResourceWatcher extends Socket {
     return !!this.watches?.[watchKey];
   }
 
-  async watch(watchKey, providedResourceVersion, providedResourceVersionTime, providedKeyParts = {}, providedSkipResourceVersion) {
+  watch(watchKey, providedResourceVersion, providedResourceVersionTime, providedKeyParts = {}, providedSkipResourceVersion) {
     const {
       resourceType: providedResourceType,
       id: providedId,
       namespace: providedNamespace,
-      selector: providedSelector
+      selector: providedSelector,
+      force: providedForce,
     } = providedKeyParts;
 
     this.trace('watch:', 'requested', watchKey);
@@ -126,8 +126,10 @@ export default class ResourceWatcher extends Socket {
       return;
     }
 
-    if (this.watches?.[watchKey]?.error) {
-      this.trace('watch:', 'in error, aborting', watchKey);
+    if (!providedForce && this.watches?.[watchKey]?.error) {
+      if (this.watches?.[watchKey]?.error.reason !== REVISION_TOO_OLD) {
+        this.trace('watch:', 'in error, aborting', watchKey);
+      }
 
       return;
     }
@@ -136,7 +138,7 @@ export default class ResourceWatcher extends Socket {
     const id = providedId || this.watches?.[watchKey]?.id;
     const namespace = providedNamespace || this.watches?.[watchKey]?.namespace;
     const selector = providedSelector || this.watches?.[watchKey]?.selector;
-    let skipResourceVersion = this.watches?.[watchKey]?.skipResourceVersion || providedSkipResourceVersion;
+    const skipResourceVersion = this.watches?.[watchKey]?.skipResourceVersion || providedSkipResourceVersion;
 
     const watchObject = {
       resourceType,
@@ -145,47 +147,8 @@ export default class ResourceWatcher extends Socket {
       selector
     };
 
-    let resourceVersionTime = providedResourceVersionTime || this.watches?.[watchKey]?.resourceVersionTime;
-    let resourceVersion = providedResourceVersion || this.watches?.[watchKey]?.resourceVersion;
-
-    if (!skipResourceVersion && (!resourceVersion || Date.now() - resourceVersionTime > 300000)) { // 300000ms is 5minutes
-      this.trace('watch:', 'revision update required', watchKey);
-
-      const resourceUrl = this.baseUrl + resourceType;
-      const limitedResourceUrl = addParam(resourceUrl, 'limit', 1);
-      const opt = {
-        method:  'get',
-        headers: { accept: 'application/json' },
-      };
-
-      if (this.csrf) {
-        opt.headers['x-api-csrf'] = this.csrf;
-      }
-
-      await fetch(limitedResourceUrl, opt)
-        .then((res) => {
-          this.watches[watchKey] = { ...watchObject };
-          if (!res.ok) {
-            this.watches[watchKey].error = res.json();
-            console.warn(`Resource error retrieving resourceVersion`, resourceType, ':', res.json()); // eslint-disable-line no-console
-          } else {
-            this.watches[watchKey].error = undefined;
-          }
-
-          return res.json();
-        })
-        .then((res) => {
-          if (res.revision) {
-            resourceVersionTime = Date.now();
-            resourceVersion = res.revision;
-          } else if (!this.watches[watchKey].error) {
-            // if there wasn't a revision in the response and there wasn't an error we wrote to the watch then the resource doesn't get a revision and we can skip it on subsequent rewatches
-            skipResourceVersion = true;
-          }
-        });
-      // When this fails we should re-fetch all resources (aka same as resyncWatch, or we actually call it). #7917
-      // This would match the old approach
-    }
+    const resourceVersionTime = providedResourceVersionTime || this.watches?.[watchKey]?.resourceVersionTime;
+    const resourceVersion = providedResourceVersion || this.watches?.[watchKey]?.resourceVersion;
 
     const success = this.send(JSON.stringify({
       ...watchObject,
@@ -240,16 +203,21 @@ export default class ResourceWatcher extends Socket {
 
     if (eventName === 'resource.start' && this.watches?.[watchKey]?.status === WATCH_REQUESTED) {
       this.watches[watchKey].status = WATCHING;
+      delete this.watches[watchKey].error;
     } else if (eventName === 'resource.stop' && this.watches?.[watchKey]) {
-      if (this.watches?.[watchKey]?.status === REQUESTED_REMOVE) {
-        delete this.watches[watchKey];
-      } else {
-        this.watches[watchKey].status = STOPPED;
-        delete this.watches[watchKey].resourceVersion;
-        delete this.watches[watchKey].resourceVersionTime;
-        this.watch(watchKey);
-        this.dispatchEvent(new CustomEvent(EVENT_MESSAGE, { detail: event }));
-      }
+      // Find some way to resolve the correct resourceVersion from within the resourceWatcher until then:
+      // reset the watch in the resourceWatcher, we'll handle recovery up the chain. For now
+      // dispatch the event to the host process which should have a handler for resource.stop
+
+      // if (this.watches?.[watchKey]?.status === REQUESTED_REMOVE) {
+      this.watches[watchKey] = { error: this.watches[watchKey]?.error };
+      // } else {
+      //   this.watches[watchKey].status = STOPPED;
+      //   delete this.watches[watchKey].resourceVersion;
+      //   delete this.watches[watchKey].resourceVersionTime;
+      //   this.watch(watchKey);
+      //   this.dispatchEvent(new CustomEvent(EVENT_MESSAGE, { detail: event }));
+      // }
     } else if (eventName === 'resource.error') {
       const err = data?.error?.toLowerCase();
 
@@ -262,14 +230,20 @@ export default class ResourceWatcher extends Socket {
 
         this.watches[watchKey].error = { type: resourceType, reason: NO_SCHEMA };
       } else if ( err.includes('too old') ) {
-        // We don't actually know the gap between the requested revision and the oldest available revision.
-        // For this case we should re-fetch all resources (aka same as resyncWatch, or we actually call it). #7917
-        // This would match the old approach
         delete this.watches[watchKey].resourceVersion;
         delete this.watches[watchKey].resourceVersionTime;
         delete this.watches[watchKey].skipResourceVersion;
-        this.watch(watchKey);
+        this.watches[watchKey].error = { type: resourceType, reason: REVISION_TOO_OLD };
+        // Needs to match sub resyncWatch params
+        this.dispatchEvent(new CustomEvent('resync', {
+          detail: {
+            data: {
+              resourceType, id, namespace, selector
+            }
+          }
+        }));
       }
+      this.trace('_onmessage:', 'new error', this.watches[watchKey].error);
     }
 
     super._onmessage(event);

package/plugins/steve/subscribe.js

@@ -9,7 +9,8 @@
 
 import { addObject, clear, removeObject } from '@shell/utils/array';
 import { get } from '@shell/utils/object';
-import { SCHEMA } from '@shell/config/types';
+import { SCHEMA, MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
 import { CSRF } from '@shell/config/cookies';
 import { getPerformanceSetting } from '@shell/utils/settings';
 import Socket, {
@@ -29,16 +30,25 @@ import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
 import { escapeHtml } from '@shell/utils/string';
 import { keyForSubscribe } from '@shell/plugins/steve/resourceWatcher';
 import { waitFor } from '@shell/utils/async';
+import { WORKER_MODES } from './worker';
+import pAndNFiltering from '@shell/utils/projectAndNamespaceFiltering.utils';
 
 import { BLANK_CLUSTER } from '@shell/store/index.js';
+import { STORE } from '@shell/store/store-types';
 
 // minimum length of time a disconnect notification is shown
 const MINIMUM_TIME_NOTIFIED = 3000;
 
-const waitForManagement = (store) => {
-  const managementReady = () => store.state?.managementReady;
+const workerQueues = {};
 
-  return waitFor(managementReady, 'Management');
+const supportedStores = [STORE.CLUSTER, STORE.RANCHER, STORE.MANAGEMENT];
+
+const waitForSettingsSchema = (store) => {
+  return waitFor(() => !!store.getters['management/byId'](SCHEMA, MANAGEMENT.SETTING));
+};
+
+const waitForSettings = (store) => {
+  return waitFor(() => !!store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE));
 };
 
 const isAdvancedWorker = (ctx) => {
@@ -46,7 +56,7 @@ const isAdvancedWorker = (ctx) => {
   const storeName = getters.storeName;
   const clusterId = rootGetters.clusterId;
 
-  if (storeName !== 'cluster' || clusterId === BLANK_CLUSTER) {
+  if (!supportedStores.includes(storeName) || (clusterId === BLANK_CLUSTER && storeName === STORE.CLUSTER)) {
     return false;
   }
 
@@ -55,19 +65,33 @@ const isAdvancedWorker = (ctx) => {
   return perfSetting?.advancedWorker.enabled;
 };
 
-// We only create a worker for the cluster store
 export async function createWorker(store, ctx) {
   const { getters, dispatch } = ctx;
   const storeName = getters.storeName;
 
   store.$workers = store.$workers || {};
 
-  if (storeName !== 'cluster') {
+  if (!supportedStores.includes(storeName)) {
     return;
   }
 
-  await waitForManagement(store);
-  // getting perf setting in a separate constant here because it'll provide other values we'll want later.
+  if (!store.$workers[storeName]) {
+    // we know we need a worker at this point but we don't know which one so we're creating a mock interface
+    // it will simply queue up any messages for the real worker to process when it loads up
+    store.$workers[storeName] = {
+      postMessage: (msg) => {
+        if (workerQueues[storeName]) {
+          workerQueues[storeName].push(msg);
+        } else {
+          workerQueues[storeName] = [msg];
+        }
+      },
+      mode: WORKER_MODES.WAITING
+    };
+  }
+
+  await waitForSettingsSchema(store);
+  await waitForSettings(store);
   const advancedWorker = isAdvancedWorker(ctx);
 
   const workerActions = {
@@ -81,21 +105,30 @@ export async function createWorker(store, ctx) {
       }
     },
     batchChanges: (batch) => {
-      dispatch('batchChanges', batch);
+      dispatch('batchChanges', namespaceHandler.validateBatchChange(ctx, batch));
     },
     dispatch: (msg) => {
       dispatch(`ws.${ msg.name }`, msg);
     },
+    redispatch: (msg) => {
+      /**
+       * because we had to queue up some messages prior to loading the worker:
+       * the basic worker will need to redispatch some of the queued messages back to the UI thread
+       */
+      Object.entries(msg).forEach(([action, params]) => {
+        dispatch(action, params);
+      });
+    },
     [EVENT_CONNECT_ERROR]: (e) => {
       dispatch('error', e );
     },
     [EVENT_DISCONNECT_ERROR]: (e) => {
       dispatch('error', e );
-    }
+    },
   };
 
-  if (!store.$workers[storeName]) {
-    const workerMode = advancedWorker ? 'advanced' : 'basic';
+  if (!store.$workers[storeName] || store.$workers[storeName].mode === WORKER_MODES.WAITING) {
+    const workerMode = advancedWorker ? WORKER_MODES.ADVANCED : WORKER_MODES.BASIC;
     const worker = store.steveCreateWorker(workerMode);
 
     store.$workers[storeName] = worker;
@@ -115,6 +148,12 @@ export async function createWorker(store, ctx) {
       });
     };
   }
+
+  while (workerQueues[storeName]?.length) {
+    const message = workerQueues[storeName].shift();
+
+    store.$workers[storeName].postMessage(message);
+  }
 }
 
 export function equivalentWatch(a, b) {
@@ -140,7 +179,67 @@ export function equivalentWatch(a, b) {
   return true;
 }
 
-function queueChange({ getters, state }, { data, revision }, load, label) {
+/**
+ * Sockets will not be able to subscribe to more than one namespace. If this is requested we pretend to handle it
+ * - Changes to all resources are monitored (no namespace provided in sub)
+ * - We ignore any events not from a required namespace (we have the conversion of project --> namespaces already)
+ */
+const namespaceHandler = {
+  /**
+   * Note - namespace can be a list of projects or namespaces
+   */
+  subscribeNamespace: (namespace) => {
+    if (pAndNFiltering.isApplicable({ namespaced: namespace }) && namespace.length) {
+      return undefined; // AKA sub to everything
+    }
+
+    return namespace;
+  },
+
+  validChange: ({ getters, rootGetters }, type, data) => {
+    const haveNamespace = getters.haveNamespace(type);
+
+    if (haveNamespace?.length) {
+      const namespaces = rootGetters.activeNamespaceCache;
+
+      if (!namespaces[data.metadata.namespace]) {
+        return false;
+      }
+    }
+
+    return true;
+  },
+
+  validateBatchChange: ({ getters, rootGetters }, batch) => {
+    const namespaces = rootGetters.activeNamespaceCache;
+
+    Object.entries(batch).forEach(([type, entries]) => {
+      const haveNamespace = getters.haveNamespace(type);
+
+      if (!haveNamespace?.length) {
+        return;
+      }
+
+      const schema = getters.schemaFor(type);
+
+      if (!schema?.attributes?.namespaced) {
+        return;
+      }
+
+      Object.keys(entries).forEach((id) => {
+        const namespace = id.split('/')[0];
+
+        if (!namespace || !namespaces[namespace]) {
+          delete entries[id];
+        }
+      });
+    });
+
+    return batch;
+  }
+};
+
+function queueChange({ getters, state, rootGetters }, { data, revision }, load, label) {
   const type = getters.normalizeType(data.type);
 
   const entry = getters.typeEntry(type);
@@ -153,6 +252,10 @@ function queueChange({ getters, state }, { data, revision }, load, label) {
 
   // console.log(`${ label } Event [${ state.config.namespace }]`, data.type, data.id); // eslint-disable-line no-console
 
+  if (!namespaceHandler.validChange({ getters, rootGetters }, type, data)) {
+    return;
+  }
+
   if ( load ) {
     state.queue.push({
       action: 'dispatch',
@@ -212,7 +315,7 @@ const sharedActions = {
 
     const url = `${ state.config.baseUrl }/subscribe`;
     const maxTries = growlsDisabled(rootGetters) ? null : 3;
-    const connectionMetadata = get(opt, 'metadata');
+    const metadata = get(opt, 'metadata');
 
     if (isAdvancedWorker(ctx)) {
       if (!this.$workers[getters.storeName]) {
@@ -222,7 +325,7 @@ const sharedActions = {
       // if the worker is in advanced mode then it'll contain it's own socket which it calls a 'watcher'
       this.$workers[getters.storeName].postMessage({
         createWatcher: {
-          connectionMetadata,
+          metadata,
           url:  `${ state.config.baseUrl }/subscribe`,
           csrf: this.$cookies.get(CSRF, { parseJSON: false }),
           maxTries
@@ -231,7 +334,7 @@ const sharedActions = {
     } else if ( socket ) {
       socket.setAutoReconnect(true);
       socket.setUrl(url);
-      socket.connect(connectionMetadata);
+      socket.connect(metadata);
     } else {
       socket = new Socket(`${ state.config.baseUrl }/subscribe`, true, null, null, maxTries);
 
@@ -263,7 +366,7 @@ const sharedActions = {
           }
         }
       });
-      socket.connect(connectionMetadata);
+      socket.connect(metadata);
     }
   },
 
@@ -297,6 +400,7 @@ const sharedActions = {
       type, selector, id, revision, namespace, stop, force
     } = params;
 
+    namespace = namespaceHandler.subscribeNamespace(namespace);
     type = getters.normalizeType(type);
 
     if (rootGetters['type-map/isSpoofed'](type)) {
@@ -356,7 +460,7 @@ const sharedActions = {
 
     const worker = this.$workers?.[getters.storeName] || {};
 
-    if (worker.mode === 'advanced') {
+    if (worker.mode === WORKER_MODES.ADVANCED || worker.mode === WORKER_MODES.WAITING) {
       if ( force ) {
         msg.force = true;
       }
@@ -375,6 +479,8 @@ const sharedActions = {
     const { commit, getters, dispatch } = ctx;
 
     if (getters['schemaFor'](type)) {
+      namespace = namespaceHandler.subscribeNamespace(namespace);
+
       const obj = {
         type,
         id,
@@ -760,8 +866,18 @@ const defaultActions = {
     }
 
     // If we're trying to watch this event, attempt to re-watch
-    if ( getters['schemaFor'](type) && getters['watchStarted'](obj) ) {
-      commit('setWatchStopped', obj);
+    //
+    // To make life easier in the advanced worker `resource.stop` --> `watch` is handled here (basically for access to getters.nextResourceVersion)
+    // This means the concept of resource sub watch state needs massaging
+    const advancedWorker = msg.advancedWorker;
+    const localState = !advancedWorker;
+    const watchStarted = localState ? getters['watchStarted'](obj) : advancedWorker;
+
+    if ( getters['schemaFor'](type) && watchStarted) {
+      if (localState) {
+        commit('setWatchStopped', obj);
+      }
+
       dispatch('watch', obj);
     }
   },

package/plugins/steve/worker/index.js

@@ -3,10 +3,16 @@ import basicWorkerConstructor from '@shell/plugins/steve/worker/web-worker.basic
 // eslint-disable-next-line no-unused-vars
 import advancedWorkerConstructor from '@shell/plugins/steve/worker/web-worker.advanced.js';
 
+export const WORKER_MODES = {
+  WAITING:  'waiting',
+  BASIC:    'basic',
+  ADVANCED: 'advanced'
+};
+
 export default function storeWorker(mode, options = {}, closures = {}) {
   let worker;
 
-  if (mode === 'advanced') {
+  if (mode === WORKER_MODES.ADVANCED) {
     worker = new advancedWorkerConstructor();
   } else {
     worker = new basicWorkerConstructor();

package/plugins/steve/worker/web-worker.advanced.js

@@ -93,12 +93,12 @@ const workerActions = {
     }
     caches[SCHEMA].load(collection);
   },
-  createWatcher: (metadata) => {
-    trace('createWatcher', metadata);
+  createWatcher: (opt) => {
+    trace('createWatcher', opt);
 
     const {
-      connectionMetadata, maxTries, url, csrf
-    } = metadata;
+      metadata, maxTries, url, csrf
+    } = opt;
 
     if (!state.watcher) {
       state.watcher = new ResourceWatcher(url, true, null, null, maxTries, csrf);
@@ -119,6 +119,10 @@ const workerActions = {
         }
       });
 
+      state.watcher.addEventListener('resync', (e) => {
+        self.postMessage({ redispatch: { resyncWatch: e.detail.data } });
+      });
+
       state.watcher.addEventListener(EVENT_CONNECT_ERROR, (e) => {
         handleConnectionError(EVENT_CONNECT_ERROR, e, state.watcher);
       });
@@ -129,7 +133,7 @@ const workerActions = {
 
       state.watcher.setDebug(state.debugWorker);
 
-      state.watcher.connect(connectionMetadata);
+      state.watcher.connect(metadata);
 
       // Flush the workerQueue
       while (state.workerQueue.length > 0) {
@@ -183,7 +187,8 @@ const workerActions = {
       resourceType,
       id,
       namespace,
-      selector
+      selector,
+      force: msg.force,
     };
 
     state.watcher.watch(watchKey, resourceVersion, resourceVersionTime, watchObject, skipResourceVersion);
@@ -270,10 +275,23 @@ const resourceWatcherActions = {
     }
   },
   'resource.stop': (msg) => {
-    // State is handled in the resourceWatcher, no need to bubble out to UI thread
+    trace('resource.stop', msg);
+
+    // State is handled in the resourceWatcher....
     const watchKey = watchKeyFromMessage(msg);
 
     removeFromWorkerQueue(watchKey);
+
+    // ... however we still want to bubble out to UI thread
+    // We'll save some hassle and ignore any resource.stop bubble if we're in error. the only thing that will clear that is a resync
+    if (!state.watcher?.watches[watchKey]?.error) {
+      // See comment in resourceWatcher 'resource.stop' handler, until we can resolve the resourceVersion within the resourceWatcher
+      // internally, we'll want to bubble this out to the UI thread. When that's resolved this won't be needed
+      resourceWatcherActions.dispatch({
+        ...msg,
+        advancedWorker: true,
+      });
+    }
   },
   'resource.error': (msg) => {
     // State is handled in the resourceWatcher, no need to bubble out to UI thread
@@ -287,7 +305,7 @@ const resourceWatcherActions = {
 /**
  * Covers message from UI Thread to Worker
  */
-onmessage = (e) => {
+self.onmessage = (e) => {
   /* on the off chance there's more than key in the message, we handle them in the order that they "keys" method provides which is
   // good enough for now considering that we never send more than one message action at a time right now */
   const messageActions = Object.keys(e?.data);

package/plugins/steve/worker/web-worker.basic.js

@@ -6,7 +6,7 @@ const SCHEMA_FLUSH_TIMEOUT = 2500;
 
 const state = {
   store:      '', // Store name
-  flushTimer: undefined, // Timer to flush the schema chaneg queue
+  flushTimer: undefined, // Timer to flush the schema change queue
   queue:      [], // Schema change queue
   schemas:    {} // Map of schema id to hash to track when a schema actually changes
 };
@@ -42,6 +42,25 @@ function load(data) {
   self.postMessage({ load: data });
 }
 
+// used for dispatching a function in the worker, primarily for redirecting messages intended for the advanced worker back to the UI thread
+function redispatch(msg) {
+  self.postMessage({ redispatch: msg });
+}
+
+/**
+ * These actions aren't applicable to the basic worker, so bounce back to ui thread
+ *
+ * These are called when a queue of actions is flushed. Queue is populated from requests made before we know if worker is basic or advanced.
+ */
+const advancedWorkerActions = {
+  watch: (msg) => {
+    redispatch({ send: msg });
+  },
+  createWatcher: (msg) => {
+    redispatch({ subscribe: msg });
+  }
+};
+
 const workerActions = {
   onmessage: (e) => {
     /* on the off chance there's more than key in the message, we handle them in the order that they "keys" method provides which is
@@ -75,7 +94,6 @@ const workerActions = {
 
       state.schemas[schema.id] = hashObj(schema);
     });
-    // console.log(JSON.parse(JSON.stringify(state.resources.schemas)));
   },
 
   // Called when schema is updated
@@ -91,7 +109,8 @@ const workerActions = {
 
     // Delete the schema from the map, so if it comes back we don't ignore it if the hash is the same
     delete state.schemas[id];
-  }
+  },
+  ...advancedWorkerActions
 };
 
-onmessage = workerActions.onmessage; // bind everything to the worker's onmessage handler via the workerAction
+self.onmessage = workerActions.onmessage; // bind everything to the worker's onmessage handler via the workerAction

package/rancher-components/components/Form/Checkbox/Checkbox.vue

@@ -251,12 +251,12 @@ export default Vue.extend({
           <template v-else-if="label">{{ label }}</template>
           <i
             v-if="tooltipKey"
-            v-tooltip="t(tooltipKey)"
+            v-clean-tooltip="t(tooltipKey)"
             class="checkbox-info icon icon-info icon-lg"
           />
           <i
             v-else-if="tooltip"
-            v-tooltip="tooltip"
+            v-clean-tooltip="tooltip"
             class="checkbox-info icon icon-info icon-lg"
           />
         </slot>

package/rancher-components/components/Form/Radio/RadioGroup.vue

@@ -184,12 +184,12 @@ export default Vue.extend({
           </template>
           <i
             v-if="tooltipKey"
-            v-tooltip="t(tooltipKey)"
+            v-clean-tooltip="t(tooltipKey)"
             class="icon icon-info icon-lg"
           />
           <i
             v-else-if="tooltip"
-            v-tooltip="tooltip"
+            v-clean-tooltip="tooltip"
             class="icon icon-info icon-lg"
           />
         </h3>

package/rancher-components/components/LabeledTooltip/LabeledTooltip.vue

@@ -44,7 +44,7 @@ export default Vue.extend({
   >
     <template v-if="hover">
       <i
-        v-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
+        v-clean-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value"
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
       />