diff --git a/dashboard/src/app/workspaces/create-workspace/ready-to-go-stacks/devfile-selector/devfile-selector.controller.ts b/dashboard/src/app/workspaces/create-workspace/ready-to-go-stacks/devfile-selector/devfile-selector.controller.ts index d002de2b8a6..e2860a80ed9 100644 --- a/dashboard/src/app/workspaces/create-workspace/ready-to-go-stacks/devfile-selector/devfile-selector.controller.ts +++ b/dashboard/src/app/workspaces/create-workspace/ready-to-go-stacks/devfile-selector/devfile-selector.controller.ts @@ -12,6 +12,7 @@ 'use strict'; import {CheWorkspace} from '../../../../../components/api/workspace/che-workspace.factory'; import {DevfileRegistry, IDevfileMetaData} from '../../../../../components/api/devfile-registry.factory'; +import {ImgSrcOnloadResult} from '../../../../../components/attribute/img-src/img-src.directive'; /** * @description This class is handling the controller of devfile selector. @@ -21,13 +22,17 @@ export class DevfileSelectorController { static $inject = ['devfileRegistry', 'cheWorkspace']; - private devfileRegistry: DevfileRegistry; - private cheWorkspace: CheWorkspace; - private devfiles: Array; + devfiles: Array; devfileOrderBy: string; onDevfileSelect: Function; selectedDevfile: any; stackName: string; + iconsLoaded: { + iconUrl?: boolean; + } = {}; + + private devfileRegistry: DevfileRegistry; + private cheWorkspace: CheWorkspace; /** * Default constructor that is using resource injection @@ -68,4 +73,13 @@ export class DevfileSelectorController { }); } } + + iconOnLoad(iconUrl: string, result: ImgSrcOnloadResult): void { + this.iconsLoaded[iconUrl] = result.loaded; + } + + showIcon(iconUrl: string): boolean { + return !!this.iconsLoaded[iconUrl]; + } + } diff --git a/dashboard/src/app/workspaces/create-workspace/ready-to-go-stacks/devfile-selector/devfile-selector.html b/dashboard/src/app/workspaces/create-workspace/ready-to-go-stacks/devfile-selector/devfile-selector.html index 698785c7959..5165b3e1da6 100644 --- a/dashboard/src/app/workspaces/create-workspace/ready-to-go-stacks/devfile-selector/devfile-selector.html +++ b/dashboard/src/app/workspaces/create-workspace/ready-to-go-stacks/devfile-selector/devfile-selector.html @@ -21,11 +21,11 @@ + che-column-title="Description"> + che-column-title="Required memory"> @@ -42,11 +42,12 @@
-
- -
-
-
+
+ +
@@ -57,8 +58,8 @@
{{devfile.description}}
- -
+ +
{{devfile.globalMemoryLimit}}
diff --git a/dashboard/src/components/attribute/img-src/img-src.directive.ts b/dashboard/src/components/attribute/img-src/img-src.directive.ts index f4c2d503473..e2cfe55f57a 100644 --- a/dashboard/src/components/attribute/img-src/img-src.directive.ts +++ b/dashboard/src/components/attribute/img-src/img-src.directive.ts @@ -11,9 +11,17 @@ */ 'use strict'; +export type ImgSrcOnloadResult = { + loaded: boolean; +}; + /** * Fetches images using the $http service. * + * @usage + * + * * @author Oleksii Kurinnyi */ export class ImgSrc implements ng.IDirective { @@ -34,6 +42,13 @@ export class ImgSrc implements ng.IDirective { } link($scope: ng.IScope, $element: ng.IAugmentedJQuery, $attrs: ng.IAttributes): void { + const onload = (loaded: boolean) => { + if (!$attrs.imgSrcOnload) { + return; + } + $scope.$eval($attrs.imgSrcOnload, { $result: { loaded } }); + }; + $attrs.$observe('imgSrc', (url: string) => { if (this.isDev) { url = url.replace(/https?:\/\/[^\/]+/, ''); @@ -44,9 +59,12 @@ export class ImgSrc implements ng.IDirective { url: url, cache: 'true' }; - this.$http(requestConfig).then((response: any) => { + this.$http(requestConfig).then((response: ng.IHttpResponse) => { const blob = new Blob([response.data], {type: response.headers('Content-Type')}); $attrs.$set('src', (window.URL || (window as any).webkitURL).createObjectURL(blob)); + onload(true); + }, () => { + onload(false); }); }); }