@rancher/shell 0.1.21 → 0.2.1

package/components/SortableTable/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/SortableTable/filtering.js

@@ -1,6 +1,10 @@
 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 {
@@ -29,6 +33,69 @@ export default {
     }),
     */
     filteredRows() {
+      // 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;
 
@@ -61,20 +128,7 @@ export default {
         let hits = 0;
         let mainFound = true;
 
-        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 ) {
-            mainFound = false;
-            break;
-          }
-        }
+        mainFound = handleStringSearch(searchFields, searchTokens, row);
 
         if ( subFields && subSearch) {
           const subRows = row[subSearch] || [];
@@ -82,20 +136,7 @@ export default {
           for ( let k = subRows.length - 1 ; k >= 0 ; k-- ) {
             let subFound = true;
 
-            for ( let l = 0 ; l < searchTokens.length ; l++ ) {
-              let expect = true;
-              let token = searchTokens[l];
-
-              if ( token.substr(0, 1) === '!' ) {
-                expect = false;
-                token = token.substr(1);
-              }
-
-              if ( matches(subFields, token, subRows[k]) !== expect ) {
-                subFound = false;
-                break;
-              }
-            }
+            subFound = handleStringSearch(subFields, searchTokens, row);
 
             if ( subFound ) {
               hits++;
@@ -114,7 +155,7 @@ export default {
       this.previousResult = out;
 
       return out;
-    },
+    }
   },
 
   watch: {
@@ -150,6 +191,24 @@ function columnsToSearchField(columns) {
 
 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 ) {
@@ -161,6 +220,8 @@ function matches(fields, token, item) {
 
     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(':');