19690: dummy option now displays in colimn-selector
authorLisa Knox <lisaknox83@gmail.com>
Sat, 19 Nov 2022 22:19:59 +0000 (17:19 -0500)
committerLisa Knox <lisaknox83@gmail.com>
Mon, 28 Nov 2022 16:38:34 +0000 (11:38 -0500)
Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

public/config.json [new file with mode: 0644]
src/common/config.ts
src/components/column-selector/column-selector.tsx
src/components/data-explorer/data-explorer.tsx
src/components/data-table/data-table.tsx
src/store/data-explorer/data-explorer-reducer.ts
src/views-components/data-explorer/data-explorer.tsx

diff --git a/public/config.json b/public/config.json
new file mode 100644 (file)
index 0000000..01af6d6
--- /dev/null
@@ -0,0 +1,3 @@
+{
+  "API_HOST":"tordo.arvadosapi.com"
+}
\ No newline at end of file
index 574445df09b05f5f47a8b0b57fc190352a8e1237..724fb79542352482984667114cffa76c58a5142b 100644 (file)
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import Axios from "axios";
+import Axios from 'axios';
 
-export const WORKBENCH_CONFIG_URL = process.env.REACT_APP_ARVADOS_CONFIG_URL || "/config.json";
+export const WORKBENCH_CONFIG_URL =
+  process.env.REACT_APP_ARVADOS_CONFIG_URL || '/config.json';
 
 interface WorkbenchConfig {
-    API_HOST: string;
-    VOCABULARY_URL?: string;
-    FILE_VIEWERS_CONFIG_URL?: string;
+  API_HOST: string;
+  VOCABULARY_URL?: string;
+  FILE_VIEWERS_CONFIG_URL?: string;
 }
 
 export interface ClusterConfigJSON {
-    API: {
-        UnfreezeProjectRequiresAdmin: boolean
-    },
-    ClusterID: string;
-    RemoteClusters: {
-        [key: string]: {
-            ActivateUsers: boolean
-            Host: string
-            Insecure: boolean
-            Proxy: boolean
-            Scheme: string
-        }
+  API: {
+    UnfreezeProjectRequiresAdmin: boolean;
+  };
+  ClusterID: string;
+  RemoteClusters: {
+    [key: string]: {
+      ActivateUsers: boolean;
+      Host: string;
+      Insecure: boolean;
+      Proxy: boolean;
+      Scheme: string;
     };
-    Mail?: {
-        SupportEmailAddress: string;
+  };
+  Mail?: {
+    SupportEmailAddress: string;
+  };
+  Services: {
+    Controller: {
+      ExternalURL: string;
     };
-    Services: {
-        Controller: {
-            ExternalURL: string
-        }
-        Workbench1: {
-            ExternalURL: string
-        }
-        Workbench2: {
-            ExternalURL: string
-        }
-        Websocket: {
-            ExternalURL: string
-        }
-        WebDAV: {
-            ExternalURL: string
-        },
-        WebDAVDownload: {
-            ExternalURL: string
-        },
-        WebShell: {
-            ExternalURL: string
-        }
+    Workbench1: {
+      ExternalURL: string;
     };
-    Workbench: {
-        DisableSharingURLsUI: boolean;
-        ArvadosDocsite: string;
-        FileViewersConfigURL: string;
-        WelcomePageHTML: string;
-        InactivePageHTML: string;
-        SSHHelpPageHTML: string;
-        SSHHelpHostSuffix: string;
-        SiteName: string;
-        IdleTimeout: string;
+    Workbench2: {
+      ExternalURL: string;
     };
-    Login: {
-        LoginCluster: string;
-        Google: {
-            Enable: boolean;
-        }
-        LDAP: {
-            Enable: boolean;
-        }
-        OpenIDConnect: {
-            Enable: boolean;
-        }
-        PAM: {
-            Enable: boolean;
-        }
-        SSO: {
-            Enable: boolean;
-        }
-        Test: {
-            Enable: boolean;
-        }
+    Websocket: {
+      ExternalURL: string;
     };
-    Collections: {
-        ForwardSlashNameSubstitution: string;
-        ManagedProperties?: {
-            [key: string]: {
-                Function: string,
-                Value: string,
-                Protected?: boolean,
-            }
-        },
-        TrustAllContent: boolean
+    WebDAV: {
+      ExternalURL: string;
     };
-    Volumes: {
-        [key: string]: {
-            StorageClasses: {
-                [key: string]: boolean;
-            }
-        }
+    WebDAVDownload: {
+      ExternalURL: string;
+    };
+    WebShell: {
+      ExternalURL: string;
+    };
+  };
+  Workbench: {
+    DisableSharingURLsUI: boolean;
+    ArvadosDocsite: string;
+    FileViewersConfigURL: string;
+    WelcomePageHTML: string;
+    InactivePageHTML: string;
+    SSHHelpPageHTML: string;
+    SSHHelpHostSuffix: string;
+    SiteName: string;
+    IdleTimeout: string;
+  };
+  Login: {
+    LoginCluster: string;
+    Google: {
+      Enable: boolean;
+    };
+    LDAP: {
+      Enable: boolean;
+    };
+    OpenIDConnect: {
+      Enable: boolean;
     };
+    PAM: {
+      Enable: boolean;
+    };
+    SSO: {
+      Enable: boolean;
+    };
+    Test: {
+      Enable: boolean;
+    };
+  };
+  Collections: {
+    ForwardSlashNameSubstitution: string;
+    ManagedProperties?: {
+      [key: string]: {
+        Function: string;
+        Value: string;
+        Protected?: boolean;
+      };
+    };
+    TrustAllContent: boolean;
+  };
+  Volumes: {
+    [key: string]: {
+      StorageClasses: {
+        [key: string]: boolean;
+      };
+    };
+  };
 }
 
 export class Config {
-    baseUrl!: string;
-    keepWebServiceUrl!: string;
-    keepWebInlineServiceUrl!: string;
-    remoteHosts!: {
-        [key: string]: string
-    };
-    rootUrl!: string;
-    uuidPrefix!: string;
-    websocketUrl!: string;
-    workbenchUrl!: string;
-    workbench2Url!: string;
-    vocabularyUrl!: string;
-    fileViewersConfigUrl!: string;
-    loginCluster!: string;
-    clusterConfig!: ClusterConfigJSON;
-    apiRevision!: number;
+  baseUrl!: string;
+  keepWebServiceUrl!: string;
+  keepWebInlineServiceUrl!: string;
+  remoteHosts!: {
+    [key: string]: string;
+  };
+  rootUrl!: string;
+  uuidPrefix!: string;
+  websocketUrl!: string;
+  workbenchUrl!: string;
+  workbench2Url!: string;
+  vocabularyUrl!: string;
+  fileViewersConfigUrl!: string;
+  loginCluster!: string;
+  clusterConfig!: ClusterConfigJSON;
+  apiRevision!: number;
 }
 
 export const buildConfig = (clusterConfig: ClusterConfigJSON): Config => {
-    const clusterConfigJSON = removeTrailingSlashes(clusterConfig);
-    const config = new Config();
-    config.rootUrl = clusterConfigJSON.Services.Controller.ExternalURL;
-    config.baseUrl = `${config.rootUrl}/${ARVADOS_API_PATH}`;
-    config.uuidPrefix = clusterConfigJSON.ClusterID;
-    config.websocketUrl = clusterConfigJSON.Services.Websocket.ExternalURL;
-    config.workbench2Url = clusterConfigJSON.Services.Workbench2.ExternalURL;
-    config.workbenchUrl = clusterConfigJSON.Services.Workbench1.ExternalURL;
-    config.keepWebServiceUrl = clusterConfigJSON.Services.WebDAVDownload.ExternalURL;
-    config.keepWebInlineServiceUrl = clusterConfigJSON.Services.WebDAV.ExternalURL;
-    config.loginCluster = clusterConfigJSON.Login.LoginCluster;
-    config.clusterConfig = clusterConfigJSON;
-    config.apiRevision = 0;
-    mapRemoteHosts(clusterConfigJSON, config);
-    return config;
+  const clusterConfigJSON = removeTrailingSlashes(clusterConfig);
+  const config = new Config();
+  config.rootUrl = clusterConfigJSON.Services.Controller.ExternalURL;
+  config.baseUrl = `${config.rootUrl}/${ARVADOS_API_PATH}`;
+  config.uuidPrefix = clusterConfigJSON.ClusterID;
+  config.websocketUrl = clusterConfigJSON.Services.Websocket.ExternalURL;
+  config.workbench2Url = clusterConfigJSON.Services.Workbench2.ExternalURL;
+  config.workbenchUrl = clusterConfigJSON.Services.Workbench1.ExternalURL;
+  config.keepWebServiceUrl =
+    clusterConfigJSON.Services.WebDAVDownload.ExternalURL;
+  config.keepWebInlineServiceUrl =
+    clusterConfigJSON.Services.WebDAV.ExternalURL;
+  config.loginCluster = clusterConfigJSON.Login.LoginCluster;
+  config.clusterConfig = clusterConfigJSON;
+  config.apiRevision = 0;
+  mapRemoteHosts(clusterConfigJSON, config);
+  return config;
 };
 
 export const getStorageClasses = (config: Config): string[] => {
-    const classes: Set<string> = new Set(['default']);
-    const volumes = config.clusterConfig.Volumes;
-    Object.keys(volumes).forEach(v => {
-        Object.keys(volumes[v].StorageClasses || {}).forEach(sc => {
-            if (volumes[v].StorageClasses[sc]) {
-                classes.add(sc);
-            }
-        });
+  const classes: Set<string> = new Set(['default']);
+  const volumes = config.clusterConfig.Volumes;
+  Object.keys(volumes).forEach((v) => {
+    Object.keys(volumes[v].StorageClasses || {}).forEach((sc) => {
+      if (volumes[v].StorageClasses[sc]) {
+        classes.add(sc);
+      }
     });
-    return Array.from(classes);
+  });
+  return Array.from(classes);
 };
 
 const getApiRevision = async (apiUrl: string) => {
-    try {
-        const dd = (await Axios.get<any>(`${apiUrl}/${DISCOVERY_DOC_PATH}`)).data;
-        return parseInt(dd.revision, 10) || 0;
-    } catch {
-        console.warn("Unable to get API Revision number, defaulting to zero. Some features may not work properly.");
-        return 0;
-    }
+  try {
+    const dd = (await Axios.get<any>(`${apiUrl}/${DISCOVERY_DOC_PATH}`)).data;
+    return parseInt(dd.revision, 10) || 0;
+  } catch {
+    console.warn(
+      'Unable to get API Revision number, defaulting to zero. Some features may not work properly.'
+    );
+    return 0;
+  }
 };
 
-const removeTrailingSlashes = (config: ClusterConfigJSON): ClusterConfigJSON => {
-    const svcs: any = {};
-    Object.keys(config.Services).forEach((s) => {
-        svcs[s] = config.Services[s];
-        if (svcs[s].hasOwnProperty('ExternalURL')) {
-            svcs[s].ExternalURL = svcs[s].ExternalURL.replace(/\/+$/, '');
-        }
-    });
-    return { ...config, Services: svcs };
+const removeTrailingSlashes = (
+  config: ClusterConfigJSON
+): ClusterConfigJSON => {
+  const svcs: any = {};
+  Object.keys(config.Services).forEach((s) => {
+    svcs[s] = config.Services[s];
+    if (svcs[s].hasOwnProperty('ExternalURL')) {
+      svcs[s].ExternalURL = svcs[s].ExternalURL.replace(/\/+$/, '');
+    }
+  });
+  return { ...config, Services: svcs };
 };
 
 export const fetchConfig = () => {
-    return Axios
-        .get<WorkbenchConfig>(WORKBENCH_CONFIG_URL + "?nocache=" + (new Date()).getTime())
-        .then(response => response.data)
-        .catch(() => {
-            console.warn(`There was an exception getting the Workbench config file at ${WORKBENCH_CONFIG_URL}. Using defaults instead.`);
-            return Promise.resolve(getDefaultConfig());
-        })
-        .then(workbenchConfig => {
-            if (workbenchConfig.API_HOST === undefined) {
-                throw new Error(`Unable to start Workbench. API_HOST is undefined in ${WORKBENCH_CONFIG_URL} or the environment.`);
-            }
-            return Axios.get<ClusterConfigJSON>(getClusterConfigURL(workbenchConfig.API_HOST)).then(async response => {
-                const apiRevision = await getApiRevision(response.data.Services.Controller.ExternalURL.replace(/\/+$/, ''));
-                const config = { ...buildConfig(response.data), apiRevision };
-                const warnLocalConfig = (varName: string) => console.warn(
-                    `A value for ${varName} was found in ${WORKBENCH_CONFIG_URL}. To use the Arvados centralized configuration instead, \
-remove the entire ${varName} entry from ${WORKBENCH_CONFIG_URL}`);
+  return Axios.get<WorkbenchConfig>(
+    WORKBENCH_CONFIG_URL + '?nocache=' + new Date().getTime()
+  )
+    .then((response) => response.data)
+    .catch(() => {
+      console.warn(
+        `There was an exception getting the Workbench config file at ${WORKBENCH_CONFIG_URL}. Using defaults instead.`
+      );
+      return Promise.resolve(getDefaultConfig());
+    })
+    .then((workbenchConfig) => {
+      if (workbenchConfig.API_HOST === undefined) {
+        throw new Error(
+          `Unable to start Workbench. API_HOST is undefined in ${WORKBENCH_CONFIG_URL} or the environment.`
+        );
+      }
+      return Axios.get<ClusterConfigJSON>(
+        getClusterConfigURL(workbenchConfig.API_HOST)
+      ).then(async (response) => {
+        const apiRevision = await getApiRevision(
+          response.data.Services.Controller.ExternalURL.replace(/\/+$/, '')
+        );
+        const config = { ...buildConfig(response.data), apiRevision };
+        const warnLocalConfig = (varName: string) =>
+          console.warn(
+            `A value for ${varName} was found in ${WORKBENCH_CONFIG_URL}. To use the Arvados centralized configuration instead, \
+remove the entire ${varName} entry from ${WORKBENCH_CONFIG_URL}`
+          );
 
-                // Check if the workbench config has an entry for vocabulary and file viewer URLs
-                // If so, use these values (even if it is an empty string), but print a console warning.
-                // Otherwise, use the cluster config.
-                let fileViewerConfigUrl;
-                if (workbenchConfig.FILE_VIEWERS_CONFIG_URL !== undefined) {
-                    warnLocalConfig("FILE_VIEWERS_CONFIG_URL");
-                    fileViewerConfigUrl = workbenchConfig.FILE_VIEWERS_CONFIG_URL;
-                }
-                else {
-                    fileViewerConfigUrl = config.clusterConfig.Workbench.FileViewersConfigURL || "/file-viewers-example.json";
-                }
-                config.fileViewersConfigUrl = fileViewerConfigUrl;
+        // Check if the workbench config has an entry for vocabulary and file viewer URLs
+        // If so, use these values (even if it is an empty string), but print a console warning.
+        // Otherwise, use the cluster config.
+        let fileViewerConfigUrl;
+        if (workbenchConfig.FILE_VIEWERS_CONFIG_URL !== undefined) {
+          warnLocalConfig('FILE_VIEWERS_CONFIG_URL');
+          fileViewerConfigUrl = workbenchConfig.FILE_VIEWERS_CONFIG_URL;
+        } else {
+          fileViewerConfigUrl =
+            config.clusterConfig.Workbench.FileViewersConfigURL ||
+            '/file-viewers-example.json';
+        }
+        config.fileViewersConfigUrl = fileViewerConfigUrl;
 
-                if (workbenchConfig.VOCABULARY_URL !== undefined) {
-                    console.warn(`A value for VOCABULARY_URL was found in ${WORKBENCH_CONFIG_URL}. It will be ignored as the cluster already provides its own endpoint, you can safely remove it.`)
-                }
-                config.vocabularyUrl = getVocabularyURL(workbenchConfig.API_HOST);
+        if (workbenchConfig.VOCABULARY_URL !== undefined) {
+          console.warn(
+            `A value for VOCABULARY_URL was found in ${WORKBENCH_CONFIG_URL}. It will be ignored as the cluster already provides its own endpoint, you can safely remove it.`
+          );
+        }
+        config.vocabularyUrl = getVocabularyURL(workbenchConfig.API_HOST);
 
-                return { config, apiHost: workbenchConfig.API_HOST };
-            });
-        });
+        return { config, apiHost: workbenchConfig.API_HOST };
+      });
+    });
 };
 
 // Maps remote cluster hosts and removes the default RemoteCluster entry
-export const mapRemoteHosts = (clusterConfigJSON: ClusterConfigJSON, config: Config) => {
-    config.remoteHosts = {};
-    Object.keys(clusterConfigJSON.RemoteClusters).forEach(k => { config.remoteHosts[k] = clusterConfigJSON.RemoteClusters[k].Host; });
-    delete config.remoteHosts["*"];
+export const mapRemoteHosts = (
+  clusterConfigJSON: ClusterConfigJSON,
+  config: Config
+) => {
+  config.remoteHosts = {};
+  Object.keys(clusterConfigJSON.RemoteClusters).forEach((k) => {
+    config.remoteHosts[k] = clusterConfigJSON.RemoteClusters[k].Host;
+  });
+  delete config.remoteHosts['*'];
 };
 
-export const mockClusterConfigJSON = (config: Partial<ClusterConfigJSON>): ClusterConfigJSON => ({
-    API: {
-        UnfreezeProjectRequiresAdmin: false,
+export const mockClusterConfigJSON = (
+  config: Partial<ClusterConfigJSON>
+): ClusterConfigJSON => ({
+  API: {
+    UnfreezeProjectRequiresAdmin: false,
+  },
+  ClusterID: '',
+  RemoteClusters: {},
+  Services: {
+    Controller: { ExternalURL: '' },
+    Workbench1: { ExternalURL: '' },
+    Workbench2: { ExternalURL: '' },
+    Websocket: { ExternalURL: '' },
+    WebDAV: { ExternalURL: '' },
+    WebDAVDownload: { ExternalURL: '' },
+    WebShell: { ExternalURL: '' },
+  },
+  Workbench: {
+    DisableSharingURLsUI: false,
+    ArvadosDocsite: '',
+    FileViewersConfigURL: '',
+    WelcomePageHTML: '',
+    InactivePageHTML: '',
+    SSHHelpPageHTML: '',
+    SSHHelpHostSuffix: '',
+    SiteName: '',
+    IdleTimeout: '0s',
+  },
+  Login: {
+    LoginCluster: '',
+    Google: {
+      Enable: false,
     },
-    ClusterID: "",
-    RemoteClusters: {},
-    Services: {
-        Controller: { ExternalURL: "" },
-        Workbench1: { ExternalURL: "" },
-        Workbench2: { ExternalURL: "" },
-        Websocket: { ExternalURL: "" },
-        WebDAV: { ExternalURL: "" },
-        WebDAVDownload: { ExternalURL: "" },
-        WebShell: { ExternalURL: "" },
+    LDAP: {
+      Enable: false,
     },
-    Workbench: {
-        DisableSharingURLsUI: false,
-        ArvadosDocsite: "",
-        FileViewersConfigURL: "",
-        WelcomePageHTML: "",
-        InactivePageHTML: "",
-        SSHHelpPageHTML: "",
-        SSHHelpHostSuffix: "",
-        SiteName: "",
-        IdleTimeout: "0s",
+    OpenIDConnect: {
+      Enable: false,
     },
-    Login: {
-        LoginCluster: "",
-        Google: {
-            Enable: false,
-        },
-        LDAP: {
-            Enable: false,
-        },
-        OpenIDConnect: {
-            Enable: false,
-        },
-        PAM: {
-            Enable: false,
-        },
-        SSO: {
-            Enable: false,
-        },
-        Test: {
-            Enable: false,
-        },
+    PAM: {
+      Enable: false,
     },
-    Collections: {
-        ForwardSlashNameSubstitution: "",
-        TrustAllContent: false,
+    SSO: {
+      Enable: false,
     },
-    Volumes: {},
-    ...config
+    Test: {
+      Enable: false,
+    },
+  },
+  Collections: {
+    ForwardSlashNameSubstitution: '',
+    TrustAllContent: false,
+  },
+  Volumes: {},
+  ...config,
 });
 
 export const mockConfig = (config: Partial<Config>): Config => ({
-    baseUrl: "",
-    keepWebServiceUrl: "",
-    keepWebInlineServiceUrl: "",
-    remoteHosts: {},
-    rootUrl: "",
-    uuidPrefix: "",
-    websocketUrl: "",
-    workbenchUrl: "",
-    workbench2Url: "",
-    vocabularyUrl: "",
-    fileViewersConfigUrl: "",
-    loginCluster: "",
-    clusterConfig: mockClusterConfigJSON({}),
-    apiRevision: 0,
-    ...config
+  baseUrl: '',
+  keepWebServiceUrl: '',
+  keepWebInlineServiceUrl: '',
+  remoteHosts: {},
+  rootUrl: '',
+  uuidPrefix: '',
+  websocketUrl: '',
+  workbenchUrl: '',
+  workbench2Url: '',
+  vocabularyUrl: '',
+  fileViewersConfigUrl: '',
+  loginCluster: '',
+  clusterConfig: mockClusterConfigJSON({}),
+  apiRevision: 0,
+  ...config,
 });
 
 const getDefaultConfig = (): WorkbenchConfig => {
-    let apiHost = "";
-    const envHost = process.env.REACT_APP_ARVADOS_API_HOST;
-    if (envHost !== undefined) {
-        console.warn(`Using default API host ${envHost}.`);
-        apiHost = envHost;
-    }
-    else {
-        console.warn(`No API host was found in the environment. Workbench may not be able to communicate with Arvados components.`);
-    }
-    return {
-        API_HOST: apiHost,
-        VOCABULARY_URL: undefined,
-        FILE_VIEWERS_CONFIG_URL: undefined,
-    };
+  let apiHost = '';
+  const envHost = process.env.REACT_APP_ARVADOS_API_HOST;
+  if (envHost !== undefined) {
+    console.warn(`Using default API host ${envHost}.`);
+    apiHost = envHost;
+  } else {
+    console.warn(
+      `No API host was found in the environment. Workbench may not be able to communicate with Arvados components.`
+    );
+  }
+  return {
+    API_HOST: apiHost,
+    VOCABULARY_URL: undefined,
+    FILE_VIEWERS_CONFIG_URL: undefined,
+  };
 };
 
-export const ARVADOS_API_PATH = "arvados/v1";
-export const CLUSTER_CONFIG_PATH = "arvados/v1/config";
-export const VOCABULARY_PATH = "arvados/v1/vocabulary";
-export const DISCOVERY_DOC_PATH = "discovery/v1/apis/arvados/v1/rest";
-export const getClusterConfigURL = (apiHost: string) => `https://${apiHost}/${CLUSTER_CONFIG_PATH}?nocache=${(new Date()).getTime()}`;
-export const getVocabularyURL = (apiHost: string) => `https://${apiHost}/${VOCABULARY_PATH}?nocache=${(new Date()).getTime()}`;
+export const ARVADOS_API_PATH = 'arvados/v1';
+export const CLUSTER_CONFIG_PATH = 'arvados/v1/config';
+export const VOCABULARY_PATH = 'arvados/v1/vocabulary';
+export const DISCOVERY_DOC_PATH = 'discovery/v1/apis/arvados/v1/rest';
+export const getClusterConfigURL = (apiHost: string) =>
+  `https://${apiHost}/${CLUSTER_CONFIG_PATH}?nocache=${new Date().getTime()}`;
+export const getVocabularyURL = (apiHost: string) =>
+  `https://${apiHost}/${VOCABULARY_PATH}?nocache=${new Date().getTime()}`;
index 5fbef6b62c1e37d2c882c5968f3983d3f5f2fcf6..441d8ec83da77a5ce688744776da168b3860ccf8 100644 (file)
@@ -10,6 +10,7 @@ import { Popover } from "../popover/popover";
 import { IconButtonProps } from '@material-ui/core/IconButton';
 import { DataColumns } from '../data-table/data-table';
 import { ArvadosTheme } from "common/custom-theme";
+import { ResourceName } from 'views-components/data-explorer/renderers';
 
 interface ColumnSelectorDataProps {
     columns: DataColumns<any>;
@@ -30,7 +31,15 @@ export type ColumnSelectorProps = ColumnSelectorDataProps & WithStyles<CssRules>
 
 export const ColumnSelector = withStyles(styles)(
     ({ columns, onColumnToggle, classes }: ColumnSelectorProps) =>
-        <Popover triggerComponent={ColumnSelectorTrigger}>
+    {console.log('COLUMN_SELECTOR',columns)
+    columns = [...columns, {
+        name:'bananas',
+        selected: false,
+        configurable: true, filters:{}, render: (uuid)=><ResourceName uuid='uuid'/>
+    }
+]
+    console.log('COLUMN_SELECTOR',columns)
+       return <Popover triggerComponent={ColumnSelectorTrigger}>
             <Paper>
                 <List dense>
                     {columns
@@ -52,7 +61,7 @@ export const ColumnSelector = withStyles(styles)(
                         )}
                 </List>
             </Paper>
-        </Popover>
+        </Popover>}
 );
 
 export const ColumnSelectorTrigger = (props: IconButtonProps) =>
index c7a296a60f4aebe5d6ad946265484be9ae148620..cf45e24fbb75bd271497652bf099595ca0f28327 100644 (file)
@@ -140,6 +140,7 @@ export const DataExplorer = withStyles(styles)(
         }
 
         componentDidMount() {
+            // console.log('DATA_EXPLORER:',this.props)
             if (this.props.onSetColumns) {
                 this.props.onSetColumns(this.props.columns);
             }
index d942234d0fcb4841d609850de408ed3c3cdfe3e1..10446d1a306e4923883bfac2f966e23420e67354 100644 (file)
@@ -87,6 +87,7 @@ type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
 export const DataTable = withStyles(styles)(
     class Component<T> extends React.Component<DataTableProps<T>> {
         render() {
+            // console.log('DATA_TABLE, RENDER:' , this)
             const { items, classes, working } = this.props;
             return <div className={classes.root}>
                 <div className={classes.content}>
index 1e5cd88fa1299c2eea4f42fed52ad46a4c8445e3..4ae01adfc16d812bd43cec7a6dd944a6f6f13db1 100644 (file)
 // SPDX-License-Identifier: AGPL-3.0
 
 import {
-    DataColumn,
-    resetSortDirection,
-    SortDirection,
-    toggleSortDirection
-} from "components/data-table/data-column";
-import { DataExplorerAction, dataExplorerActions, DataTableRequestState } from "./data-explorer-action";
-import { DataColumns, DataTableFetchMode } from "components/data-table/data-table";
-import { DataTableFilters } from "components/data-table-filters/data-table-filters-tree";
+  DataColumn,
+  resetSortDirection,
+  SortDirection,
+  toggleSortDirection,
+} from 'components/data-table/data-column';
+import {
+  DataExplorerAction,
+  dataExplorerActions,
+  DataTableRequestState,
+} from './data-explorer-action';
+import {
+  DataColumns,
+  DataTableFetchMode,
+} from 'components/data-table/data-table';
+import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree';
 
 export interface DataExplorer {
-    fetchMode: DataTableFetchMode;
-    columns: DataColumns<any>;
-    items: any[];
-    itemsAvailable: number;
-    page: number;
-    rowsPerPage: number;
-    rowsPerPageOptions: number[];
-    searchValue: string;
-    working?: boolean;
-    requestState: DataTableRequestState;
+  fetchMode: DataTableFetchMode;
+  columns: DataColumns<any>;
+  items: any[];
+  itemsAvailable: number;
+  page: number;
+  rowsPerPage: number;
+  rowsPerPageOptions: number[];
+  searchValue: string;
+  working?: boolean;
+  requestState: DataTableRequestState;
 }
 
 export const initialDataExplorer: DataExplorer = {
-    fetchMode: DataTableFetchMode.PAGINATED,
-    columns: [],
-    items: [],
-    itemsAvailable: 0,
-    page: 0,
-    rowsPerPage: 50,
-    rowsPerPageOptions: [10, 20, 50, 100, 200, 500],
-    searchValue: "",
-    requestState: DataTableRequestState.IDLE
+  fetchMode: DataTableFetchMode.PAGINATED,
+  columns: [],
+  items: [],
+  itemsAvailable: 0,
+  page: 0,
+  rowsPerPage: 50,
+  rowsPerPageOptions: [10, 20, 50, 100, 200, 500],
+  searchValue: '',
+  requestState: DataTableRequestState.IDLE,
 };
 
 export type DataExplorerState = Record<string, DataExplorer>;
 
-export const dataExplorerReducer = (state: DataExplorerState = {}, action: DataExplorerAction) =>
-    dataExplorerActions.match(action, {
-        CLEAR: ({ id }) =>
-            update(state, id, explorer => ({ ...explorer, page: 0, itemsAvailable: 0, items: [] })),
-
-        RESET_PAGINATION: ({ id }) =>
-            update(state, id, explorer => ({ ...explorer, page: 0 })),
-
-        SET_FETCH_MODE: ({ id, fetchMode }) =>
-            update(state, id, explorer => ({ ...explorer, fetchMode })),
-
-        SET_COLUMNS: ({ id, columns }) =>
-            update(state, id, setColumns(columns)),
-
-        SET_FILTERS: ({ id, columnName, filters }) =>
-            update(state, id, mapColumns(setFilters(columnName, filters))),
-
-        SET_ITEMS: ({ id, items, itemsAvailable, page, rowsPerPage }) =>
-            update(state, id, explorer => ({ ...explorer, items, itemsAvailable, page: page || 0, rowsPerPage })),
-
-        APPEND_ITEMS: ({ id, items, itemsAvailable, page, rowsPerPage }) =>
-            update(state, id, explorer => ({
-                ...explorer,
-                items: state[id].items.concat(items),
-                itemsAvailable: state[id].itemsAvailable + itemsAvailable,
-                page,
-                rowsPerPage
-            })),
-
-        SET_PAGE: ({ id, page }) =>
-            update(state, id, explorer => ({ ...explorer, page })),
-
-        SET_ROWS_PER_PAGE: ({ id, rowsPerPage }) =>
-            update(state, id, explorer => ({ ...explorer, rowsPerPage })),
-
-        SET_EXPLORER_SEARCH_VALUE: ({ id, searchValue }) =>
-            update(state, id, explorer => ({ ...explorer, searchValue })),
-
-        SET_REQUEST_STATE: ({ id, requestState }) =>
-            update(state, id, explorer => ({ ...explorer, requestState })),
-
-        TOGGLE_SORT: ({ id, columnName }) =>
-            update(state, id, mapColumns(toggleSort(columnName))),
-
-        TOGGLE_COLUMN: ({ id, columnName }) =>
-            update(state, id, mapColumns(toggleColumn(columnName))),
-
-        default: () => state
-    });
-
+export const dataExplorerReducer = (
+  state: DataExplorerState = {},
+  action: DataExplorerAction
+) => {
+  //   console.log('DATA_EXPLORERE_REDUCER, satate:', state);
+  return dataExplorerActions.match(action, {
+    CLEAR: ({ id }) =>
+      update(state, id, (explorer) => ({
+        ...explorer,
+        page: 0,
+        itemsAvailable: 0,
+        items: [],
+      })),
+
+    RESET_PAGINATION: ({ id }) =>
+      update(state, id, (explorer) => ({ ...explorer, page: 0 })),
+
+    SET_FETCH_MODE: ({ id, fetchMode }) =>
+      update(state, id, (explorer) => ({ ...explorer, fetchMode })),
+
+    SET_COLUMNS: ({ id, columns }) => update(state, id, setColumns(columns)),
+
+    SET_FILTERS: ({ id, columnName, filters }) =>
+      update(state, id, mapColumns(setFilters(columnName, filters))),
+
+    SET_ITEMS: ({ id, items, itemsAvailable, page, rowsPerPage }) =>
+      update(state, id, (explorer) => ({
+        ...explorer,
+        items,
+        itemsAvailable,
+        page: page || 0,
+        rowsPerPage,
+      })),
+
+    APPEND_ITEMS: ({ id, items, itemsAvailable, page, rowsPerPage }) =>
+      update(state, id, (explorer) => ({
+        ...explorer,
+        items: state[id].items.concat(items),
+        itemsAvailable: state[id].itemsAvailable + itemsAvailable,
+        page,
+        rowsPerPage,
+      })),
+
+    SET_PAGE: ({ id, page }) =>
+      update(state, id, (explorer) => ({ ...explorer, page })),
+
+    SET_ROWS_PER_PAGE: ({ id, rowsPerPage }) =>
+      update(state, id, (explorer) => ({ ...explorer, rowsPerPage })),
+
+    SET_EXPLORER_SEARCH_VALUE: ({ id, searchValue }) =>
+      update(state, id, (explorer) => ({ ...explorer, searchValue })),
+
+    SET_REQUEST_STATE: ({ id, requestState }) =>
+      update(state, id, (explorer) => ({ ...explorer, requestState })),
+
+    TOGGLE_SORT: ({ id, columnName }) =>
+      update(state, id, mapColumns(toggleSort(columnName))),
+
+    TOGGLE_COLUMN: ({ id, columnName }) =>
+      update(state, id, mapColumns(toggleColumn(columnName))),
+
+    default: () => state,
+  });
+};
 export const getDataExplorer = (state: DataExplorerState, id: string) =>
-    state[id] || initialDataExplorer;
-
-export const getSortColumn = (dataExplorer: DataExplorer) => dataExplorer.columns.find((c: any) =>
-    !!c.sortDirection && c.sortDirection !== SortDirection.NONE);
-
-const update = (state: DataExplorerState, id: string, updateFn: (dataExplorer: DataExplorer) => DataExplorer) =>
-    ({ ...state, [id]: updateFn(getDataExplorer(state, id)) });
-
-const canUpdateColumns = (prevColumns: DataColumns<any>, nextColumns: DataColumns<any>) => {
-    if (prevColumns.length !== nextColumns.length) {
-        return true;
-    }
-    for (let i = 0; i < nextColumns.length; i++) {
-        const pc = prevColumns[i];
-        const nc = nextColumns[i];
-        if (pc.key !== nc.key || pc.name !== nc.name) {
-            return true;
-        }
+  state[id] || initialDataExplorer;
+
+export const getSortColumn = (dataExplorer: DataExplorer) =>
+  dataExplorer.columns.find(
+    (c: any) => !!c.sortDirection && c.sortDirection !== SortDirection.NONE
+  );
+
+const update = (
+  state: DataExplorerState,
+  id: string,
+  updateFn: (dataExplorer: DataExplorer) => DataExplorer
+) => ({ ...state, [id]: updateFn(getDataExplorer(state, id)) });
+
+const canUpdateColumns = (
+  prevColumns: DataColumns<any>,
+  nextColumns: DataColumns<any>
+) => {
+  if (prevColumns.length !== nextColumns.length) {
+    return true;
+  }
+  for (let i = 0; i < nextColumns.length; i++) {
+    const pc = prevColumns[i];
+    const nc = nextColumns[i];
+    if (pc.key !== nc.key || pc.name !== nc.name) {
+      return true;
     }
-    return false;
+  }
+  return false;
 };
 
-const setColumns = (columns: DataColumns<any>) =>
-    (dataExplorer: DataExplorer) =>
-        ({ ...dataExplorer, columns: canUpdateColumns(dataExplorer.columns, columns) ? columns : dataExplorer.columns });
-
-const mapColumns = (mapFn: (column: DataColumn<any>) => DataColumn<any>) =>
-    (dataExplorer: DataExplorer) =>
-        ({ ...dataExplorer, columns: dataExplorer.columns.map(mapFn) });
-
-const toggleSort = (columnName: string) =>
-    (column: DataColumn<any>) => column.name === columnName
-        ? toggleSortDirection(column)
-        : resetSortDirection(column);
-
-const toggleColumn = (columnName: string) =>
-    (column: DataColumn<any>) => column.name === columnName
-        ? { ...column, selected: !column.selected }
-        : column;
-
-const setFilters = (columnName: string, filters: DataTableFilters) =>
-    (column: DataColumn<any>) => column.name === columnName
-        ? { ...column, filters }
-        : column;
+const setColumns =
+  (columns: DataColumns<any>) => (dataExplorer: DataExplorer) => ({
+    ...dataExplorer,
+    columns: canUpdateColumns(dataExplorer.columns, columns)
+      ? columns
+      : dataExplorer.columns,
+  });
+
+const mapColumns =
+  (mapFn: (column: DataColumn<any>) => DataColumn<any>) =>
+  (dataExplorer: DataExplorer) => ({
+    ...dataExplorer,
+    columns: dataExplorer.columns.map(mapFn),
+  });
+
+const toggleSort = (columnName: string) => (column: DataColumn<any>) =>
+  column.name === columnName
+    ? toggleSortDirection(column)
+    : resetSortDirection(column);
+
+const toggleColumn = (columnName: string) => (column: DataColumn<any>) =>
+  column.name === columnName
+    ? { ...column, selected: !column.selected }
+    : column;
+
+const setFilters =
+  (columnName: string, filters: DataTableFilters) =>
+  (column: DataColumn<any>) =>
+    column.name === columnName ? { ...column, filters } : column;
index 06d97038e759c96712502ab52f6e9c80ba2af3c1..4d5523391fb7aebdd47d5abb6231f814c221e84e 100644 (file)
@@ -22,12 +22,13 @@ interface Props {
 }
 
 const mapStateToProps = (state: RootState, { id }: Props) => {
+    // console.log('DATA_EXPLORER, MSTP GLOBAL STATE:', state)
     const progress = state.progressIndicator.find(p => p.id === id);
     const dataExplorerState = getDataExplorer(state.dataExplorer, id);
     const currentRoute = state.router.location ? state.router.location.pathname : '';
     const currentRefresh = localStorage.getItem(LAST_REFRESH_TIMESTAMP) || '';
     const currentItemUuid = currentRoute === '/workflows' ? state.properties.workflowPanelDetailsUuid : state.detailsPanel.resourceUuid;
-
+// console.log('DATA_EXPLORER, MSTP FILTERED:', {...dataExplorerState})
     return {
         ...dataExplorerState,
         working: !!progress?.working,