MINOR: fix data assets label for all the services (#16886)

* fix data assets label for all the services

* fix test
This commit is contained in:
Ashish Gupta 2024-07-02 17:55:22 +05:30 committed by GitHub
parent 417678e945
commit 028e5dc1e2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 88 additions and 9 deletions

View File

@ -23,6 +23,7 @@ import {
import serviceUtilClassBase from '../../../../../utils/ServiceUtilClassBase';
import AppBadge from '../../../../common/Badge/Badge.component';
import '../data-assets-widget.less';
interface DataAssetCardProps {
service: Bucket;
}
@ -47,19 +48,19 @@ const DataAssetCard = ({ service: { key, doc_count } }: DataAssetCardProps) => {
to={redirectLink}>
<Card className="service-card" data-testid="service-card" size="small">
<div
className="p-t-xs d-flex justify-center items-center"
className="d-flex justify-center items-center"
data-testid="service-icon">
{getServiceLogo(capitalize(key) ?? '', 'h-8')}
</div>
<Typography.Text
className="m-t-xss text-base text-grey-body font-medium truncate w-full d-inline-block"
className="m-t-sm text-sm text-grey-body font-medium truncate w-full d-inline-block"
data-testid={`service-name-${key}`}>
{capitalize(key)}
{serviceUtilClassBase.getServiceName(key)}
</Typography.Text>
<AppBadge
className="data-asset-badge m-t-xs m-b-xss"
className="data-asset-badge m-t-sm"
label={toString(doc_count)}
/>
</Card>

View File

@ -33,6 +33,7 @@ jest.mock('../../../../../utils/CommonUtils', () => ({
jest.mock('../../../../../utils/ServiceUtilClassBase', () => ({
getDataAssetsService: jest.fn().mockReturnValue('tables'),
getServiceName: jest.fn().mockReturnValue('Mysql'),
}));
jest.mock('../../../../common/Badge/Badge.component', () => {

View File

@ -71,7 +71,7 @@ const DataAssetsWidget = ({
className="data-assets-explore-widget-container card-widget h-full"
data-testid="data-assets-widget"
loading={loading}>
<Row gutter={[0, 15]}>
<Row gutter={[0, 16]}>
<Col span={24}>
<Row justify="space-between">
<Col>
@ -119,7 +119,7 @@ const DataAssetsWidget = ({
</Typography.Paragraph>
</ErrorPlaceHolder>
) : (
<Row gutter={[10, 15]}>
<Row gutter={[0, 8]}>
{services.map((service) => (
<Col key={service.key} lg={6} xl={4}>
<DataAssetCard service={service} />

View File

@ -24,7 +24,7 @@
transition: 0.3s ease-in-out;
&:hover {
background: @grey-2;
background: @grey-1;
}
.ant-card-body {
@ -32,11 +32,12 @@
flex-direction: column;
text-align: center;
align-items: center;
padding: 20px 0;
.data-asset-badge {
width: max-content;
padding: 6px 14px;
background-color: @blue-5;
background-color: @blue-1;
.ant-typography {
color: @primary-color;
font-size: 12px;

View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { cloneDeep, toLower } from 'lodash';
import { capitalize, cloneDeep, toLower } from 'lodash';
import {
AIRBYTE,
AIRFLOW,
@ -510,6 +510,82 @@ class ServiceUtilClassBase {
}
}
public getServiceName = (serviceType: string) => {
switch (serviceType) {
case this.DatabaseServiceTypeSmallCase.CustomDatabase:
return 'Custom Database';
case this.DatabaseServiceTypeSmallCase.AzureSQL:
return 'AzureSQL';
case this.DatabaseServiceTypeSmallCase.BigQuery:
return 'BigQuery';
case this.DatabaseServiceTypeSmallCase.BigTable:
return 'BigTable';
case this.DatabaseServiceTypeSmallCase.DeltaLake:
return 'DeltaLake';
case this.DatabaseServiceTypeSmallCase.DomoDatabase:
return 'DomoDatabase';
case this.DatabaseServiceTypeSmallCase.DynamoDB:
return 'DynamoDB';
case this.DatabaseServiceTypeSmallCase.MariaDB:
return 'MariaDB';
case this.DatabaseServiceTypeSmallCase.MongoDB:
return 'MongoDB';
case this.DatabaseServiceTypeSmallCase.PinotDB:
return 'pinotdb';
case this.DatabaseServiceTypeSmallCase.SapHana:
return 'SapHana';
case this.DatabaseServiceTypeSmallCase.SAS:
return 'SAS';
case this.DatabaseServiceTypeSmallCase.SingleStore:
return 'SingleStore';
case this.DatabaseServiceTypeSmallCase.SQLite:
return 'SQlite';
case this.DatabaseServiceTypeSmallCase.UnityCatalog:
return 'UnityCatalog';
case this.MessagingServiceTypeSmallCase.CustomMessaging:
return 'Custom Messaging';
case this.DashboardServiceTypeSmallCase.DomoDashboard:
return 'DomoDashboard';
case this.DashboardServiceTypeSmallCase.PowerBI:
return 'PowerBI';
case this.DashboardServiceTypeSmallCase.QlikCloud:
return 'QlikCloud';
case this.DashboardServiceTypeSmallCase.QlikSense:
return 'QlikSense';
case this.DashboardServiceTypeSmallCase.QuickSight:
return 'QuickSight';
case this.DashboardServiceTypeSmallCase.CustomDashboard:
return 'Custom Dashboard';
case this.PipelineServiceTypeSmallCase.DatabricksPipeline:
return 'DatabricksPipeline';
case this.PipelineServiceTypeSmallCase.DBTCloud:
return 'DBTCloud';
case this.PipelineServiceTypeSmallCase.DomoPipeline:
return 'DomoPipeline';
case this.PipelineServiceTypeSmallCase.GluePipeline:
return 'Glue Pipeline';
case this.PipelineServiceTypeSmallCase.KafkaConnect:
return 'KafkaConnect';
case this.PipelineServiceTypeSmallCase.OpenLineage:
return 'OpenLineage';
case this.PipelineServiceTypeSmallCase.CustomPipeline:
return 'Custom Pipeline';
case this.MlModelServiceTypeSmallCase.SageMaker:
return 'SageMaker';
case this.MlModelServiceTypeSmallCase.CustomMlModel:
return 'Custom Ml Model';
case this.StorageServiceTypeSmallCase.CustomStorage:
return 'Custom Storage';
case this.SearchServiceTypeSmallCase.ElasticSearch:
return 'ElasticSearch';
case this.SearchServiceTypeSmallCase.CustomSearch:
return 'Custom Search';
default:
return capitalize(serviceType);
}
};
public getStorageServiceConfig(type: StorageServiceType) {
let schema = {};
const uiSchema = { ...COMMON_UI_SCHEMA };