diff options
Diffstat (limited to 'catalog-ui/app/scripts/view-models/component-viewer')
9 files changed, 988 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/component-viewer/activity-log/activity-log-view.html b/catalog-ui/app/scripts/view-models/component-viewer/activity-log/activity-log-view.html new file mode 100644 index 0000000000..ac51e9014c --- /dev/null +++ b/catalog-ui/app/scripts/view-models/component-viewer/activity-log/activity-log-view.html @@ -0,0 +1,16 @@ +<div ng-repeat="activityDate in activityDateArray " class="w-sdc-component-viewer-right-activity-log" > + <div class="w-sdc-component-viewer-right-activity-log-date" >{{activityDate | date: 'longDate'}}</div> + <div ng-repeat="activity in activityLog[activityDate] | orderBy: '-TIMESTAMP'"> + <div class="w-sdc-component-viewer-right-activity-log-time">{{activity.TIMESTAMP.replace(" UTC", '') | stringToDateFilter | date: 'mediumTime':'UTC'}}</div> + <div class="w-sdc-component-viewer-right-activity-log-content">{{"Action: " + parseAction(activity.ACTION) + " Performed by: " + activity.MODIFIER + " Status: " + activity.STATUS}}</div> + </div> + </div> +</div> + + + + + + + + diff --git a/catalog-ui/app/scripts/view-models/component-viewer/activity-log/activity-log-view.less b/catalog-ui/app/scripts/view-models/component-viewer/activity-log/activity-log-view.less new file mode 100644 index 0000000000..4a7676b6e2 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/component-viewer/activity-log/activity-log-view.less @@ -0,0 +1,18 @@ +.w-sdc-component-viewer-right-activity-log{ + + .w-sdc-component-viewer-right-activity-log-date{ + .backgroundColor.n; + .font-color.g; + padding: 4px 11px + } + .w-sdc-component-viewer-right-activity-log-time{ + .g_3; + padding: 12px 0px 0px 11px; + } + + .w-sdc-component-viewer-right-activity-log-content{ + .g_1; + padding: 0px 0px 12px 11px; + border-bottom: 1px solid rgba(0, 0, 0, 0.17); + } +} diff --git a/catalog-ui/app/scripts/view-models/component-viewer/component-viewer-view-model.ts b/catalog-ui/app/scripts/view-models/component-viewer/component-viewer-view-model.ts new file mode 100644 index 0000000000..3ae8ad70fb --- /dev/null +++ b/catalog-ui/app/scripts/view-models/component-viewer/component-viewer-view-model.ts @@ -0,0 +1,211 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// <reference path="../../references"/> + +module Sdc.ViewModels { + 'use strict'; + + interface IComponentViewerViewModelScope extends ng.IScope { + component: Models.Components.Component; + additionalInformations: Array<Models.AdditionalInformationModel>; + activityLog: any; + activityDateArray: Array<any>; //this is in order to sort the dates + inputs: Array<any>; + isLoading: boolean; + templateUrl: string; + currentTab:string; + preVersion:string; + sdcMenu:Models.IAppMenu; + versionsList:Array<any>; + close(): void; + hasItems(obj:any): boolean; + onVersionChanged(version:any) : void; + moveToTab(tab:string):void; + isSelected(tab:string):boolean; + getActivityLog(uniqueId:string):void; + parseAction(action:string):string; + } + + export class ComponentViewerViewModel { + + static '$inject' = [ + '$scope', + '$modalInstance', + 'component', + 'Sdc.Services.ActivityLogService', + 'sdcMenu', + 'ComponentFactory' + ]; + + constructor(private $scope:IComponentViewerViewModelScope, + private $modalInstance:ng.ui.bootstrap.IModalServiceInstance, + private component:Models.Components.Component, + private activityLogService:Services.ActivityLogService, + private sdcMenu:Models.IAppMenu, + private ComponentFactory: Utils.ComponentFactory) { + this.initScope(component); + } + + //creating objects for versions + private initVersionObject:Function = ():void => { + this.$scope.versionsList = []; + for (let version in this.$scope.component.allVersions) { + this.$scope.versionsList.push({ + versionNumber: version, + versioning: this.versioning(version), + versionId: this.$scope.component.allVersions[version] + }); + } + + }; + + private versioning:Function = (versionNumber:string):string => { + let version:Array<string> = versionNumber.split('.'); + return '00000000'.slice(version[0].length) + version[0] + '.' + '00000000'.slice(version[1].length) + version[1]; + }; + + private showComponentInformationView:Function = ():void => { + if (this.$scope.component.isResource()) { + this.$scope.templateUrl = '/app/scripts/view-models/component-viewer/properties/resource-properties-view.html'; + } else if(this.$scope.component.isService()) { + this.$scope.templateUrl = '/app/scripts/view-models/component-viewer/properties/service-properties-view.html'; + } else { + this.$scope.templateUrl = '/app/scripts/view-models/component-viewer/properties/product-properties-view.html'; + } + }; + + private showActivityLogView:Function = ():void => { + this.$scope.templateUrl = '/app/scripts/view-models/component-viewer/activity-log/activity-log-view.html'; + }; + + private initComponent = (component:Models.Components.Component):void => { + this.$scope.component = component; + this.$scope.additionalInformations = component.getAdditionalInformation(); + this.initVersionObject(); + this.$scope.isLoading = false; + }; + + private initScope = (component:Models.Components.Component):void => { + this.$scope.isLoading = false; + this.initComponent(component); + this.$scope.currentTab = 'PROPERTIES'; + this.$scope.preVersion = component.version; + this.$scope.sdcMenu = this.sdcMenu; + this.showComponentInformationView(); + //service inputs + if (component.isService()) { + let inputs:Array<any> = []; + + for (let group in component.componentInstancesProperties) { + if (component.componentInstancesProperties[group]) { + component.componentInstancesProperties[group].forEach((property:Models.PropertyModel):void => { + if (!property.value) { + property.value = property.defaultValue; + } + inputs.push({ + name: property.name, + value: property.value, + type: property.type + }); + }); + } + } + this.$scope.inputs = inputs; + } + + this.$scope.hasItems = (obj:any):boolean => { + return Object.keys(obj).length > 0; + }; + + this.$scope.close = ():void => { + this.$modalInstance.dismiss(); + }; + + this.$scope.onVersionChanged = (version:any):void => { + if (version.versionNumber != this.$scope.component.version) { + this.$scope.isLoading = true; + this.ComponentFactory.getComponentFromServer(this.component.componentType, version.versionId).then((component: Models.Components.Component):void => { + this.initComponent(component); + }); + if (this.$scope.currentTab === 'ACTIVITY_LOG') { + this.$scope.getActivityLog(version.versionId); + } + + } + }; + + this.$scope.getActivityLog = (uniqueId:any):void => { + + let onError = (response) => { + this.$scope.isLoading = false; + console.info('onFaild', response); + + }; + let onSuccess = (response:Array<Models.Activity>) => { + this.$scope.activityLog = _.groupBy(response, function (activity:Models.Activity) { //group by date only + let dateTime:Date = new Date(activity.TIMESTAMP.replace(" UTC", '').replace(" ", 'T')); + // let date:Date = new Date(dateTime.getFullYear(), dateTime.getMonth(), dateTime.getDate()); + return dateTime.getTime(); + }); + /*this is in order to sort the jsonObject by date*/ + this.$scope.activityDateArray = Object.keys(this.$scope.activityLog); + this.$scope.activityDateArray.sort().reverse(); + this.$scope.isLoading = false; + }; + + this.$scope.isLoading = true; + if (this.$scope.component.isResource()) { + this.activityLogService.getActivityLogService('resources', uniqueId).then(onSuccess, onError); + } + if (this.$scope.component.isService()) { + this.activityLogService.getActivityLogService('services', uniqueId).then(onSuccess, onError); + } + + }; + + this.$scope.moveToTab = (tab:string):void => { + if (tab === this.$scope.currentTab) { + return; + } else if (tab === 'PROPERTIES') { + this.showComponentInformationView(); + this.$scope.preVersion = this.$scope.component.version; + } else if (tab === 'ACTIVITY_LOG') { + if (!this.$scope.activityLog || this.$scope.preVersion != this.$scope.component.version) { + this.$scope.activityLog = this.$scope.getActivityLog(this.$scope.component.uniqueId); + } + this.showActivityLogView(); + } else { + console.error("Tab " + tab + " not found!"); + return; + } + this.$scope.currentTab = tab; + }; + + this.$scope.isSelected = (tab:string):boolean => { + return tab === this.$scope.currentTab; + }; + + this.$scope.parseAction = (action:string) => { + return action ? action.split(/(?=[A-Z])/).join(' ') : ''; + }; + + } + } +} diff --git a/catalog-ui/app/scripts/view-models/component-viewer/component-viewer.html b/catalog-ui/app/scripts/view-models/component-viewer/component-viewer.html new file mode 100644 index 0000000000..6f244b048e --- /dev/null +++ b/catalog-ui/app/scripts/view-models/component-viewer/component-viewer.html @@ -0,0 +1,55 @@ +<div class="w-sdc-resource-viewer"> + <loader data-display="isLoading"></loader> + <div class="w-sdc-resource-viewer-modal-close sprite x-btn-black" data-ng-click="close()">X</div> + <div class="w-sdc-resource-viewer-content" data-ng-if="component"> + <div class="w-sdc-resource-viewer-left"> + <h3 class="w-sdc-resource-viewer-left-title clearfix"> + <div class="w-sdc-resource-viewer-left-title-icon i-sdc-form-item-suggested-icon borderElement large {{component.iconSprite}} {{component.icon}}"></div> + <span class="w-sdc-resource-viewer-left-title-name" + tooltips tooltip-content="{{component.name | resourceName}}">{{component.name | resourceName}}</span> + <br/> + <span class="w-sdc-resource-viewer-left-title-version">v{{component.version}}</span> + </h3> + <p class="w-sdc-resource-viewer-left-title-uuid"> + UUID: {{component.uuid}} + </p> + <div class="w-sdc-resource-viewer-leftbar-section"> + <div class="w-sdc-resource-viewer-leftbar-section-title">Version History</div> + <perfect-scrollbar class="w-sdc-resource-viewer-version"> + <div class="i-sdc-resource-viewer-version-container"> + <div data-ng-repeat="version in versionsList | orderBy: '-versioning'"> + <span class="i-sdc-resource-viewer-version-item" data-ng-class="{'active': version.versionNumber == component.version}" data-ng-click="onVersionChanged(version)">{{ version.versionNumber }}</span> + </div> + </div> + </perfect-scrollbar> + </div> + + <div class="w-sdc-resource-viewer-leftbar-section"> + <div class="w-sdc-resource-viewer-leftbar-section-title">Composition</div> + <perfect-scrollbar class="w-sdc-resource-viewer-leftbar-section-structure" ng-show="component.isComplex()"> + <structure-tree component="component"></structure-tree> + </perfect-scrollbar> + </div> + </div> + + <div class="w-sdc-resource-viewer-right"> + <button class="w-sdc-resource-viewer-right-tab" + data-ng-class="{'selected': isSelected('PROPERTIES')}" + data-ng-click="moveToTab('PROPERTIES')" + translate="ENTITY_VIEWER_PROPERTIES_TAB"> + </button> + + <button class="w-sdc-resource-viewer-right-tab" + data-ng-if="component.isResource() || component.isService()" + data-ng-class="{'selected': isSelected('ACTIVITY_LOG')}" + data-ng-click="moveToTab('ACTIVITY_LOG')" + translate="ENTITY_VIEWER_ACTIVITY_LOG_TAB"> + </button> + + <perfect-scrollbar include-padding="true" class="w-sdc-resource-viewer-right-content"> + <ng-include src="templateUrl" ng-if="true"></ng-include> + </perfect-scrollbar> + <div style="clear:both;"></div> + </div> + </div> +</div> diff --git a/catalog-ui/app/scripts/view-models/component-viewer/component-viewer.less b/catalog-ui/app/scripts/view-models/component-viewer/component-viewer.less new file mode 100644 index 0000000000..2fe5676d62 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/component-viewer/component-viewer.less @@ -0,0 +1,148 @@ +html .modal-component-viewer{ + width: 1084px; +} + +.w-sdc-resource-viewer { + .b_7; + .w-sdc-resource-viewer-modal-close{ + z-index: 2; + text-indent: -100px; + overflow: hidden; + top: 19px; + } + .w-sdc-resource-viewer-content { + position: relative; + overflow: hidden; + + .w-sdc-resource-viewer-left { + + .bg_j; + display: table-cell; + width: 282px; + + .w-sdc-resource-viewer-left-title { + margin: 0; + display: block; + height: 100px; + padding: 20px 0; + } + + .w-sdc-resource-viewer-left-title-icon { + margin: 0 15px; + vertical-align: middle; + float: left; + } + + .w-sdc-resource-viewer-left-title-name { + .g_7; + max-width: 160px; + overflow: hidden; + display: inline-block; + text-overflow: ellipsis; + vertical-align: middle; + line-height: 23px; + padding-top: 10px; + font-weight: bold; + white-space: nowrap; + } + + .w-sdc-resource-viewer-left-title-version { + .g_13; + float: left; + } + + .w-sdc-resource-viewer-left-title-uuid { + .g_14; + text-align: center; + border-top: 1px solid rgba(120, 136, 148, 0.26); + width: 95%; + margin: auto; + padding: 7px 0; + } + + .w-sdc-resource-viewer-leftbar-section { + font-family: omnes-medium, sans-serif; + } + + .w-sdc-resource-viewer-leftbar-section-title { + .bg_o; + color: #fff; + font-size: 14px; + padding: 12px 20px; + text-transform: uppercase; + } + + .w-sdc-resource-viewer-leftbar-section-structure{ + .perfect-scrollbar; + max-height: 525px; + } + .w-sdc-resource-viewer-version { + font-weight: bold; + .perfect-scrollbar; + } + + .i-sdc-resource-viewer-version-container { + padding: 13px 0px 13px 13px; + max-height: 218px; + + .i-sdc-resource-viewer-version-item { + + &.active { + .a_7; + } + &:hover { + cursor: pointer; + } + } + + } + } + + .w-sdc-resource-viewer-right { + .bg_c; + display: table-cell; + vertical-align: top; + padding: 0; // for the scroller to be on all width + width: 716px; + padding: 25px 0px 0px 35px; + + .w-sdc-resource-viewer-right-content { + padding: 0 52px 0 0px; + margin-bottom: 25px; + height: 700px; + overflow: hidden; + position: relative; + + } + + .w-sdc-resource-viewer-right-tab { + .b_6; + + .hand; + background-color: transparent; + position: relative; + font-weight: 500; + line-height: 30px; + border: none; + border-bottom: solid 1px @color_c; + vertical-align: middle; + padding: 0px 30px 20px 0px; + + + &:focus, + &:active { + outline: none; + + } + &.selected { + outline: none; + font-weight: 700; + .font-color.a; + } + } + + + } + + } +} diff --git a/catalog-ui/app/scripts/view-models/component-viewer/properties/product-properties-view.html b/catalog-ui/app/scripts/view-models/component-viewer/properties/product-properties-view.html new file mode 100644 index 0000000000..8aeda603f8 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/component-viewer/properties/product-properties-view.html @@ -0,0 +1,76 @@ +<div class="w-sdc-component-viewer-right-properties"> + + <h4 class="w-sdc-resource-viewer-right-title">General Information</h4> + <div class="w-sdc-resource-viewer-right-content-section"> + <div class='sdc-resource-viewer-sidebar-section-content-column-1'> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_TYPE"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" translate="GENERAL_LABEL_PRODUCT"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_VERSION"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.version"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CATEGORY"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" tooltips tooltip-content="{{component.category}}" data-ng-bind="component.category"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CREATION_DATE"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.creationDate | date: 'MM/dd/yyyy'"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_AUTHOR"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.creatorFullName"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CONTACT_ID"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.contacts[0]"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_PROJECT_CODE"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.projectCode"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label">Life Cycle Status:</span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value"> + {{sdcMenu.LifeCycleStatuses[component.lifecycleState].text}} + </span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label">Distribution Status:</span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value"> + {{sdcMenu.DistributionStatuses[component.distributionStatus].text}} + </span> + </div> + </div> + <div class='sdc-resource-viewer-sidebar-section-content-column-2'> + <div class="sdc-resource-viewer-sidebar-section-content-item description"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_DESCRIPTION"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.description"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item" > + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_TAGS"></span> + <span tooltips tooltip-content="{{component.tags.join(', ')}}" class="sdc-resource-viewer-sidebar-section-content-tags" data-ng-repeat="(tag, tagName) in component.tags"> + {{tagName}}{{$last ? '' : ','}} + </span> + </div> + </div> + </div> + <h4 class="w-sdc-resource-viewer-right-title">Additional Information</h4> + + <div class="sdc-properties-container w-sdc-resource-viewer-right-content-section"> + <table class="w-sdc-resource-viewer-right-table" data-ng-show="additionalInformations.length"> + <thead class="w-sdc-resource-viewer-right-table-head"> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Key</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Value</th> + </thead> + <tbody> + <tr data-ng-repeat="additionalInformation in additionalInformations"> + <td><span class="ellipsis-cols2" tooltips tooltip-content="{{additionalInformation.key}}">{{additionalInformation.key}}</span></td> + <td><span class="ellipsis-cols2" tooltips tooltip-content="{{additionalInformation.value}}">{{additionalInformation.value}}</span></td> + </tr> + </tbody> + </table> + </div> +</div> diff --git a/catalog-ui/app/scripts/view-models/component-viewer/properties/properties-view.less b/catalog-ui/app/scripts/view-models/component-viewer/properties/properties-view.less new file mode 100644 index 0000000000..c0beed338f --- /dev/null +++ b/catalog-ui/app/scripts/view-models/component-viewer/properties/properties-view.less @@ -0,0 +1,128 @@ +.w-sdc-component-viewer-right-properties { + .w-sdc-resource-viewer-tabs { + height: 42px; + } + + .w-sdc-resource-viewer-right-content-section { + margin: 0 0 20px 16px; + } + + .sdc-resource-viewer-sidebar-section-content-column-1, + .sdc-resource-viewer-sidebar-section-content-column-2 { + display: table-cell; + width: 50%; + } + .sdc-resource-viewer-sidebar-section-content-item { + .b_7; + margin-bottom: 5px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 305px; + } + .sdc-resource-viewer-sidebar-section-content-item-label { + .bold; + .g_9; + } + .w-sdc-resource-viewer-right .sdc-resource-viewer-sidebar-section-content-column-1 { + .sdc-resource-viewer-sidebar-section-content-item { + width: 390px; + } + } + .sdc-resource-viewer-sidebar-section-content-item.description { + margin: 0; + + .sdc-resource-viewer-sidebar-section-content-item-value { + word-wrap: break-word; + white-space: normal; + display: block; + + } + .sdc-resource-viewer-sidebar-section-content-tags { + word-wrap: break-word; + white-space: pre-wrap; + display: inline-block; + max-width: 167px; + + } + } + + .w-sdc-resource-viewer-right-title { + .g_1; + .bg_n; + padding: 7px 15px; + margin: 0px 0 25px; + font-weight: bold; + } + + .w-sdc-resource-viewer-right-table-head-cell { + .g_9; + text-align: left; + } + + .cols-1 { + width: 100%; + } + .cols-2 { + width: 50%; + } + .cols-3 { + width: 33%; + } + + .sdc-properties-container table tbody td.label { + .bold; + } + + .w-sdc-designer-sidebar-section-content, + .w-sdc-resource-viewer-right-table { + display: table; + width: 100%; + .b_9; + word-break: break-all; + + tbody td { + padding: 4px 20px 0 0; + + .ellipsis-directive-more-less { + display: none; + } + + .ellipsis-cols2 { + .sdc-ellipsis; + max-width: 340px; + } + .ellipsis-cols3 { + .sdc-ellipsis; + max-width: 200px; + } + } + + } + + .i-sdc-designer-sidebar-section-content-column-1 { + display: table-cell; + width: 50%; + } + + .i-sdc-designer-sidebar-section-content-column-2 { + display: table-cell; + width: 50%; + } + + .i-sdc-resource-viewer-artifacts-item-action, + .sdc-information-artifacts-icon { + .sprite; + display: inline-block; + width: 20px; + height: 20px; + cursor: pointer; + vertical-align: middle; + &.download { + .sprite.e-sdc-small-download; + } + &.preview { + .e-sdc-small-icon-eye; + } + } +} diff --git a/catalog-ui/app/scripts/view-models/component-viewer/properties/resource-properties-view.html b/catalog-ui/app/scripts/view-models/component-viewer/properties/resource-properties-view.html new file mode 100644 index 0000000000..c02e7aba7e --- /dev/null +++ b/catalog-ui/app/scripts/view-models/component-viewer/properties/resource-properties-view.html @@ -0,0 +1,169 @@ +<div class="w-sdc-component-viewer-right-properties"> + + <h4 class="w-sdc-resource-viewer-right-title">General Information</h4> + <div class="w-sdc-resource-viewer-right-content-section"> + <div class='sdc-resource-viewer-sidebar-section-content-column-1'> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_TYPE"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" >Resource</span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_RESOURCE_TYPE"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.resourceType | resourceTypeName"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_VERSION"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.version"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CATEGORY"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" tooltips tooltip-content="{{component.categories[0].name}}" data-ng-bind="component.categories[0].name"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_SUB_CATEGORY"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" tooltips tooltip-content="{{component.categories[0].subcategories[0].name}}" data-ng-bind="component.categories[0].subcategories[0].name"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CREATION_DATE"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.creationDate | date: 'MM/dd/yyyy'"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_AUTHOR"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.creatorFullName"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_VENDOR_NAME"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.vendorName"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_VENDOR_RELEASE"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.vendorRelease"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CONTACT_ID"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.contactId"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label">Life Cycle Status:</span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value"> + {{sdcMenu.LifeCycleStatuses[component.lifecycleState].text}} + </span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label">System Name:</span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" tooltips tooltip-content="{{component.systemName}}" data-ng-bind="component.systemName"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_LICENSE_TYPE"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.licenseType"></span> + </div> + </div> + <div class='sdc-resource-viewer-sidebar-section-content-column-2'> + <div class="sdc-resource-viewer-sidebar-section-content-item description"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_DESCRIPTION"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.description"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_TAGS"></span> + <span class="sdc-resource-viewer-sidebar-section-content-tags" data-ng-repeat="(tag, tagName) in component.tags" tooltips tooltip-content="{{component.tags.join(', ')}}">{{tagName}}{{$last ? '' : ','}}</span> + </div> + </div> + </div> + + <h4 class="w-sdc-resource-viewer-right-title">Additional Information</h4> + + <div class="sdc-properties-container w-sdc-resource-viewer-right-content-section"> + <table class="w-sdc-resource-viewer-right-table" data-ng-show="additionalInformations.length"> + <thead class="w-sdc-resource-viewer-right-table-head"> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Key</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Value</th> + </thead> + <tbody> + <tr data-ng-repeat="additionalInformation in additionalInformations"> + <td><span class="ellipsis-cols2" tooltips tooltip-content="{{additionalInformation.key}}">{{additionalInformation.key}}</span></td> + <td><span class="ellipsis-cols2" tooltips tooltip-content="{{additionalInformation.value}}">{{additionalInformation.value}}</span></td> + </tr> + </tbody> + </table> + </div> + + <h4 class="w-sdc-resource-viewer-right-title">Properties</h4> + <div class="sdc-properties-container w-sdc-resource-viewer-right-content-section"> + <table class="w-sdc-resource-viewer-right-table" data-ng-show="component.properties.length"> + <thead class="w-sdc-resource-viewer-right-table-head"> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Name</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">Type (Constraints)</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">Default Value</th> + </thead> + <tbody> + <tr data-ng-repeat="property in component.properties"> + <td><span class="ellipsis-cols2" data-tests-id="{{property.name}}" tooltips tooltip-content="{{property.name}}">{{property.name}}</span></td> + <td><span data-tests-id="{{property.type}}">{{property.type}}</span></td> + <td><span class="ellipsis-cols3" data-tests-id="{{property.defaultValue}}" tooltips tooltip-content="{{property.defaultValue}}">{{property.defaultValue}}</span></td> + </tr> + </tbody> + </table> + </div> + + <h4 class="w-sdc-resource-viewer-right-title">Requirements</h4> + <div class="sdc-requirements-container w-sdc-resource-viewer-right-content-section" > + <table class="w-sdc-resource-viewer-right-table" data-ng-show="hasItems(component.requirements)"> + <thead class="w-sdc-resource-viewer-right-table-head"> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-1">Type</th> + </thead> + <tbody> + <tr data-ng-repeat="(key, value) in component.requirements"> + <td>{{value[0].name}}</td> + </tr> + </tbody> + </table> + </div> + + + <h4 class="w-sdc-resource-viewer-right-title">Deployment Artifacts</h4> + + <div class="sdc-information-container w-sdc-resource-viewer-right-content-section" > + <table class="w-sdc-resource-viewer-right-table" data-ng-show="hasItems(component.deploymentArtifacts)"> + <thead class="w-sdc-resource-viewer-right-table-head"> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Name</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">File</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">Version</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3"></th> + </thead> + <tbody> + <tr data-ng-repeat="(artifactLogicName, artifact) in component.deploymentArtifacts"> + <td><span class="ellipsis-cols2" data-tests-id="{{artifact.artifactDisplayName}}" tooltips tooltip-content="{{artifact.artifactDisplayName}}">{{artifact.artifactDisplayName}}</span></td> + <td><span class="ellipsis-cols3" data-tests-id="{{artifact.artifactName}}" tooltips tooltip-content="{{artifact.artifactName}}">{{artifact.artifactName}}</span></td> + <td><span class="ellipsis-cols3" data-tests-id="{{artifact.artifactVersion}}" tooltips tooltip-content="{{artifact.artifactVersion}}" data-ng-if="artifact.esId">{{artifact.artifactVersion}}</span></td> + <td class="cols-3"> + <download-artifact class="sdc-information-artifacts-icon download" data-ng-if="artifact.artifactName" component="component" artifact="artifact"></download-artifact> + <!--span class="sdc-information-artifacts-icon preview"></span--> + </td> + </tr> + </tbody> + </table> + </div> + + <h4 class="w-sdc-resource-viewer-right-title">Information Artifacts</h4> + <div class="sdc-information-container w-sdc-resource-viewer-right-content-section" > + <table class="w-sdc-resource-viewer-right-table" data-ng-show="hasItems(component.artifacts)"> + <thead class="w-sdc-resource-viewer-right-table-head"> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Name</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">File</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">Version</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3"></th> + </thead> + <tbody> + <tr data-ng-repeat="(artifactLogicName, artifact) in component.artifacts"> + <td><span class="ellipsis-cols2" data-tests-id="{{artifact.artifactDisplayName}}" tooltips tooltip-content="{{artifact.artifactDisplayName}}">{{artifact.artifactDisplayName}}</span></td> + <td><span class="ellipsis-cols3" data-tests-id="{{artifact.artifactName}}" tooltips tooltip-content="{{artifact.artifactName}}">{{artifact.artifactName}}</span></td> + <td><span class="ellipsis-cols3" data-tests-id="{{artifact.artifactVersion}}" tooltips tooltip-content="{{artifact.artifactVersion}}" data-ng-if="artifact.esId">{{artifact.artifactVersion}}</span></td> + <td class="cols-3"> + <download-artifact class="sdc-information-artifacts-icon download" data-ng-if="artifact.artifactName" component="component" artifact="artifact"></download-artifact> + <!--span class="sdc-information-artifacts-icon preview"></span--> + </td> + </tr> + </tbody> + </table> + </div> +</div> diff --git a/catalog-ui/app/scripts/view-models/component-viewer/properties/service-properties-view.html b/catalog-ui/app/scripts/view-models/component-viewer/properties/service-properties-view.html new file mode 100644 index 0000000000..01f872c13c --- /dev/null +++ b/catalog-ui/app/scripts/view-models/component-viewer/properties/service-properties-view.html @@ -0,0 +1,167 @@ +<div class="w-sdc-component-viewer-right-properties"> + + <h4 class="w-sdc-resource-viewer-right-title">General Information</h4> + <div class="w-sdc-resource-viewer-right-content-section"> + <div class='sdc-resource-viewer-sidebar-section-content-column-1'> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_TYPE"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" translate="GENERAL_LABEL_SERVICE"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_VERSION"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.version"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CATEGORY"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" tooltips tooltip-content="{{component.categories[0].name}}" data-ng-bind="component.categories[0].name"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CREATION_DATE"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.creationDate | date: 'MM/dd/yyyy'"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_AUTHOR"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.creatorFullName"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CONTACT_ID"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.contactId"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_PROJECT_CODE"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.projectCode"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label">Life Cycle Status:</span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value"> {{sdcMenu.LifeCycleStatuses[component.lifecycleState].text}}</span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label">Distribution Status:</span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value">{{sdcMenu.DistributionStatuses[component.distributionStatus].text}}</span> + </div> + + <div class="sdc-resource-viewer-sidebar-section-content-item"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label">System Name:</span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" tooltips tooltip-content="{{component.systemName}}" data-ng-bind="component.systemName"></span> + </div> + </div> + <div class='sdc-resource-viewer-sidebar-section-content-column-2'> + <div class="sdc-resource-viewer-sidebar-section-content-item description"> + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_DESCRIPTION"></span> + <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.description"></span> + </div> + <div class="sdc-resource-viewer-sidebar-section-content-item" > + <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_TAGS"></span> + <span tooltips tooltip-content="{{component.tags.join(', ')}}" class="sdc-resource-viewer-sidebar-section-content-tags" data-ng-repeat="(tag, tagName) in component.tags">{{tagName}}{{$last ? '' : ','}}</span> + </div> + </div> + </div> + <h4 class="w-sdc-resource-viewer-right-title">Additional Information</h4> + + <div class="sdc-properties-container w-sdc-resource-viewer-right-content-section"> + <table class="w-sdc-resource-viewer-right-table" data-ng-show="additionalInformations.length"> + <thead class="w-sdc-resource-viewer-right-table-head"> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Key</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Value</th> + </thead> + <tbody> + <tr data-ng-repeat="additionalInformation in additionalInformations"> + <td><span class="ellipsis-cols2" tooltips tooltip-content="{{additionalInformation.key}}">{{additionalInformation.key}}</span></td> + <td><span class="ellipsis-cols2" tooltips tooltip-content="{{additionalInformation.value}}">{{additionalInformation.value}}</span></td> + </tr> + </tbody> + </table> + </div> + + <h4 class="w-sdc-resource-viewer-right-title">Inputs</h4> + + <div class="sdc-properties-container w-sdc-resource-viewer-right-content-section"> + <table class="w-sdc-resource-viewer-right-table" data-ng-show="inputs.length"> + <thead class="w-sdc-resource-viewer-right-table-head"> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Name</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">Type (Constraints)</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">Default Value</th> + </thead> + <tbody> + <tr data-ng-repeat="input in inputs"> + <td><span class="ellipsis-cols2" data-tests-id="{{input.name}}" tooltips tooltip-content="{{input.name}}">{{input.name}}</span></td> + <td>{{input.type}}</td> + <td><span class="ellipsis-cols3" data-tests-id="{{input.value}}" tooltips tooltip-content="{{input.value}}">{{input.value}}</span></td> + </tr> + </tbody> + </table> + </div> + + <h4 class="w-sdc-resource-viewer-right-title">API Artifacts</h4> + + <div class="sdc-requirements-container w-sdc-resource-viewer-right-content-section"> + <table class="w-sdc-resource-viewer-right-table" data-ng-show="hasItems(component.serviceApiArtifacts)"> + <thead class="w-sdc-resource-viewer-right-table-head"> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Name</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">File</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">Version</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3"></th> + </thead> + <tbody> + <tr data-ng-repeat="(artifactLogicName, artifact) in component.serviceApiArtifacts"> + <td><span class="ellipsis-cols2" data-tests-id="{{artifact.artifactDisplayName}}" tooltips tooltip-content="{{artifact.artifactDisplayName}}">{{artifact.artifactDisplayName}}</span></td> + <td><span class="ellipsis-cols3" data-tests-id="{{artifact.artifactName}}" tooltips tooltip-content="{{artifact.artifactName}}">{{artifact.artifactName}}</span></td> + <td><span class="ellipsis-cols3" data-tests-id="{{artifact.artifactVersion}}" tooltips tooltip-content="{{artifact.artifactVersion}}" data-ng-if="artifact.esId">{{artifact.artifactVersion}}</span></td> + <td class="cols-3"> + <download-artifact class="sdc-information-artifacts-icon download" data-ng-if="artifact.artifactName" component="component" artifact="artifact"></download-artifact> + <!--span class="sdc-information-artifacts-icon preview"></span--> + </td> + </tr> + </tbody> + </table> + </div> + + <h4 class="w-sdc-resource-viewer-right-title">Deployment Artifacts</h4> + + <div class="sdc-information-container w-sdc-resource-viewer-right-content-section"> + <table class="w-sdc-resource-viewer-right-table" data-ng-show="hasItems(component.deploymentArtifacts)"> + <thead class="w-sdc-resource-viewer-right-table-head"> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Name</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">File</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">Version</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3"></th> + </thead> + <tbody> + <tr data-ng-repeat="(artifactLogicName, artifact) in component.deploymentArtifacts"> + <td><span class="ellipsis-cols2" data-tests-id="{{artifact.artifactDisplayName}}" tooltips tooltip-content="{{artifact.artifactDisplayName}}">{{artifact.artifactDisplayName}}</span></td> + <td><span class="ellipsis-cols3" data-tests-id="{{artifact.artifactName}}" tooltips tooltip-content="{{artifact.artifactName}}">{{artifact.artifactName}}</span></td> + <td><span class="ellipsis-cols3" data-tests-id="{{artifact.artifactVersion}}" tooltips tooltip-content="{{artifact.artifactVersion}}" data-ng-if="artifact.esId">{{artifact.artifactVersion}}</span></td> + <td class="cols-3"> + <download-artifact class="sdc-information-artifacts-icon download" data-ng-if="artifact.artifactName" component="component" artifact="artifact"></download-artifact> + <!--span class="sdc-information-artifacts-icon preview"></span--> + </td> + </tr> + </tbody> + </table> + </div> + + + <h4 class="w-sdc-resource-viewer-right-title">Information Artifacts</h4> + + <div class="sdc-information-container w-sdc-resource-viewer-right-content-section"> + <table class="w-sdc-resource-viewer-right-table" data-ng-show="hasItems(component.artifacts)"> + <thead class="w-sdc-resource-viewer-right-table-head"> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Name</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">File</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3">Version</th> + <th class="w-sdc-resource-viewer-right-table-head-cell cols-3"></th> + </thead> + <tbody> + <tr data-ng-repeat="(artifactLogicName, artifact) in component.artifacts"> + <td><span class="ellipsis-cols2" data-tests-id="{{artifact.artifactDisplayName}}" tooltips tooltip-content="{{artifact.artifactDisplayName}}">{{artifact.artifactDisplayName}}</span></td> + <td><span class="ellipsis-cols3" data-tests-id="{{artifact.artifactName}}" tooltips tooltip-content="{{artifact.artifactName}}">{{artifact.artifactName}}</span></td> + <td><span class="ellipsis-cols3" data-tests-id="{{artifact.artifactVersion}}" tooltips tooltip-content="{{artifact.artifactVersion}}" data-ng-if="artifact.esId">{{artifact.artifactVersion}}</span></td> + <td class="cols-3"> + <download-artifact class="sdc-information-artifacts-icon download" data-ng-if="artifact.artifactName" component="component" artifact="artifact"></download-artifact> + <!--span class="sdc-information-artifacts-icon preview"></span--> + </td> + </tr> + </tbody> + </table> + </div> +</div> |