dashboard-shell-shell 1.0.1000000116 → 1.0.1000000117

package/components/rancherSortableTable/advanced-filtering.js

@@ -1,272 +0,0 @@
-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

@@ -1,117 +0,0 @@
-/* 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

@@ -1,290 +0,0 @@
-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;
-}