fix: Align and format column stats (new PR) (#723)

* Allign and format column stats
Signed-off-by: dikshathakur3119 <dikshathakur3119@gmail.com>

* Update common version and other minor changes
Signed-off-by: dikshathakur3119 <dikshathakur3119@gmail.com>

* Update mock data include chart_name
Signed-off-by: dikshathakur3119 <dikshathakur3119@gmail.com>

* fix lint
Signed-off-by: dikshathakur3119 <dikshathakur3119@gmail.com>

amundsen_application/static/css/_variables-default.scss

@@ -128,6 +128,7 @@ $resource-title-color: $indigo60;
 
 // Spacing
 $spacer-size: 8px;
+$spacer-half: $spacer-size/2;
 $spacer-1: $spacer-size;
 $spacer-2: $spacer-size * 2;
 $spacer-3: $spacer-size * 3;

amundsen_application/static/js/components/ColumnList/ColumnStats/index.tsx

@@ -4,6 +4,7 @@
 import * as React from 'react';
 
 import { TableColumnStats } from 'interfaces/index';
+import { formatNumber } from 'utils/numberUtils';
 import { getStatsInfoText } from '../utils';
 
 import { COLUMN_STATS_TITLE } from '../constants';
@@ -23,10 +24,12 @@ const ColumnStatRow: React.FC<ColumnStatRowProps> = ({
   stat_type,
   stat_val,
 }: ColumnStatRowProps) => {
+  const numberVal = +stat_val;
+
   return (
     <div className="column-stat-row">
       <div className="stat-name body-3">{stat_type.toUpperCase()}</div>
-      <div className="stat-value">{stat_val}</div>
+      <div className="stat-value">{formatNumber(numberVal)}</div>
     </div>
   );
 };

amundsen_application/static/js/components/ColumnList/ColumnStats/styles.scss

@@ -44,7 +44,9 @@
 
         .stat-value {
           flex: 100px 1 1;
-          padding-right: 4px;
+          padding-right: $spacer-half;
+          text-align: right;
+          font-style: $font-family-monospace-code;
         }
       }
     }

amundsen_application/static/js/components/common/BadgeList/styles.scss

@@ -16,7 +16,6 @@
   font-weight: normal;
 }
 
-
 .actionable-badge {
   &:hover {
     cursor: pointer;
@@ -52,30 +51,36 @@
   .badge-overlay-neutral,
   .badge-overlay-positive,
   .badge-overlay-primary {
-
     &:hover,
     &:focus {
-      background-color: rgba($color: $badge-overlay,
-          $alpha: $badge-opacity-light);
+      background-color: rgba(
+        $color: $badge-overlay,
+        $alpha: $badge-opacity-light
+      );
     }
 
     &:active {
-      background-color: rgba($color: $badge-overlay,
-          $alpha: $badge-pressed-light);
+      background-color: rgba(
+        $color: $badge-overlay,
+        $alpha: $badge-pressed-light
+      );
     }
   }
 
   .badge-overlay-warning {
-
     &:hover,
     &:focus {
-      background-color: rgba($color: $badge-overlay,
-          $alpha: $badge-opacity-dark);
+      background-color: rgba(
+        $color: $badge-overlay,
+        $alpha: $badge-opacity-dark
+      );
     }
 
     &:active {
-      background-color: rgba($color: $badge-overlay,
-          $alpha: $badge-pressed-dark);
+      background-color: rgba(
+        $color: $badge-overlay,
+        $alpha: $badge-pressed-dark
+      );
     }
   }
 }

amundsen_application/static/js/components/common/Table/styles.scss

@@ -27,7 +27,8 @@ $row-bottom-border-color: $gray10;
 
   background-color: $table-header-background-color;
   color: $text-secondary;
-  border-bottom: $table-header-border-width solid $table-header-bottom-border-color;
+  border-bottom: $table-header-border-width solid
+    $table-header-bottom-border-color;
 }
 
 .ams-table-heading-cell {
@@ -107,7 +108,6 @@ $row-bottom-border-color: $gray10;
   &:last-child {
     padding-right: $spacer-3;
   }
-
 }
 
 .ams-table-expanding-button {

amundsen_application/static/js/config/config-default.ts

@@ -33,6 +33,7 @@ const configDefault: AppConfig = {
     enabled: false,
   },
   logoPath: null,
+  numberFormat: null,
   mailClientFeatures: {
     feedbackEnabled: false,
     notificationsEnabled: false,

amundsen_application/static/js/config/config-types.ts

@@ -17,6 +17,7 @@ export interface AppConfig {
   userIdLabel?: string /* Temporary configuration due to lacking string customization/translation support */;
   issueTracking: IssueTrackingConfig;
   logoPath: string | null;
+  numberFormat: NumberFormatConfig | null;
   mailClientFeatures: MailClientFeaturesConfig;
   announcements: AnnoucementsFeaturesConfig;
   navLinks: Array<LinkConfig>;
@@ -36,6 +37,7 @@ export interface AppConfigCustom {
   userIdLabel?: string /* Temporary configuration due to lacking string customization/translation support */;
   issueTracking?: IssueTrackingConfig;
   logoPath?: string;
+  numberFormat?: NumberFormatConfig | null;
   mailClientFeatures?: MailClientFeaturesConfig;
   announcements?: AnnoucementsFeaturesConfig;
   navLinks?: Array<LinkConfig>;
@@ -305,3 +307,23 @@ interface EditableTextConfig {
 interface IssueTrackingConfig {
   enabled: boolean;
 }
+
+export enum NumberStyle {
+  DECIMAL = 'decimal',
+  CURRENCY = 'currency',
+  PERCENT = 'percent',
+  UNIT = 'unit',
+}
+
+export interface NumberStyleConfig {
+  style: NumberStyle;
+  config: string;
+}
+/**
+ * NumberFormatConfig - configurations for formatting different type of numbers like currency, percentage,number system
+ * this allows users to display numbers in desired format
+ */
+export interface NumberFormatConfig {
+  numberSystem: string | null;
+  [NumberStyle.DECIMAL]?: NumberStyleConfig;
+}

amundsen_application/static/js/config/config-utils.ts

@@ -257,3 +257,12 @@ export function getDescriptionSourceIconPath(sourceId: string): string {
 
   return '';
 }
+
+/**
+ * Returns the desired number format in which we want to format any number
+ * Used for formatting column stats
+ * If a configuration does not exist, None is returned
+ */
+export function getNumberFormat() {
+  return AppConfig.numberFormat;
+}

amundsen_application/static/js/config/index.spec.ts

@@ -299,3 +299,11 @@ describe('generateExploreUrl', () => {
     );
   });
 });
+
+describe('numberFormat', () => {
+  it('returns number format defined in config', () => {
+    const actual = ConfigUtils.getNumberFormat();
+    const expected = AppConfig.numberFormat;
+    expect(actual).toBe(expected);
+  });
+});

amundsen_application/static/js/utils/numberUtils.ts

+import { getNumberFormat } from 'config/config-utils';
+
+export function formatNumber(value) {
+  const numberformat = getNumberFormat();
+  if (numberformat == null) {
+    return Intl.NumberFormat().format(value);
+  }
+
+  const numbersystem = numberformat.numberSystem || null;
+  if (numbersystem) {
+    return Intl.NumberFormat(numbersystem).format(value);
+  }
+  return Intl.NumberFormat().format(value);
+}

requirements.txt

@@ -70,7 +70,7 @@ responses==0.12.0
 
 # A common package that holds the models deifnition and schemas that are used
 # accross different amundsen repositories.
-amundsen-common>=0.3.6,<1.0
+amundsen-common==0.5.6,<1.0
 
 # Library for rest endpoints with Flask
 # Upstream url: https://github.com/flask-restful/flask-restful

tests/unit/api/search/test_v0.py

@@ -373,6 +373,7 @@ class SearchDashboard(unittest.TestCase):
         }
         self.expected_parsed_results = [
             {
+                'chart_names': [],
                 'cluster': 'cluster',
                 'description': 'I am a dashboard',
                 'group_name': 'Amundsen Team',
@@ -386,6 +387,7 @@ class SearchDashboard(unittest.TestCase):
                 'url': 'product/name'
             },
             {
+                'chart_names': [],
                 'cluster': 'cluster',
                 'description': 'I am a second dashboard',
                 'group_name': 'Amundsen Team',