Added Metabase support from UI (#1795)

* Added Metabase support on UI

* Added Service Icon for Metabase

* Minor fix

openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts

@@ -22,6 +22,7 @@ import hive from '../assets/img/service-icon-hive.png';
 import kafka from '../assets/img/service-icon-kafka.png';
 import looker from '../assets/img/service-icon-looker.png';
 import mariadb from '../assets/img/service-icon-mariadb.png';
+import metabase from '../assets/img/service-icon-metabase.png';
 import mssql from '../assets/img/service-icon-mssql.png';
 import oracle from '../assets/img/service-icon-oracle.png';
 import postgres from '../assets/img/service-icon-post.png';
@@ -60,6 +61,7 @@ export const SUPERSET = superset;
 export const LOOKER = looker;
 export const TABLEAU = tableau;
 export const REDASH = redash;
+export const METABASE = metabase;
 
 export const AIRFLOW = airflow;
 export const PREFECT = prefect;
@@ -86,7 +88,7 @@ export const serviceTypes: Record<ServiceTypes, Array<string>> = {
     'Vertica',
   ],
   messagingServices: ['Kafka'],
-  dashboardServices: ['Superset', 'Looker', 'Tableau', 'Redash'],
+  dashboardServices: ['Superset', 'Looker', 'Tableau', 'Redash', 'Metabase'],
   pipelineServices: ['Airflow', 'Prefect', 'Glue'],
 };
 

openmetadata-ui/src/main/resources/ui/src/enums/service.enum.ts

@@ -45,6 +45,7 @@ export enum DashboardServiceType {
   LOOKER = 'Looker',
   TABLEAU = 'Tableau',
   REDASH = 'Redash',
+  METABASE = 'Metabase',
 }
 
 export enum PipelineServiceType {

openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx

@@ -644,7 +644,7 @@ const ServicePage: FunctionComponent = () => {
           <div className="tw-px-4" data-testid="service-page">
             <TitleBreadcrumb titleLinks={slashedTableName} />
 
-            <div className="tw-flex tw-gap-1 tw-mb-2 tw-mt-1">
+            <div className="tw-flex tw-gap-1 tw-mb-2 tw-mt-1 tw-ml-7">
               {getOptionalFields()}
               <span>
                 <span className="tw-text-grey-muted tw-font-normal">
@@ -668,7 +668,9 @@ const ServicePage: FunctionComponent = () => {
               </span>
             </div>
 
-            <div className="tw-my-3" data-testid="description-container">
+            <div
+              className="tw-my-3 tw-ml-2"
+              data-testid="description-container">
               <Description
                 description={description || ''}
                 entityName={serviceFQN}
@@ -679,7 +681,7 @@ const ServicePage: FunctionComponent = () => {
               />
             </div>
 
-            <div className="tw-mt-4" data-testid="table-container">
+            <div className="tw-mt-4 tw-px-1" data-testid="table-container">
               <table
                 className="tw-bg-white tw-w-full tw-mb-4"
                 data-testid="database-tables">

openmetadata-ui/src/main/resources/ui/src/styles/temp.css

@@ -660,7 +660,7 @@
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 18px;
-  max-height: 50px;
+  max-height: 54px;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }

openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtils.ts

@@ -24,6 +24,7 @@ import {
   KAFKA,
   LOOKER,
   MARIADB,
+  METABASE,
   MSSQL,
   MYSQL,
   ORACLE,
@@ -112,6 +113,9 @@ export const serviceTypeLogo = (type: string) => {
     case DashboardServiceType.REDASH:
       return REDASH;
 
+    case DashboardServiceType.METABASE:
+      return METABASE;
+
     case PipelineServiceType.AIRFLOW:
       return AIRFLOW;
 
@@ -255,6 +259,7 @@ export const getEntityCountByService = (buckets: Array<Bucket>) => {
       case DashboardServiceType.LOOKER:
       case DashboardServiceType.TABLEAU:
       case DashboardServiceType.REDASH:
+      case DashboardServiceType.METABASE:
         entityCounts.dashboardCount += bucket.doc_count;
 
         break;