Feature/cldn 1749 (#222)

* [CLDN-1749] adding new viz

* chanigng to work with standard filters

* Adding generic filter extraction

* Removing unused imports

* [CLDN-1749] Cleaning up code for reusablility

* [CLDN-1749] removing unused files

* [CLDN-1746] fixing case

* [CLDN-1749] adding parameter validation

* [CLDN-1749] adding error message and prefix parameter

* [CLDN-1749] removing unused files

* [CLDN-1749] adding temp base image for docker deployment

* [CLDN-1749] Better error handling and new icon

* [CLDN-1749] remove unused imports

* temp dockerfile change

* [CLDN-1749] Adding the adhoc filters back in

* [CLDN-1749] Updating image

* [CLDN-1749] Adding new thumbnail

* Updating dockerfile

* [CLDN-1749] Removing uneeded control panel elements

* [CLDN-1749] Fixing build errors

* [CLDN-1749] New image

* Change to use data from dataset

* Removing unsed function

* Fixing typos

* renove unused import

* updating image

* error message and label fixes

* updating image

* Update cccs-build/superset/Dockerfile

Co-authored-by: cccs-Dustin <96579982+cccs-Dustin@users.noreply.github.com>

* Update superset-frontend/src/cccs-viz/plugins/plugin-chart-iframe/src/plugin/transformProps.ts

Co-authored-by: cccs-RyanK <102618419+cccs-RyanK@users.noreply.github.com>

* Update superset-frontend/src/cccs-viz/plugins/plugin-chart-iframe/src/plugin/transformProps.ts

Co-authored-by: cccs-RyanK <102618419+cccs-RyanK@users.noreply.github.com>

Co-authored-by: cccs-Dustin <96579982+cccs-Dustin@users.noreply.github.com>
Co-authored-by: cccs-RyanK <102618419+cccs-RyanK@users.noreply.github.com>

cccs-build/superset/Dockerfile

@@ -4,6 +4,7 @@ FROM $VAULT_CA_CONTAINER AS vault_ca
 FROM uchimera.azurecr.io/cccs/superset-base:cccs-2.0_20221014182839_b5135
 
 
+
 USER root
 
 COPY *requirements.txt /tmp/

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

@@ -28,3 +28,4 @@ export { default as AtAGlanceChartDnsPlugin } from './plugin-chart-at-a-glance-d
 export { default as AtAGlanceUserIdChartPlugin } from './plugin-chart-at-a-glance-user-id/src/plugin';
 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';

superset-frontend/src/cccs-viz/plugins/plugin-chart-iframe/src/IFrameVisualization.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IFrameVisualizationProps } from './types';
+
+
+export default function IFrameVisualization(props: IFrameVisualizationProps) {
+  const { url, url_parameter_value, parameter_name, parameter_prefix, errorMessage} = props
+
+  const parserdUrlParameterName = parameter_name.includes('=') ? parameter_name : `${parameter_name}=${parameter_prefix}`
+
+  return (
+    <>
+      { errorMessage ?
+      <>{errorMessage}</> :
+      <iframe src={`${url}?${parserdUrlParameterName}${url_parameter_value}`} style={{ position: 'absolute', left:0, top: '50px', width:'95%', height:'100%' }}></iframe> }
+    </>
+  );
+}

superset-frontend/src/cccs-viz/plugins/plugin-chart-iframe/src/images/thumbnail.png:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://github.com/CybercentreCanada/superset/blob/feature/CLDN-750-cccs-1.2/superset-frontend/src/cccs-viz/plugins/plugin-chart-at-a-glance/src/images/thumbnail.png
+HostUrl=https://raw.githubusercontent.com/CybercentreCanada/superset/feature/CLDN-750-cccs-1.2/superset-frontend/src/cccs-viz/plugins/plugin-chart-at-a-glance/src/images/thumbnail.png

superset-frontend/src/cccs-viz/plugins/plugin-chart-iframe/src/index.ts

@@ -0,0 +1 @@
+export { default as IFrameVisualizationChartPlugin } from './plugin';

superset-frontend/src/cccs-viz/plugins/plugin-chart-iframe/src/plugin/buildQuery.ts

@@ -0,0 +1,57 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+ import { buildQueryContext, QueryFormData } from '@superset-ui/core';
+
+ /**
+  * The buildQuery function is used to create an instance of QueryContext that's
+  * sent to the chart data endpoint. In addition to containing information of which
+  * datasource to use, it specifies the type (e.g. full payload, samples, query) and
+  * format (e.g. CSV or JSON) of the result and whether or not to force refresh the data from
+  * the datasource as opposed to using a cached copy of the data, if available.
+  *
+  * More importantly though, QueryContext contains a property `queries`, which is an array of
+  * QueryObjects specifying individual data requests to be made. A QueryObject specifies which
+  * columns, metrics and filters, among others, to use during the query. Usually it will be enough
+  * to specify just one query based on the baseQueryObject, but for some more advanced use cases
+  * it is possible to define post processing operations in the QueryObject, or multiple queries
+  * if a viz needs multiple different result sets.
+  */
+ export default function buildQuery(formData: QueryFormData) {
+   /*
+    We receive an ip as a filter, our job is to find everthing there is to know about that ip
+    We fire multiple queries to multiple data sets and collect the results here.
+    */
+
+   const formDataCopy = {
+     ...formData,
+     result_type: 'post_processed',
+   };
+
+   return buildQueryContext(formDataCopy, baseQueryObject => {
+     // RAW mode (not aggregated)
+     // eslint-disable-next-line no-param-reassign
+     return [
+       {
+         ...baseQueryObject,
+         row_limit: 10,
+       },
+     ];
+   });
+ }
+

superset-frontend/src/cccs-viz/plugins/plugin-chart-iframe/src/plugin/controlPanel.ts

@@ -0,0 +1,205 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ensureIsArray, t, validateNonEmpty } from '@superset-ui/core';
+import {
+  ControlPanelConfig,
+  ControlPanelState,
+  ControlState,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+
+const config: ControlPanelConfig = {
+
+  /**
+   * The control panel is split into two tabs: "Query" and
+   * "Chart Options". The controls that define the inputs to
+   * the chart data request, such as columns and metrics, usually
+   * reside within "Query", while controls that affect the visual
+   * appearance or functionality of the chart are under the
+   * "Chart Options" section.
+   *
+   * There are several predefined controls that can be used.
+   * Some examples:
+   * - groupby: columns to group by (tranlated to GROUP BY statement)
+   * - series: same as groupby, but single selection.
+   * - metrics: multiple metrics (translated to aggregate expression)
+   * - metric: sane as metrics, but single selection
+   * - adhoc_filters: filters (translated to WHERE or HAVING
+   *   depending on filter type)
+   * - row_limit: maximum number of rows (translated to LIMIT statement)
+   *
+   * If a control panel has both a `series` and `groupby` control, and
+   * the user has chosen `col1` as the value for the `series` control,
+   * and `col2` and `col3` as values for the `groupby` control,
+   * the resulting query will contain three `groupby` columns. This is because
+   * we considered `series` control a `groupby` query field and its value
+   * will automatically append the `groupby` field when the query is generated.
+   *
+   * It is also possible to define custom controls by importing the
+   * necessary dependencies and overriding the default parameters, which
+   * can then be placed in the `controlSetRows` section
+   * of the `Query` section instead of a predefined control.
+   *
+   * import { validateNonEmpty } from '@superset-ui/core';
+   * import {
+   *   sharedControls,
+   *   ControlConfig,
+   *   ControlPanelConfig,
+   * } from '@superset-ui/chart-controls';
+   *
+   * const myControl: ControlConfig<'SelectControl'> = {
+   *   name: 'secondary_entity',
+   *   config: {
+   *     ...sharedControls.entity,
+   *     type: 'SelectControl',
+   *     label: t('Secondary Entity'),
+   *     mapStateToProps: state => ({
+   *       sharedControls.columnChoices(state.datasource)
+   *       .columns.filter(c => c.groupby)
+   *     })
+   *     validators: [validateNonEmpty],
+   *   },
+   * }
+   *
+   * In addition to the basic drop down control, there are several predefined
+   * control types (can be set via the `type` property) that can be used. Some
+   * commonly used examples:
+   * - SelectControl: Dropdown to select single or multiple values,
+       usually columns
+   * - MetricsControl: Dropdown to select metrics, triggering a modal
+       to define Metric details
+   * - AdhocFilterControl: Control to choose filters
+   * - CheckboxControl: A checkbox for choosing true/false values
+   * - SliderControl: A slider with min/max values
+   * - TextControl: Control for text data
+   *
+   * For more control input types, check out the `incubator-superset` repo
+   * and open this file: superset-frontend/src/explore/components/controls/index.js
+   *
+   * To ensure all controls have been filled out correctly, the following
+   * validators are provided
+   * by the `@superset-ui/core/lib/validator`:
+   * - validateNonEmpty: must have at least one value
+   * - validateInteger: must be an integer value
+   * - validateNumber: must be an intger or decimal value
+   */
+
+  // For control input types, see: superset-frontend/src/explore/components/controls/index.js
+  controlPanelSections: [
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [
+        ['adhoc_filters'],
+        [
+          {
+            name: 'url',
+            config: {
+              type: 'TextControl',
+              label: t('URL'),
+              mapStateToProps: (
+                state: ControlPanelState,
+                controlState: ControlState,
+              ) => {
+                const originalMapStateToProps =
+                  sharedControls?.groupby?.mapStateToProps;
+                const newState =
+                  originalMapStateToProps?.(state, controlState) ?? {};
+                newState.externalValidationErrors =  controlState.value ? [] : ["Please add a value for URL."]
+                return newState;
+              },
+              renderTrigger: true,
+              default: '',
+              description: t('The Base URL for the Iframe.'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'groupby',
+            override: {
+              label: t('Parameter Column Name'),
+              description: "The name of the column that will populate the url parameter value.",
+              multi: false,
+              allowAll: false,
+              default: [],
+              includeTime: false,
+              mapStateToProps: (
+                state: ControlPanelState,
+                controlState: ControlState,
+              ) => {
+                const originalMapStateToProps =
+                  sharedControls?.groupby?.mapStateToProps;
+                const newState =
+                  originalMapStateToProps?.(state, controlState) ?? {};
+                newState.externalValidationErrors = ensureIsArray(controlState.value).length > 0 ? [] : ["Please add a value for Parameter Column Name."]
+                return newState;
+              },
+            },
+          },
+        ],
+        [
+          {
+            name: 'parameter_name',
+            config: {
+              type: 'TextControl',
+              label: t('Parameter Name'),
+              mapStateToProps: (
+                state: ControlPanelState,
+                controlState: ControlState,
+              ) => {
+                const originalMapStateToProps =
+                  sharedControls?.groupby?.mapStateToProps;
+                const newState =
+                  originalMapStateToProps?.(state, controlState) ?? {};
+                newState.externalValidationErrors =  controlState.value ? [] : ["Please add a value for Parameter Name."]
+                return newState;
+              },
+              default: '',
+              description: t('The name for the URL parameter.'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'parameter_prefix',
+            config: {
+              type: 'TextControl',
+              label: t('Parameter Prefix'),
+              default: '',
+              description: t('A value that will be prefix the parameter value.'),
+            },
+          },
+        ]
+      ],
+    },
+  ],
+
+  controlOverrides: {
+    series: {
+      validators: [validateNonEmpty],
+      clearable: false,
+    },
+    row_limit: {
+      default: 1,
+    },
+  },
+};
+
+export default config;

superset-frontend/src/cccs-viz/plugins/plugin-chart-iframe/src/plugin/index.ts

@@ -0,0 +1,51 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import controlPanel from './controlPanel';
+import transformProps from './transformProps';
+import buildQuery from './buildQuery';
+import thumbnail from '../images/thumbnail.png';
+
+export default class IFrameVisualizationChartPlugin extends ChartPlugin {
+  /**
+   * The constructor is used to pass relevant metadata and callbacks that get
+   * registered in respective registries that are used throughout the library
+   * and application. A more thorough description of each property is given in
+   * the respective imported file.
+   *
+   * It is worth noting that `buildQuery` and is optional, and only needed for
+   * advanced visualizations that require either post processing operations
+   * (pivoting, rolling aggregations, sorting etc) or submitting multiple queries.
+   */
+  constructor() {
+    const metadata = new ChartMetadata({
+      description: 'IFrame Visualization',
+      name: t('IFrame Visualization'),
+      thumbnail,
+    });
+
+    super({
+      buildQuery,
+      controlPanel,
+      loadChart: () => import('../IFrameVisualization'),
+      metadata,
+      transformProps,
+    });
+  }
+}