Feature/dataset explorer chart

superset-frontend/src/cccs-viz/plugins/index.ts

@@ -29,3 +29,4 @@ export { default as AtAGlanceUserIdChartPlugin } from './plugin-chart-at-a-glanc
 export { default as AtAGlanceUserIDSasChartPlugin } from './plugin-chart-at-a-glance-user-id-sas/src/plugin';
 export { default as ApplicationLinksChartPlugin } from './plugin-chart-application-links/src/plugin';
 export { default as IFrameVisualizationChartPlugin } from './plugin-chart-iframe/src/plugin';
+export { default as DatasetExplorerChartPlugin } from './plugin-chart-dataset-explorer/src/plugin';

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/components/controls/advancedDataTypeValueControl/index.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from 'react';
+import { ensureIsArray, withTheme } from '@superset-ui/core';
+import { connect } from 'react-redux';
+import SelectControl from 'src/explore/components/controls/SelectControl';
+import useAdvancedDataTypes from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/useAdvancedDataTypes';
+
+export interface Props {
+  colorScheme: string;
+  annotationError: object;
+  annotationQuery: object;
+  vizType: string;
+  theme: any;
+  validationErrors: string[];
+  externalValidationErrors: string[];
+  name: string;
+  actions: object;
+  label: string;
+  value?: any[] | any;
+  datasource: any;
+  multi: boolean;
+  freeForm: boolean;
+  advancedDataType: string;
+  onChange: (values: any, errors: any[]) => void;
+  disabled: boolean;
+  description: any;
+}
+
+const AdvancedDataTypeValueControlValueControl: React.FC<Props> = ({
+  onChange,
+  externalValidationErrors,
+  datasource,
+  multi,
+  freeForm,
+  advancedDataType,
+  label,
+  disabled,
+  value = [],
+  description,
+}) => {
+  const [rawValues, setRawValues] = useState([]);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const [currentAdvancedDataType, setCurrentAdvancedDataType] =
+    useState<string>();
+
+  const {
+    advancedDataTypesState,
+    subjectAdvancedDataType,
+    fetchAdvancedDataTypeValueCallback,
+  } = useAdvancedDataTypes(() => {});
+
+  const onChangeWrapper = (selection: any) => {
+    setValidationErrors([...validationErrors, 'Validation in progress']);
+    setRawValues(selection);
+  };
+
+  // clear selection on advancedDataType change
+  useEffect(() => {
+    const rawData = value[0] ? value[0].rawData : [];
+    onChangeWrapper(
+      (currentAdvancedDataType &&
+        currentAdvancedDataType !== advancedDataType) ||
+        !advancedDataType
+        ? []
+        : rawData,
+    );
+    setCurrentAdvancedDataType(advancedDataType);
+  }, [advancedDataType]);
+
+  useEffect(() => {
+    const data =
+      advancedDataTypesState.parsedAdvancedDataType.length > 0 &&
+      advancedDataTypesState.parsedAdvancedDataType.split(',').length > 0
+        ? {
+            data: advancedDataTypesState.values,
+            columns: datasource.columns
+              .filter((col: any) => col.advanced_data_type === advancedDataType)
+              .map((col: any) => col.column_name),
+            rawData: rawValues,
+          }
+        : { data: [], columns: [], rawData: [] };
+    onChange(data, validationErrors);
+  }, [advancedDataTypesState, validationErrors]);
+
+  useEffect(() => {
+    fetchAdvancedDataTypeValueCallback(
+      rawValues,
+      advancedDataTypesState,
+      ensureIsArray(advancedDataType)[0],
+    );
+  }, [advancedDataType, rawValues, subjectAdvancedDataType]);
+
+  useEffect(() => {
+    setValidationErrors(
+      advancedDataTypesState.errorMessage
+        ? [advancedDataTypesState.errorMessage]
+        : [],
+    );
+  }, [advancedDataTypesState]);
+
+  return (
+    <SelectControl
+      hovered
+      description={advancedDataTypesState.parsedAdvancedDataType || description}
+      value={rawValues}
+      validationErrors={ensureIsArray(
+        [...validationErrors, ...externalValidationErrors].at(0),
+      )}
+      onChange={onChangeWrapper}
+      multi={multi}
+      freeForm={disabled ? false : freeForm}
+      label={label}
+      disabled={disabled}
+    />
+  );
+};
+
+function mapStateToProps({ charts, explore }: any) {
+  return {
+    // eslint-disable-next-line camelcase
+    colorScheme: explore.controls?.color_scheme?.value,
+    vizType: explore.controls.viz_type.value,
+  };
+}
+
+const themedAdvancedDataTypeValueControlValueControl = withTheme(
+  AdvancedDataTypeValueControlValueControl,
+);
+
+export default connect(mapStateToProps)(
+  themedAdvancedDataTypeValueControlValueControl,
+);

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/components/controls/changeDatasourceButton/index.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { ChangeDatasourceModal } from 'src/components/Datasource';
+import { withTheme } from '@superset-ui/core';
+import { connect, useDispatch } from 'react-redux';
+import Button from 'src/components/Button';
+import { updateFormDataByDatasource } from 'src/explore/actions/exploreActions';
+
+export interface Props {
+  colorScheme: string;
+  annotationError: object;
+  annotationQuery: object;
+  vizType: string;
+  theme: any;
+  validationErrors: string[];
+  name: string;
+  actions: object;
+  label: string;
+  value?: object[];
+  datasource: any;
+  onChange: (a: any) => void;
+}
+
+const ChangeDatasourceButtonControll: React.FC<Props> = ({
+  onChange,
+  datasource,
+}) => {
+  const dispatch = useDispatch();
+  const [showChangeDatasourceModal, setShowChangeDatasourceModal] =
+    useState<Boolean>(false);
+
+  const toggleChangeDatasourceModal = () => {
+    setShowChangeDatasourceModal(!showChangeDatasourceModal);
+  };
+  const onDatasourceSave = (new_datasource: any) => {
+    dispatch(updateFormDataByDatasource(datasource, new_datasource));
+  };
+  const onChangeWrapper = (a: any) => {
+    onChange(a);
+  };
+
+  return (
+    <>
+      <Button
+        buttonStyle="primary"
+        onClick={() => setShowChangeDatasourceModal(true)}
+      >
+        Swap dataset
+      </Button>
+      {showChangeDatasourceModal && (
+        <ChangeDatasourceModal
+          onDatasourceSave={onDatasourceSave}
+          onHide={toggleChangeDatasourceModal}
+          show={showChangeDatasourceModal}
+          onChange={onChangeWrapper}
+        />
+      )}
+    </>
+  );
+};
+
+function mapStateToProps({ explore }: any) {
+  return {
+    // eslint-disable-next-line camelcase
+    colorScheme: explore.controls?.color_scheme?.value,
+    vizType: explore.controls.viz_type.value,
+  };
+}
+
+const themedChangeDatasourceButtonControll = withTheme(
+  ChangeDatasourceButtonControll,
+);
+
+export default connect(mapStateToProps)(themedChangeDatasourceButtonControll);

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/components/controls/datetimeControl/index.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from 'react';
+import { SLOW_DEBOUNCE, SupersetClient, t, withTheme } from '@superset-ui/core';
+import {
+  buildTimeRangeString,
+  formatTimeRange,
+} from 'src/explore/components/controls/DateFilterControl/utils';
+import { Input } from 'src/components/Input';
+import { connect } from 'react-redux';
+import rison from 'rison';
+import ControlHeader from 'src/explore/components/ControlHeader';
+import { getClientErrorObject } from 'src/utils/getClientErrorObject';
+import { useDebouncedEffect } from 'src/explore/exploreUtils';
+
+export interface Props {
+  colorScheme: string;
+  annotationError: object;
+  annotationQuery: object;
+  vizType: string;
+  theme: any;
+  validationErrors: string[];
+  name: string;
+  actions: object;
+  label: string;
+  value?: object[];
+  onChange: (value: any, errors: any[]) => void;
+  default: string;
+  disabled: boolean;
+}
+
+const SEPARATOR = ' : ';
+const fetchTimeRange = async (timeRange: string) => {
+  const query = rison.encode_uri(timeRange);
+  const endpoint = `/api/v1/time_range/?q=${query}`;
+  try {
+    const response = await SupersetClient.get({ endpoint });
+    const timeRangeString = buildTimeRangeString(
+      response?.json?.result?.since || '',
+      response?.json?.result?.until || '',
+    );
+    return {
+      value: formatTimeRange(timeRangeString),
+    };
+  } catch (response) {
+    const clientError = await getClientErrorObject(response);
+    return {
+      // keep labelling consistent in error messages
+      error: (clientError.message || clientError.error)
+        .replace('From date', 'Start date')
+        .replace('to date', 'end date'),
+    };
+  }
+};
+
+const DatetimeControl: React.FC<Props> = props => {
+  const [timeRange, setTimeRange] = useState(props.default);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const [actualTimeRange, setactualTimeRange] = useState<string>();
+
+  const [since, until] = timeRange.split(SEPARATOR);
+
+  useEffect(() => {
+    props.onChange(timeRange, validationErrors);
+  }, [timeRange, since, until, validationErrors]);
+
+  function onChange(control: 'since' | 'until', value: string) {
+    if (control === 'since') {
+      setTimeRange(`${value}${SEPARATOR}${until}`);
+    } else {
+      setTimeRange(`${since}${SEPARATOR}${value}`);
+    }
+  }
+
+  useDebouncedEffect(
+    () => {
+      fetchTimeRange(timeRange)
+        .then(value => {
+          setactualTimeRange(
+            value?.value ? `Actual Time Range ${value?.value}` : '',
+          );
+          setValidationErrors(value?.error ? [value?.error] : []);
+        })
+        .catch(error => {
+          setValidationErrors(error);
+        });
+    },
+    SLOW_DEBOUNCE,
+    [timeRange],
+  );
+
+  const headerProps = {
+    name: props.name,
+    label: props.label,
+    validationErrors,
+    description: actualTimeRange,
+    hovered: true,
+  };
+
+  return (
+    <>
+      <ControlHeader {...headerProps} />
+      <div className="control-label">{t('START (INCLUSIVE)')} </div>
+      <Input
+        key="since"
+        value={since}
+        onChange={e => onChange('since', e.target.value)}
+        disabled={props.disabled}
+      />
+      <div className="control-label">{t('END (EXCLUSIVE)')} </div>
+      <Input
+        key="until"
+        value={until}
+        onChange={e => onChange('until', e.target.value)}
+        disabled={props.disabled}
+      />
+    </>
+  );
+};
+
+// Tried to hook this up through stores/control.jsx instead of using redux
+// directly, could not figure out how to get access to the color_scheme
+function mapStateToProps({ charts, explore }: any) {
+  return {
+    // eslint-disable-next-line camelcase
+    colorScheme: explore.controls?.color_scheme?.value,
+    vizType: explore.controls.viz_type.value,
+  };
+}
+
+const themedDrillActionConfigControl = withTheme(DatetimeControl);
+
+export default connect(mapStateToProps)(themedDrillActionConfigControl);

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/plugin/transformProps.ts

@@ -33,6 +33,9 @@ import {
   DEFAULT_FORM_DATA,
 } from '../types';
 
+import {rendererMap, formatIpV4} from '../utils/advancedDataTypes'
+
+
 export default function transformProps(chartProps: CccsGridChartProps) {
   /**
    * This function is called after a successful response has been
@@ -176,22 +179,7 @@ export default function transformProps(chartProps: CccsGridChartProps) {
   },
   sortingColumnMap);
 
-  // Key is column advanced type, value is renderer name
-  const rendererMap = {
-    IPV4: 'ipv4ValueRenderer',
-    IPV6: 'ipv6ValueRenderer',
-    DOMAIN: 'domainValueRenderer',
-    COUNTRY: 'countryValueRenderer',
-    JSON: 'jsonValueRenderer',
-  };
-
-  const formatIpV4 = (v: any) => {
-    const converted = `${(v >> 24) & 0xff}.${(v >> 16) & 0xff}.${
-      (v >> 8) & 0xff
-    }.${v & 0xff}`;
-    return converted;
-  };
-
+
   const valueFormatter = (params: any) => {
     if (
       params.value != null &&

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/utils/advancedDataTypes.ts

@@ -0,0 +1,16 @@
+
+// Key is column advanced type, value is renderer name
+export const rendererMap = {
+    IPV4: 'ipv4ValueRenderer',
+    IPV6: 'ipv6ValueRenderer',
+    DOMAIN: 'domainValueRenderer',
+    COUNTRY: 'countryValueRenderer',
+    JSON: 'jsonValueRenderer',
+};
+
+export const formatIpV4 = (v: any) => {
+    const converted = `${(v >> 24) & 0xff}.${(v >> 16) & 0xff}.${
+      (v >> 8) & 0xff
+    }.${v & 0xff}`;
+    return converted;
+  };