dashboard-shell-shell 1.0.1000000117 → 1.0.1000000118

package/components/rancherSortableTable/advanced-filtering.js

@@ -0,0 +1,272 @@
+import { ADV_FILTER_ALL_COLS_VALUE, ADV_FILTER_ALL_COLS_LABEL } from './filtering';
+
+const DEFAULT_ADV_FILTER_COLS_VALUE = ADV_FILTER_ALL_COLS_VALUE;
+
+export default {
+  props: {
+    /**
+     * Group value
+     * To be used on the THead component when adv filtering is present
+     */
+    group: {
+      type:    String,
+      default: () => ''
+    },
+    /**
+     * Group options
+     * All of the grouping options available to be used on the THead component when adv filtering is present
+     */
+    groupOptions: {
+      type:    Array,
+      default: () => []
+    },
+    /**
+     * Flag that controls visibility of advanced filtering feature
+     */
+    hasAdvancedFiltering: {
+      type:    Boolean,
+      default: false
+    },
+    /**
+     * Flag that controls visibility of labels as possibe toggable cols to be displayed on the Sortable Table
+     */
+    advFilterHideLabelsAsCols: {
+      type:    Boolean,
+      default: false
+    },
+    /**
+     * Flag that prevents filtering by labels
+     */
+    advFilterPreventFilteringLabels: {
+      type:    Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      columnOptions:               [],
+      colOptionsWatcher:           null,
+      advancedFilteringVisibility: false,
+      advancedFilteringValues:     [],
+      advFilterSearchTerm:         null,
+      advFilterSelectedProp:       DEFAULT_ADV_FILTER_COLS_VALUE,
+      advFilterSelectedLabel:      ADV_FILTER_ALL_COLS_LABEL,
+      column:                      null,
+    };
+  },
+
+  mounted() {
+    if (this.hasAdvancedFiltering) {
+      // trigger to first populate the cols options for filters
+      this.updateColsOptions();
+    }
+  },
+
+  watch: {
+    advancedFilteringValues() {
+      // passing different dummy args to make sure update is triggered
+      this.watcherUpdateLiveAndDelayed(true, false);
+    },
+    advancedFilteringVisibility(neu) {
+      if (neu) {
+        // check if user clicked outside the advanced filter box
+        window.addEventListener('click', this.onClickOutside);
+
+        // update filtering options and toggable cols every time dropdown is open
+        this.updateColsOptions();
+      } else {
+        // unregister click event
+        window.removeEventListener('click', this.onClickOutside);
+      }
+    }
+  },
+
+  computed: {
+    advFilterSelectOptions() {
+      return this.columnOptions.filter((c) => c.isFilter && !c.preventFiltering);
+    },
+
+    advGroupOptions() {
+      return this.groupOptions.map((item) => {
+        return {
+          label: this.t(item.tooltipKey),
+          value: item.value
+        };
+      });
+    },
+  },
+
+  methods: {
+    handleColsVisibilyAndFiltering(cols) {
+      const allCols = cols;
+
+      this.columnOptions.forEach((advCol) => {
+        if (advCol.isTableOption) {
+          const index = allCols.findIndex((col) => col.name === advCol.name);
+
+          if (index !== -1) {
+            allCols[index].isColVisible = advCol.isColVisible;
+            allCols[index].isFilter = advCol.isFilter;
+          } else {
+            allCols.push(advCol);
+          }
+        }
+      });
+
+      return allCols;
+    },
+    // advanced filtering methods
+    setColsOptions() {
+      let opts = [];
+      const rowLabels = [];
+      const headerProps = [];
+
+      // Filter out any columns that are too heavy to show for large page sizes
+      const filteredHeaders = this.headers.slice().filter((c) => (!c.maxPageSize || (c.maxPageSize && c.maxPageSize >= this.perPage)));
+
+      // add table cols from config (headers)
+      filteredHeaders.forEach((prop) => {
+        const name = prop.name;
+        const label = prop.labelKey ? this.t(`${ prop.labelKey }`) : prop.label;
+        const isFilter = !!((!Object.keys(prop).includes('search') || prop.search));
+        let sortVal = prop.sort;
+        const valueProp = prop.valueProp || prop.value;
+        let value = null;
+        let isColVisible = true;
+
+        if (prop.sort && valueProp) {
+          if (typeof prop.sort === 'string') {
+            sortVal = prop.sort.includes(':') ? [prop.sort.split(':')[0]] : [prop.sort];
+          }
+
+          if (!sortVal.includes(valueProp)) {
+            value = JSON.stringify(sortVal.concat([valueProp]));
+          } else {
+            value = JSON.stringify([valueProp]);
+          }
+        } else if (valueProp) {
+          value = JSON.stringify([valueProp]);
+        } else {
+          value = null;
+        }
+
+        // maintain current visibility of cols if they exist already
+        if (this.columnOptions?.length) {
+          const opt = this.columnOptions.find((colOpt) => colOpt.name === name && colOpt.label === label);
+
+          if (opt) {
+            isColVisible = opt.isColVisible;
+          }
+        }
+
+        headerProps.push({
+          name,
+          label,
+          value,
+          isFilter,
+          isTableOption: true,
+          isColVisible
+        });
+      });
+
+      // add labels as table cols
+      if (this.rows.length) {
+        this.rows.forEach((row) => {
+          if (row.metadata?.labels && Object.keys(row.metadata?.labels).length) {
+            Object.keys(row.metadata?.labels).forEach((label) => {
+              const res = {
+                name:             label,
+                label,
+                value:            `metadata.labels.${ label }`,
+                isFilter:         true,
+                isTableOption:    true,
+                isColVisible:     false,
+                isLabel:          true,
+                preventFiltering: this.advFilterPreventFilteringLabels,
+                preventColToggle: this.advFilterHideLabelsAsCols
+              };
+
+              // maintain current visibility of cols if they exist already
+              if (this.columnOptions?.length) {
+                const opt = this.columnOptions.find((colOpt) => colOpt.name === label && colOpt.label === label);
+
+                if (opt) {
+                  res.isColVisible = opt.isColVisible;
+                }
+              }
+
+              if (!rowLabels.filter((row) => row.label === label).length) {
+                rowLabels.push(res);
+              }
+            });
+          }
+        });
+      }
+
+      opts = headerProps.concat(rowLabels);
+
+      // add find on all cols option...
+      if (opts.length) {
+        opts.unshift({
+          name:          ADV_FILTER_ALL_COLS_LABEL,
+          label:         ADV_FILTER_ALL_COLS_LABEL,
+          value:         ADV_FILTER_ALL_COLS_VALUE,
+          isFilter:      true,
+          isTableOption: false
+        });
+      }
+
+      return opts;
+    },
+    addAdvancedFilter() {
+      // set new advanced filter
+      if (this.advFilterSelectedProp && this.advFilterSearchTerm) {
+        this.advancedFilteringValues.push({
+          prop:  this.advFilterSelectedProp,
+          value: this.advFilterSearchTerm,
+          label: this.advFilterSelectedLabel
+        });
+
+        this.eventualSearchQuery = this.advancedFilteringValues;
+
+        this.advancedFilteringVisibility = false;
+        this.advFilterSelectedProp = DEFAULT_ADV_FILTER_COLS_VALUE;
+        this.advFilterSelectedLabel = ADV_FILTER_ALL_COLS_LABEL;
+        this.advFilterSearchTerm = null;
+      }
+    },
+    clearAllAdvancedFilters() {
+      this.advancedFilteringValues = [];
+      this.eventualSearchQuery = this.advancedFilteringValues;
+
+      this.advancedFilteringVisibility = false;
+      this.advFilterSelectedProp = DEFAULT_ADV_FILTER_COLS_VALUE;
+      this.advFilterSelectedLabel = ADV_FILTER_ALL_COLS_LABEL;
+      this.advFilterSearchTerm = null;
+    },
+    clearAdvancedFilter(index) {
+      this.advancedFilteringValues.splice(index, 1);
+      this.eventualSearchQuery = this.advancedFilteringValues;
+    },
+    onClickOutside(event) {
+      const advFilterBox = this.$refs['advanced-filter-group'];
+
+      if (!advFilterBox || advFilterBox.contains(event.target)) {
+        return;
+      }
+      this.advancedFilteringVisibility = false;
+    },
+    updateColsOptions() {
+      this.columnOptions = this.setColsOptions();
+    },
+
+    // cols visibility
+    changeColVisibility(colData) {
+      const index = this.columnOptions.findIndex((col) => col.label === colData.label);
+
+      if (index !== -1) {
+        this.columnOptions[index].isColVisible = colData.value;
+      }
+    },
+  },
+};

package/components/rancherSortableTable/debug.js

@@ -0,0 +1,117 @@
+/* eslint-disable no-console */
+
+// =========================================================================================
+// Debug helper
+// Adds a bunch of watches to help dignose computed properties bring re-evaluated
+// =========================================================================================
+
+export default {
+  watch: {
+    sortFields(neu, old) {
+      console.log('sortFields changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    descending(neu, old) {
+      console.log('descending changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    rows(neu, old) {
+      console.log('rows changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+
+      // console.log('Checking rows');
+
+      // let diff = 0;
+
+      // for (let i=0;i<neu.length;i++) {
+      //   const a = JSON.stringify(neu[i]);
+      //   const b = JSON.stringify(old[i]);
+
+      //   if (a !== b) {
+      //     console.log('rows differ ' + i);
+      //     diff++;
+      //   }
+      // }
+
+      // console.log(diff + ' rows changed');
+    },
+
+    pagingDisplay(neu, old) {
+      console.log('pagingDisplay changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    totalPages(neu, old) {
+      console.log('totalPages changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    pagedRows(neu, old) {
+      console.log('pagedRows changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    arrangedRows(neu, old) {
+      console.log('arrangedRows changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    searchFields(neu, old) {
+      console.log('searchFields changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    filteredRows(neu, old) {
+      console.log('filteredRows changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    groupedRows(neu, old) {
+      console.log('groupedRows changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    headers(neu, old) {
+      console.log('headers changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    displayRows(neu, old) {
+      console.log('displayRows changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    groupBy(neu, old) {
+      console.log('groupBy changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    groupSort(neu, old) {
+      console.log('groupSort changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    columns(neu, old) {
+      console.log('columns changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+  }
+};
+/* eslint-enable no-console */

package/components/rancherSortableTable/filtering.js

@@ -0,0 +1,290 @@
+import { get } from '@shell/utils/object';
+import { addObject, addObjects, isArray, removeAt } from '@shell/utils/array';
+
+export const ADV_FILTER_ALL_COLS_VALUE = 'allcols';
+export const ADV_FILTER_ALL_COLS_LABEL = 'All Columns';
+const LABEL_IDENTIFIER = ':::islabel';
+
+export default {
+  data() {
+    return {
+      searchQuery:    null,
+      previousFilter: null,
+      previousResult: null,
+    };
+  },
+
+  computed: {
+    searchFields() {
+      const out = columnsToSearchField(this.columns);
+
+      if ( this.extraSearchFields ) {
+        addObjects(out, this.extraSearchFields);
+      }
+
+      return out;
+    },
+
+    /*
+    subFields: computed('subHeaders.@each.{searchField,name}', 'extraSearchSubFields.[]', function() {
+      let out = headersToSearchField(get(this, 'subHeaders'));
+
+      return out.addObjects(get(this, 'extraSearchSubFields') || []);
+    }),
+    */
+    filteredRows() {
+      if (this.externalPaginationEnabled) {
+        return;
+      }
+
+      // PROP hasAdvancedFiltering comes from Advanced Filtering mixin (careful changing data var there...)
+      if (!this.hasAdvancedFiltering) {
+        return this.handleFiltering();
+      } else {
+        return this.handleAdvancedFiltering();
+      }
+    },
+  },
+
+  methods: {
+    handleAdvancedFiltering() {
+      this.subMatches = null;
+
+      if (this.searchQuery.length) {
+        const out = (this.arrangedRows || []).slice();
+
+        const res = out.filter((row) => {
+          return this.searchQuery.every((f) => {
+            if (f.prop === ADV_FILTER_ALL_COLS_VALUE) {
+              // advFilterSelectOptions comes from Advanced Filtering mixin
+              // remove the All Columns option from the list so that we don't iterate over it
+              const allCols = this.advFilterSelectOptions.slice(1);
+              let searchFields = [];
+
+              allCols.forEach((col) => {
+                if (col.value.includes('[') && col.value.includes(']')) {
+                  searchFields = searchFields.concat(JSON.parse(col.value));
+                } else {
+                  // this means we are on the presence of a label, which should be dealt
+                // carefully because of object path such row.metadata.labels."app.kubernetes.io/managed-by
+                  const value = col.isLabel ? `${ col.label }${ LABEL_IDENTIFIER }` : col.value;
+
+                  searchFields.push(value);
+                }
+              });
+
+              return handleStringSearch(searchFields, [f.value], row);
+            } else {
+              if (f.prop.includes('[') && f.prop.includes(']')) {
+                return handleStringSearch(JSON.parse(f.prop), [f.value], row);
+              }
+
+              let prop = f.prop;
+
+              // this means we are on the presence of a label, which should be dealt
+              // carefully because of object path such row.metadata.labels."app.kubernetes.io/managed-by"
+              if (f.prop.includes('metadata.labels')) {
+                prop = `${ f.label }${ LABEL_IDENTIFIER }`;
+              }
+
+              return handleStringSearch([prop], [f.value], row);
+            }
+          });
+        });
+
+        return res;
+      }
+
+      // return arrangedRows array if we don't have anything to search for...
+      return this.arrangedRows;
+    },
+
+    handleFiltering() {
+      const searchText = (this.searchQuery || '').trim().toLowerCase();
+      let out;
+
+      if ( searchText && this.previousResult && searchText.startsWith(this.previousFilter) ) {
+        // If the new search is an addition to the last one, we can start with the same set of results as last time
+        // and filter those down, since adding more searchText can only reduce the number of results.
+        out = this.previousResult.slice();
+      } else {
+        this.previousResult = null;
+        out = (this.arrangedRows || []).slice();
+      }
+
+      this.previousFilter = searchText;
+
+      if ( !searchText.length ) {
+        this.subMatches = null;
+        this.previousResult = null;
+
+        return out;
+      }
+
+      const searchFields = this.searchFields;
+      const searchTokens = searchText.split(/\s*[, ]\s*/);
+      const subSearch = this.subSearch;
+      const subFields = this.subFields;
+      const subMatches = {};
+
+      for ( let i = out.length - 1 ; i >= 0 ; i-- ) {
+        const row = out[i];
+        let hits = 0;
+        let mainFound = true;
+
+        mainFound = handleStringSearch(searchFields, searchTokens, row);
+
+        if ( subFields && subSearch) {
+          const subRows = row[subSearch] || [];
+
+          for ( let k = subRows.length - 1 ; k >= 0 ; k-- ) {
+            let subFound = true;
+
+            subFound = handleStringSearch(subFields, searchTokens, row);
+
+            if ( subFound ) {
+              hits++;
+            }
+          }
+
+          subMatches[get(row, this.keyField)] = hits;
+        }
+
+        if ( !mainFound && hits === 0 ) {
+          removeAt(out, i);
+        }
+      }
+
+      this.subMatches = subMatches;
+      this.previousResult = out;
+
+      return out;
+    }
+  },
+
+  watch: {
+    arrangedRows(q) {
+      // The rows changed so the old filter result is no longer useful
+      this.previousResult = null;
+    },
+
+    searchQuery() {
+      this.debouncedPaginationChanged();
+    },
+  },
+};
+
+function columnsToSearchField(columns) {
+  const out = [];
+
+  (columns || []).forEach((column) => {
+    const field = column.search;
+
+    if ( field ) {
+      if ( typeof field === 'string' ) {
+        addObject(out, field);
+      } else if ( isArray(field) ) {
+        addObjects(out, field);
+      }
+    } else if ( field === false ) {
+      // Don't add the name
+    } else {
+      // Use value/name as the default
+      addObject(out, column.value || column.name);
+    }
+  });
+
+  return out.filter((x) => !!x);
+}
+
+const ipLike = /^[0-9a-f\.:]+$/i;
+
+function handleStringSearch(searchFields, searchTokens, row) {
+  for ( let j = 0 ; j < searchTokens.length ; j++ ) {
+    let expect = true;
+    let token = searchTokens[j];
+
+    if ( token.substr(0, 1) === '!' ) {
+      expect = false;
+      token = token.substr(1);
+    }
+
+    if ( token && matches(searchFields, token, row) !== expect ) {
+      return false;
+    }
+
+    return true;
+  }
+}
+
+function matches(fields, token, item) {
+  for ( let field of fields ) {
+    if ( !field ) {
+      continue;
+    }
+
+    // some items might not even have metadata.labels or metadata.labels.something... ignore those items. Nothing to filter by
+    if (typeof field !== 'function' &&
+    field.includes(LABEL_IDENTIFIER) &&
+    (!item.metadata.labels || !item.metadata.labels[field.replace(LABEL_IDENTIFIER, '')])) {
+      continue;
+    }
+
+    let modifier;
+    let val;
+
+    if (typeof field === 'function') {
+      val = field(item);
+    } else if (field.includes(LABEL_IDENTIFIER)) {
+      val = item.metadata.labels[field.replace(LABEL_IDENTIFIER, '')];
+    } else {
+      const idx = field.indexOf(':');
+
+      if ( idx > 0 ) {
+        modifier = field.substr(idx + 1);
+        field = field.substr(0, idx);
+      }
+
+      if ( field.includes('.') ) {
+        val = get(item, field);
+      } else {
+        val = item[field];
+      }
+    }
+
+    if ( val === undefined ) {
+      continue;
+    }
+
+    val = (`${ val }`).toLowerCase();
+    if ( !val ) {
+      continue;
+    }
+
+    if ( !modifier ) {
+      if ( val.includes((`${ token }`).toLowerCase()) ) {
+        return true;
+      }
+    } else if ( modifier === 'exact' ) {
+      if ( val === token ) {
+        return true;
+      }
+    } else if ( modifier === 'ip' ) {
+      const tokenMayBeIp = ipLike.test(token);
+
+      if ( tokenMayBeIp ) {
+        const re = new RegExp(`(?:^|\\.)${ token }(?:\\.|$)`);
+
+        if ( re.test(val) ) {
+          return true;
+        }
+      }
+    } else if ( modifier === 'prefix' ) {
+      if ( val.indexOf(token) === 0) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}