View data types in UI catalog

Issue-ID: SDC-4220
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Change-Id: I880c7fedb58eafc7524fc6833b9b5d02f3b7d523

2 files changed, 41 insertions, 30 deletions

diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
index f72823b54d..cd411d2d2c 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
@@ -16,9 +16,10 @@
  
 <div class="sdc-tile sdc-tile-fix-width">
 
-    <div class='sdc-tile-header' [ngClass]="{'purple': component.isResource(), 'blue': !component.isResource()}">
+    <div class='sdc-tile-header' [ngClass]="{'purple': component.isResource() || !component.isService(), 'blue': component.isService()}">
         <div *ngIf="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div>
         <div *ngIf="component.isService()">S</div>
+        <div *ngIf="!component.isResource() && !component.isService()">{{component.getComponentSubType()}}</div>
     </div>
 
     <div class='sdc-tile-content' data-tests-id="dashboard-Elements" (click)="tileClicked()">
@@ -35,18 +36,19 @@
                                     (hasEllipsisChanged)="hasEllipsis = $event">{{component.name | resourceName}}
                 </multiline-ellipsis>
             </div>
-            <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V
+            <div class="sdc-tile-info-line subtitle" *ngIf="component.isResource() || component.isService()"
+                 [attr.data-tests-id]="component.name+'Version'">V
                 {{component.version}}
             </div>
             <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.model">
-                {{component.model}}
+                {{getComponentModel()}}
             </div>
         </div>
     </div>
 
     <div class='sdc-tile-footer'>
         <div class="sdc-tile-footer-content">
-            <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
+            <div class='sdc-tile-footer-text' *ngIf="component.isResource() || component.isService()">{{component.getStatus(sdcMenu)}}</div>
         </div>
     </div>
 
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
index f5d9e88934..7b7754ee34 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
@@ -2,7 +2,8 @@ import {Component, Input, Output, Inject, EventEmitter} from '@angular/core';
 import {Component as ComponentModel} from 'app/models';
 import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
 import {ElementIcon} from "../sdc-element-icon/sdc-element-icon.component";
-import {ComponentType, ResourceType, SdcElementType} from "../../../../utils/constants";
+import {ComponentType, DEFAULT_MODEL_NAME, Icon, ResourceType} from "../../../../utils/constants";
+import {DataTypeCatalogComponent} from "../../../../models/data-type-catalog-component";
 
 @Component({
     selector: 'ui-tile',
@@ -10,41 +11,49 @@ import {ComponentType, ResourceType, SdcElementType} from "../../../../utils/con
     styleUrls: ['./tile.component.less']
 })
 export class TileComponent {
-    @Input() public component: ComponentModel;
-    @Output() public onTileClick: EventEmitter<ComponentModel>;
+    @Input() public component: ComponentModel | DataTypeCatalogComponent;
+    @Output() public onTileClick: EventEmitter<ComponentModel | DataTypeCatalogComponent>;
     public catalogIcon: ElementIcon;
     public hasEllipsis: boolean;
 
     constructor(@Inject(SdcMenuToken) public sdcMenu: IAppMenu) {
-        this.onTileClick = new EventEmitter<ComponentModel>();
+        this.onTileClick = new EventEmitter<ComponentModel | DataTypeCatalogComponent>();
         this.hasEllipsis = false;
     }
 
     ngOnInit(): void {
-        switch (this.component.componentType) {
+        if (this.component instanceof ComponentModel) {
+            switch (this.component.componentType) {
+                case ComponentType.SERVICE:
+                    if (this.component.icon === Icon.DEFAULT_ICON) {
+                        this.catalogIcon = new ElementIcon(this.component.icon, Icon.SERVICE_TYPE_60, Icon.COLOR_LIGHTBLUE, Icon.COLOR_WHITE);
+                    } else {
+                        this.catalogIcon = new ElementIcon(this.component.icon, Icon.SERVICE_TYPE_60, '', Icon.COLOR_LIGHTBLUE);
+                    }
+                    break;
+                case ComponentType.RESOURCE:
+                    switch (this.component.getComponentSubType()) {
+                        case ResourceType.CP:
+                        case ResourceType.VL:
+                            this.catalogIcon = new ElementIcon(this.component.icon, Icon.RESOURCE_TYPE_24, Icon.COLOR_PURPLE, Icon.COLOR_WHITE, Icon.SHAPE_CIRCLE, Icon.SIZE_MEDIUM);
+                            break;
+                        default:
+                            if (this.component.icon === Icon.DEFAULT_ICON) {
+                                this.catalogIcon = new ElementIcon(this.component.icon, Icon.RESOURCE_TYPE_60, Icon.COLOR_PURPLE, Icon.COLOR_WHITE, Icon.SHAPE_CIRCLE, Icon.SIZE_X_LARGE);
+                            } else {
+                                this.catalogIcon = new ElementIcon(this.component.icon, Icon.RESOURCE_TYPE_60, '', Icon.ERROR);
+                            }
 
-            case ComponentType.SERVICE:
-                if (this.component.icon === 'defaulticon') {
-                    this.catalogIcon = new ElementIcon(this.component.icon, "services_60", 'lightBlue', 'white');
-                } else {
-                    this.catalogIcon = new ElementIcon(this.component.icon, "services_60", '', 'lightBlue');
-                }
-                break;
-            case ComponentType.RESOURCE:
-                switch (this.component.getComponentSubType()) {
-                    case ResourceType.CP:
-                    case ResourceType.VL:
-                        this.catalogIcon = new ElementIcon(this.component.icon, "resources_24", "purple", "white", "circle", 'medium');
-                        break;
-                    default:
-                        if (this.component.icon === 'defaulticon') {
-                            this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", "purple", "white", "circle", 'x_large');
-                        } else {
-                            this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", '', "error");
-                        }
-
-                }
+                    }
+            }
+        }
+    }
 
+    public getComponentModel() {
+        if (this.component.model === undefined) {
+            return DEFAULT_MODEL_NAME;
+        } else {
+            return this.component.model;
         }
     }