Feature/cldn 1609

cccs-build/superset-base/azure-pipelines.yml

@@ -12,8 +12,7 @@ variables:
   buildTimestamp: $[format('{0:yyyyMMddHHmmss}', pipeline.startTime)]
   DOCKER_BUILDKIT: 1
 
-pool:
-  vmImage: ubuntu-latest
+pool: cauldron-vmss
 
 steps:
   - bash: |
@@ -32,7 +31,7 @@ steps:
   - task: Docker@2
     displayName: Build image
     inputs:
-      command: 'build'
+      command: build
       repository: $(imageRepository)
       arguments: --progress=plain
       dockerfile: $(dockerfile)
@@ -42,7 +41,7 @@ steps:
   - task: Docker@2
     displayName: Push image
     inputs:
-      command: 'push'
+      command: "push"
       repository: $(imageRepository)
       tags: |
         $(BRANCH_NAME)

cccs-build/superset/Dockerfile

@@ -3,6 +3,7 @@ ARG VAULT_CA_CONTAINER=uchimera.azurecr.io/cccs/hogwarts/vault-ca:master_2921_22
 FROM $VAULT_CA_CONTAINER AS vault_ca
 FROM uchimera.azurecr.io/cccs/superset-base:cccs-2.0_20220808144709_b4476
 
+
 USER root
 
 COPY *requirements.txt /tmp/

cccs-build/superset/azure-pipelines.yml

@@ -11,8 +11,7 @@ variables:
   buildTimestamp: $[format('{0:yyyyMMddHHmmss}', pipeline.startTime)]
   DOCKER_BUILDKIT: 1
 
-pool:
-  vmImage: ubuntu-latest
+pool: cauldron-vmss
 
 steps:
   - bash: |

superset-frontend/src/cccs-viz/plugins/plugin-chart-at-a-glance-user-id/src/AtAGlanceUserID.tsx

@@ -65,20 +65,27 @@ const getPayloadField = (field: string, payload: any) => {
 };
 
 const formatList = (ipList: any) => {
-  const updatedList: { 'IP Address': string; Count: number }[] = [];
+  const updatedList: {
+    'IP Address': string;
+    Count: number;
+    'User Email': string;
+  }[] = [];
   const ipDictionary = {};
   let counter = 0;
 
   ipList.forEach(function (obj: any) {
-    const key = JSON.stringify(obj.client_ip);
+    const key = `${JSON.stringify(obj.client_ip)},${JSON.stringify(
+      obj.user_id,
+    )}`;
     ipDictionary[key] = (ipDictionary[key] || 0) + 1;
     counter += 1;
   });
 
   Object.keys(ipDictionary).forEach(key => {
     updatedList.push({
-      'IP Address': key.replaceAll('"', ''),
+      'IP Address': key.split(',')[0].replaceAll('"', ''),
       Count: ipDictionary[key],
+      'User Email': key.split(',')[1].replaceAll('"', ''),
     });
   });
 
@@ -90,7 +97,6 @@ const ipToInt = (ip: any) =>
 
 // Main Component
 function AtAGlanceUserIDCore(props: AtAGlanceUserIDProps) {
-  const [userIDString, setUserIDString] = useState('');
   LicenseManager.setLicenseKey(props.agGridLicenseKey);
 
   const [columnDefs] = useState([
@@ -123,6 +129,13 @@ function AtAGlanceUserIDCore(props: AtAGlanceUserIDProps) {
       sortable: true,
       sort: 'desc',
     },
+    {
+      field: 'User Email',
+      flex: 1,
+      resizable: true,
+      sortable: true,
+      minWidth: 275,
+    },
   ]);
 
   const [canadianIpsListData, setCanadianIpsListData] = useState([{}]);
@@ -145,23 +158,6 @@ function AtAGlanceUserIDCore(props: AtAGlanceUserIDProps) {
     const OPERATION = 'operation';
     const USER_LOGGED_IN = 'UserLoggedIn';
 
-    if (typeof props.formData?.extraFormData?.filters !== 'undefined') {
-      for (
-        let i = 0;
-        i < props.formData?.extraFormData?.filters?.length;
-        i += 1
-      ) {
-        const filter = props.formData.extraFormData.filters[i];
-        if (filter.col === 'user_id') {
-          const localUserId: string = filter.val[0];
-          setUserIDString(localUserId);
-          break;
-        }
-      }
-    } else {
-      setUserIDString('');
-    }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
     canadianIpsList = props.data.filter(function (item: any) {
       return (
@@ -210,24 +206,7 @@ function AtAGlanceUserIDCore(props: AtAGlanceUserIDProps) {
       <div>
         <table style={styles.Table}>
           <tr>
-            <td>
-              **Please note that the results in this chart are only for the
-              first User Email**
-            </td>
-          </tr>
-          <tr>
-            <td>*This chart only contains the first 100 results*</td>
-          </tr>
-          <tr>
-            <td>User Email: {userIDString}</td>
-          </tr>
-          <tr>
-            <td>
-              User ID:{' '}
-              {userIDString !== ''
-                ? getPayloadField('user_key', props.data[0])
-                : ''}
-            </td>
+            <td>*This chart only contains the first 1000 results*</td>
           </tr>
         </table>
       </div>

superset-frontend/src/cccs-viz/plugins/plugin-chart-at-a-glance-user-id/src/styles.js

@@ -70,7 +70,7 @@ const AtAGlance = {
 };
 
 const Table = {
-  width: '500px',
+  width: '600px',
 };
 
 const AtAGlanceLists = {

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/plugin/controlPanel.tsx

@@ -560,6 +560,18 @@ config.controlPanelSections.push({
         },
       },
     ],
+    [
+      {
+        name: 'enable_row_numbers',
+        config: {
+          type: 'CheckboxControl',
+          label: t('Row numbers'),
+          renderTrigger: true,
+          default: true,
+          description: t('Whether to enable row numbers'),
+        },
+      },
+    ],
     [
       {
         name: 'page_length',

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

@@ -81,6 +81,7 @@ export default function transformProps(chartProps: CccsGridChartProps) {
     include_search,
     enable_grouping,
     column_state,
+    enable_row_numbers,
   }: CccsGridQueryFormData = { ...DEFAULT_FORM_DATA, ...formData };
   const data = queriesData[0].data as TimeseriesDataRecord[];
   const agGridLicenseKey = queriesData[0].agGridLicenseKey as String;
@@ -167,7 +168,7 @@ export default function transformProps(chartProps: CccsGridChartProps) {
     COUNTRY: 'countryValueRenderer',
     JSON: 'jsonValueRenderer',
   };
-  
+
   const percentMetricValueFormatter = function (params: ValueFormatterParams) {
     return getNumberFormatter(NumberFormats.PERCENT_3_POINT).format(
       params.value,
@@ -271,6 +272,16 @@ export default function transformProps(chartProps: CccsGridChartProps) {
     }
   }
 
+  if (enable_row_numbers) {
+    columnDefs.splice(0, 0, {
+      headerName: '#',
+      colId: 'rowNum',
+      pinned: 'left',
+      valueGetter: (params: any) =>
+        params.node ? params.node.rowIndex + 1 : null,
+    } as any);
+  }
+
   return {
     formData,
     setDataMask,

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

@@ -36,6 +36,7 @@ export type CccsGridQueryFormData = QueryFormData & {
   page_length: number;
   enable_grouping: boolean;
   column_state: ColumnState[];
+  enable_row_numbers: boolean;
 };
 
 export interface CccsGridStylesProps {

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

@@ -12,6 +12,7 @@ describe('CccsGrid buildQuery', () => {
     enable_grouping: false,
     viz_type: 'my_chart',
     column_state: [],
+    enable_row_numbers: false,
   };
 
   it('should build groupby with series in form data', () => {

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

@@ -18,6 +18,7 @@ describe('CccsGrid tranformProps', () => {
     enable_grouping: false,
     viz_type: 'my_chart',
     column_state: [],
+    enable_row_numbers: false,
   };
   const chartProps = new CccsGridChartProps({
     formData,

superset-frontend/src/components/Icons/index.tsx

@@ -64,6 +64,7 @@ const IconFileNames = [
   'copy',
   'cursor_target',
   'database',
+  'datahub',
   'dataset_physical',
   'dataset_virtual_greyscale',
   'dataset_virtual',

superset-frontend/src/dashboard/components/Header/Header.test.tsx

@@ -327,3 +327,9 @@ test('should refresh the charts', async () => {
   userEvent.click(screen.getByText('Refresh dashboard'));
   expect(mockedProps.onRefresh).toHaveBeenCalledTimes(1);
 });
+
+test('should show datahub link', async () => {
+  const mockedProps = createProps();
+  setup(mockedProps);
+  expect(screen.getByTestId('datahub_link')).toBeInTheDocument();
+});

superset-frontend/src/dashboard/components/Header/index.jsx

@@ -51,6 +51,7 @@ import { options as PeriodicRefreshOptions } from 'src/dashboard/components/Refr
 import findPermission from 'src/dashboard/util/findPermission';
 import { FILTER_BOX_MIGRATION_STATES } from 'src/explore/constants';
 import { PageHeaderWithActions } from 'src/components/PageHeaderWithActions';
+import { datahubUrl } from 'src/preamble';
 import { DashboardEmbedModal } from '../DashboardEmbedControls';
 
 const propTypes = {
@@ -510,13 +511,22 @@ class Header extends React.PureComponent {
             showTooltip: true,
           }}
           titlePanelAdditionalItems={
-            <PublishedStatus
-              dashboardId={dashboardInfo.id}
-              isPublished={isPublished}
-              savePublished={this.props.savePublished}
-              canEdit={userCanEdit}
-              canSave={userCanSaveAs}
-            />
+            <>
+              <PublishedStatus
+                dashboardId={dashboardInfo.id}
+                isPublished={isPublished}
+                savePublished={this.props.savePublished}
+                canEdit={userCanEdit}
+                canSave={userCanSaveAs}
+              />
+              <a
+                href={`${datahubUrl}dashboard/urn:li:dashboard:(superset,${dashboardInfo.id})`}
+                style={{ paddingLeft: '0.5em' }}
+                data-test="datahub_link"
+              >
+                <Icons.Datahub viewBox="0 0 180 180" />
+              </a>
+            </>
           }
           rightPanelAdditionalItems={
             <div className="button-container">

superset-frontend/src/preamble.ts

@@ -81,6 +81,8 @@ const getMe = makeApi<void, User>({
   endpoint: '/api/v1/me/',
 });
 
+export const datahubUrl = bootstrapData?.common?.datahub_url;
+
 /**
  * When you re-open the window, we check if you are still logged in.
  * If your session expired or you signed out, we'll redirect to login.