From 1ccd74fb7723bc41424ca93902d68d351ce55462 Mon Sep 17 00:00:00 2001 From: "andre.schmid" Date: Tue, 9 Mar 2021 18:29:48 +0000 Subject: Add Composition Page and create resource page/flow Add UI Tests Composition Page, and create resource page and flow Change-Id: I004a2e8123df669e7318eca7feb58f8b1210dd65 Issue-ID: SDC-3523, SDC-3524 Signed-off-by: andre.schmid --- .../panel/composition-panel.component.html | 3 +- .../panel/composition-panel.component.spec.ts | 151 +++++++++++++++------ .../panel/composition-panel.component.ts | 144 +++++++++++++++++--- 3 files changed, 237 insertions(+), 61 deletions(-) (limited to 'catalog-ui/src/app/ng2/pages/composition/panel') diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html index 5511dc0ea8..61e2f5e744 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html +++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html @@ -12,7 +12,8 @@ + [tooltipText]="tab.tooltipText" + [testId]="tab.testId"> { let store: Store; const tabs = { - infoTab : {titleIcon: 'info-circle', component: InfoTabComponent, input: {}, isActive: true, tooltipText: 'Information'}, - policyProperties: { - titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'policy'}, isActive: false, tooltipText: 'Properties' - }, - policyTargets: {titleIcon: 'inputs-o', component: PolicyTargetsTabComponent, input: {}, isActive: false, tooltipText: 'Targets'}, - groupMembers: {titleIcon: 'inputs-o', component: GroupMembersTabComponent, input: {}, isActive: false, tooltipText: 'Members'}, - groupProperties: { - titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'group'}, isActive: false, tooltipText: 'Properties' - }, - deploymentArtifacts: { - titleIcon: 'deployment-artifacts-o', component: ArtifactsTabComponent, - input: { type: ArtifactGroupType.DEPLOYMENT}, isActive: false, tooltipText: 'Deployment Artifacts' - }, - apiArtifacts: { - titleIcon: 'api-o', component: ArtifactsTabComponent, - input: { type: ArtifactGroupType.SERVICE_API}, isActive: false, tooltipText: 'API Artifacts' - }, - infoArtifacts: { - titleIcon: 'info-square-o', component: ArtifactsTabComponent, - input: { type: ArtifactGroupType.INFORMATION}, isActive: false, tooltipText: 'Information Artifacts' - }, - properties: { - titleIcon: 'settings-o', component: PropertiesTabComponent, - input: {title: 'Properties and Attributes'}, isActive: false, tooltipText: 'Properties' - }, - reqAndCapabilities : { - titleIcon: 'req-capabilities-o', component: ReqAndCapabilitiesTabComponent, input: {}, - isActive: false, tooltipText: 'Requirements and Capabilities' - }, - substitutionFilter: { - titleIcon: 'composition-o', component: SubstitutionFilterTabComponent, input: {title: 'SUBSTITUTION FILTER'}, - isActive: false, tooltipText: 'Substitution Filter' - }, - inputs: {titleIcon: 'inputs-o', component: PropertiesTabComponent, input: {title: 'Inputs'}, isActive: false, tooltipText: 'Inputs'}, - settings: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {}, isActive: false, tooltipText: 'Settings'}, - interfaceOperations: { - titleIcon: 'composition-o', - component: InterfaceOperationsComponent, - input: {title: 'Interface Operations'}, - isActive: false, - tooltipText: 'Interface Operations' - } - }; + infoTab: { + titleIcon: 'info-circle', + component: InfoTabComponent, + input: {}, + isActive: true, + tooltipText: 'Information', + testId: 'detail-tab-information' + }, + policyProperties: { + titleIcon: 'settings-o', + component: GroupOrPolicyPropertiesTab, + input: {type: 'policy'}, + isActive: false, + tooltipText: 'Properties', + testId: 'detail-tab-policy-properties' + }, + policyTargets: { + titleIcon: 'inputs-o', + component: PolicyTargetsTabComponent, + input: {}, + isActive: false, + tooltipText: 'Targets', + testId: 'detail-tab-policy-targets' + }, + groupMembers: { + titleIcon: 'inputs-o', + component: GroupMembersTabComponent, + input: {}, + isActive: false, + tooltipText: 'Members', + testId: 'detail-tab-group-members' + }, + groupProperties: { + titleIcon: 'settings-o', + component: GroupOrPolicyPropertiesTab, + input: {type: 'group'}, + isActive: false, + tooltipText: 'Properties', + testId: 'detail-tab-group-properties' + }, + deploymentArtifacts: { + titleIcon: 'deployment-artifacts-o', + component: ArtifactsTabComponent, + input: {type: ArtifactGroupType.DEPLOYMENT}, + isActive: false, + tooltipText: 'Deployment Artifacts', + testId: 'detail-tab-deployment-artifacts' + }, + apiArtifacts: { + titleIcon: 'api-o', + component: ArtifactsTabComponent, + input: {type: ArtifactGroupType.SERVICE_API}, + isActive: false, + tooltipText: 'API Artifacts', + testId: 'detail-tab-api-artifacts' + }, + infoArtifacts: { + titleIcon: 'info-square-o', + component: ArtifactsTabComponent, + input: {type: ArtifactGroupType.INFORMATION}, + isActive: false, + tooltipText: 'Information Artifacts', + testId: 'detail-tab-information-artifacts' + }, + properties: { + titleIcon: 'settings-o', component: PropertiesTabComponent, + input: {title: 'Properties and Attributes'}, isActive: false, tooltipText: 'Properties', + testId: 'detail-tab-properties-attributes' + }, + reqAndCapabilities: { + titleIcon: 'req-capabilities-o', component: ReqAndCapabilitiesTabComponent, input: {}, + isActive: false, tooltipText: 'Requirements and Capabilities', + testId: 'detail-tab-requirements-capabilities' + }, + substitutionFilter: { + titleIcon: 'composition-o', + component: SubstitutionFilterTabComponent, + input: {title: 'SUBSTITUTION FILTER'}, + isActive: false, + tooltipText: 'Substitution Filter', + testId: 'detail-tab-substitution-filter' + }, + inputs: { + titleIcon: 'inputs-o', + component: PropertiesTabComponent, + input: {title: 'Inputs'}, + isActive: false, + tooltipText: 'Inputs', + testId: 'detail-tab-inputs' + }, + settings: { + titleIcon: 'settings-o', + component: PropertiesTabComponent, + input: {}, + isActive: false, + tooltipText: 'Settings', + testId: 'detail-tab-settings' + }, + interfaceOperations: { + titleIcon: 'composition-o', + component: InterfaceOperationsComponent, + input: {title: 'Interface Operations'}, + isActive: false, + tooltipText: 'Interface Operations', + testId: 'detail-tab-interface-operations' + } + }; beforeEach( async(() => { @@ -95,7 +159,6 @@ describe('composition-panel component', () => { const testInstance = new PolicyInstance(); fixture.componentInstance.initTabs(testInstance); - expect (fixture.componentInstance.tabs.length).toBe(3); expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab); expect (fixture.componentInstance.tabs[1]).toEqual(tabs.policyTargets); diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts index 2ef4e7c9a9..6ed73b3384 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts @@ -42,22 +42,134 @@ import {SubstitutionFilterTabComponent} from "./panel-tabs/substitution-filter-t import {InterfaceOperationsComponent} from "../interface-operatons/interface-operations.component"; const tabs = { - infoTab : {titleIcon: 'info-circle', component: InfoTabComponent, input: {}, isActive: true, tooltipText: 'Information'}, - policyProperties: {titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'policy'}, isActive: false, tooltipText: 'Properties'}, - policyTargets: {titleIcon: 'inputs-o', component: PolicyTargetsTabComponent, input: {}, isActive: false, tooltipText: 'Targets'}, - groupMembers: {titleIcon: 'inputs-o', component: GroupMembersTabComponent, input: {}, isActive: false, tooltipText: 'Members'}, - groupProperties: {titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'group'}, isActive: false, tooltipText: 'Properties'}, - deploymentArtifacts: {titleIcon: 'deployment-artifacts-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.DEPLOYMENT}, isActive: false, tooltipText: 'Deployment Artifacts'}, - apiArtifacts: {titleIcon: 'api-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.SERVICE_API}, isActive: false, tooltipText: 'API Artifacts'}, - infoArtifacts: {titleIcon: 'info-square-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.INFORMATION}, isActive: false, tooltipText: 'Information Artifacts'}, - properties: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {title: 'Properties and Attributes'}, isActive: false, tooltipText: 'Properties'}, - reqAndCapabilities : { titleIcon: 'req-capabilities-o', component: ReqAndCapabilitiesTabComponent, input: {}, isActive: false, tooltipText: 'Requirements and Capabilities'}, - inputs: {titleIcon: 'inputs-o', component: PropertiesTabComponent, input: {title: 'Inputs'}, isActive: false, tooltipText: 'Inputs'}, - settings: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {}, isActive: false, tooltipText: 'Settings'}, - consumption: {titleIcon: 'api-o', component: ServiceConsumptionTabComponent, input: {title: 'OPERATION CONSUMPTION'}, isActive: false, tooltipText: 'Service Consumption'}, - dependencies: {titleIcon: 'archive', component: ServiceDependenciesTabComponent, input: {title: 'DIRECTIVES AND NODE FILTER'}, isActive: false, tooltipText: 'Service Dependencies'}, - substitutionFilter: {titleIcon: 'composition-o', component: SubstitutionFilterTabComponent, input: {title: 'SUBSTITUTION FILTER'}, isActive: false, tooltipText: 'Substitution Filter'}, - interfaceOperations: {titleIcon: 'composition-o', component: InterfaceOperationsComponent, input: {title: 'Interface Operations'}, isActive: false, tooltipText: 'Interface Operations'} + infoTab: { + titleIcon: 'info-circle', + component: InfoTabComponent, + input: {}, + isActive: true, + tooltipText: 'Information', + testId: 'detail-tab-information' + }, + policyProperties: { + titleIcon: 'settings-o', + component: GroupOrPolicyPropertiesTab, + input: {type: 'policy'}, + isActive: false, + tooltipText: 'Properties', + testId: 'detail-tab-policy-properties' + }, + policyTargets: { + titleIcon: 'inputs-o', + component: PolicyTargetsTabComponent, + input: {}, + isActive: false, + tooltipText: 'Targets', + testId: 'detail-tab-policy-targets' + }, + groupMembers: { + titleIcon: 'inputs-o', + component: GroupMembersTabComponent, + input: {}, + isActive: false, + tooltipText: 'Members', + testId: 'detail-tab-group-members' + }, + groupProperties: { + titleIcon: 'settings-o', + component: GroupOrPolicyPropertiesTab, + input: {type: 'group'}, + isActive: false, + tooltipText: 'Properties', + testId: 'detail-tab-group-properties' + }, + deploymentArtifacts: { + titleIcon: 'deployment-artifacts-o', + component: ArtifactsTabComponent, + input: {type: ArtifactGroupType.DEPLOYMENT}, + isActive: false, + tooltipText: 'Deployment Artifacts', + testId: 'detail-tab-deployment-artifacts' + }, + apiArtifacts: { + titleIcon: 'api-o', + component: ArtifactsTabComponent, + input: {type: ArtifactGroupType.SERVICE_API}, + isActive: false, + tooltipText: 'API Artifacts', + testId: 'detail-tab-api-artifacts' + }, + infoArtifacts: { + titleIcon: 'info-square-o', + component: ArtifactsTabComponent, + input: {type: ArtifactGroupType.INFORMATION}, + isActive: false, + tooltipText: 'Information Artifacts', + testId: 'detail-tab-information-artifacts' + }, + properties: { + titleIcon: 'settings-o', + component: PropertiesTabComponent, + input: {title: 'Properties and Attributes'}, + isActive: false, + tooltipText: 'Properties', + testId: 'detail-tab-properties-attributes' + }, + reqAndCapabilities: { + titleIcon: 'req-capabilities-o', + component: ReqAndCapabilitiesTabComponent, + input: {}, + isActive: false, + tooltipText: 'Requirements and Capabilities', + testId: 'detail-tab-requirements-capabilities' + }, + inputs: { + titleIcon: 'inputs-o', + component: PropertiesTabComponent, + input: {title: 'Inputs'}, + isActive: false, + tooltipText: 'Inputs', + testId: 'detail-tab-inputs' + }, + settings: { + titleIcon: 'settings-o', + component: PropertiesTabComponent, + input: {}, + isActive: false, + tooltipText: 'Settings', + testId: 'detail-tab-settings' + }, + consumption: { + titleIcon: 'api-o', + component: ServiceConsumptionTabComponent, + input: {title: 'OPERATION CONSUMPTION'}, + isActive: false, + tooltipText: 'Service Consumption', + testId: 'detail-tab-operation-consumption' + }, + dependencies: { + titleIcon: 'archive', + component: ServiceDependenciesTabComponent, + input: {title: 'DIRECTIVES AND NODE FILTER'}, + isActive: false, + tooltipText: 'Service Dependencies', + testId: 'detail-tab-directives-node-filter' + }, + substitutionFilter: { + titleIcon: 'composition-o', + component: SubstitutionFilterTabComponent, + input: {title: 'SUBSTITUTION FILTER'}, + isActive: false, + tooltipText: 'Substitution Filter', + testId: 'detail-tab-substitution-filter' + }, + interfaceOperations: { + titleIcon: 'composition-o', + component: InterfaceOperationsComponent, + input: {title: 'Interface Operations'}, + isActive: false, + tooltipText: 'Interface Operations', + testId: 'detail-tab-interface-operations' + } }; @Component({ -- cgit 1.2.3-korg