diff options
Diffstat (limited to 'catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html')
| -rw-r--r-- | catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html | 205 |
1 files changed, 205 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html new file mode 100644 index 0000000000..bf15a70322 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html @@ -0,0 +1,205 @@ +<div class="workspace-inputs"> + <div class="table-container-flex"> + <div class="w-sdc-inputs-search pull-left hideme"> + <input type="text" class="w-sdc-inputs-search-input" placeholder="Search"/> + <div class="search-icon-container"> + <span class="w-sdc-search-icon inputs-search-icon magnification-white"></span> + </div> + </div> + <div class="table"> + <div class="table-header">Resource instance inputs</div> + <div class="body"> + <div class="table-loader" ng-class="{'tlv-loader large loader': isLoading}"></div> + <perfect-scrollbar scroll-y-margin-offset="0" class="scrollbar-container"> + + <expand-collapse expanded-selector=".vf-instance-list.{{$index}}" + class="expand-collapse-table-row" + load-data-function="loadInstanceInputs(instance)" + is-close-on-init="true" + data-ng-repeat-start="instance in vfInstancesList track by $index"> + <div class="flex-container data-row"> + <div class="expand-collapse-inputs-table-icon"></div> + <div class="table-col-general flex-item text" data-tests-id="inputs-vf-instance-{{$index}}"> + <span class="title-text">{{instance.name}}</span> + </div> + </div> + + </expand-collapse> + + <div data-ng-repeat-end="" class="vf-instance-list {{$index}}"> + + <expand-collapse expanded-selector=".input-list.{{$parent.$index}}-{{$index}}" + class="expand-collapse-table-row" + load-data-function="loadInputPropertiesForInstance(instance.uniqueId, input)" + is-close-on-init="true" + data-ng-repeat-start="input in instance.inputs track by $index"> + <div class="input-row" ng-class="{'selected': selectedInput.uniqueId === input.uniqueId}"> + <div class="title-text">{{input.name}}</div> + <div class="flex-container"> + <div class="expand-collapse-inputs-table-icon"></div> + <div class="flex-item"> + + <div> + <span class="title-text">Description:</span> + <span tooltips tooltip-content="{{input.description}}">{{input.description}}</span> + </div> + </div> + <div class="flex-item "> + <div class="text"> + <span class="title-text">VF Instance:</span> + <span tooltips tooltip-content="{{instance.name}}">{{instance.name}}</span> + </div> + <div class="text"> + <span class="title-text">Type:</span> + <span tooltips tooltip-content="{{input.type}}">{{input.type}} </span> + </div> + </div> + <sdc-checkbox + class="input-check-box" + disabled ="input.isAlreadySelected || isViewMode()" + sdc-checklist-model="instanceInputsMap[instance.uniqueId]" + sdc-checklist-value="input" + data-tests-id="inputs-checkbox-{{$index}}" + data-ng-click=" $event.stopPropagation()"></sdc-checkbox> + </div> + </div> + + + </expand-collapse> + + <div data-ng-repeat-end="" class="input-list {{$parent.$index}}-{{$index}}"> + <div class="empty-row" ng-if="input.properties.length===0">No properties to display</div> + + <div ng-repeat="property in input.properties track by $index"> + <div class="property-row flex-container"> + <div class="flex-item text property-name-container"> + <span class="title-blue-text property-name-text" tooltips tooltip-content="{{property.name}}">{{property.name}}</span> + <span class="text instance-name-text" tooltips tooltip-content="{{property.name}}">{{property.name}}</span> + </div> + <div class="type-schema-container"> + <div class="text"> + <span tooltips tooltip-content="{{property.type}}">{{property.type}}</span> + </div> + </div> + <div class="type-schema-container"> + <div class="text"> + <span tooltips tooltip-content="{{property.schema.property.type}}">{{property.schema.property.type}} </span> + </div> + </div> + </div> + </div> + </div> + </div> + </perfect-scrollbar> + </div> + </div> + </div> + + <div class="inputs-button-container pull-left"> + <div ng-click="onArrowPressed()" class="right-arrow-btn" data-tests-id="add-inputs-to-service-button"></div> + </div> + + <div class="table-container-flex"> + <div class="w-sdc-inputs-search pull-left"> + <input type="text" class="w-sdc-inputs-search-input" data-ng-model="search.filterTerm" placeholder="Search" data-ng-model-options="{debounce: 200}"/> + <div class="search-icon-container"> + <span class="w-sdc-search-icon inputs-search-icon magnification-white"></span> + </div> + </div> + <div class="table"> + <div class="body"> + <div class="table-header">Service Inputs</div> + <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> + <expand-collapse expanded-selector=".service-inputs.{{$index}}" + class="expand-collapse-table-row" + load-data-function="loadInputInputs(serviceInput)" + is-close-on-init="true" + data-ng-repeat-start="serviceInput in component.inputs | filter:search track by $index "> + <div class="input-row service-input-row " data-tests-id="service-input-{{$index}}" ng-class="serviceInput.isNew ? 'new-input': ''"> + <div class="title-text">{{serviceInput.name}}</div> + <div class="flex-container"> + <div class="expand-collapse-inputs-table-icon"></div> + <div class="flex-item"> + <div> + <span class="title-text">Description:</span> + <span tooltips tooltip-content="{{serviceInput.description}}">{{serviceInput.description}}</span> + </div> + </div> + <div class="flex-item "> + <div class="text"> + <span class="title-text">VF Instance:</span> + <span tooltips tooltip-content="{{serviceInput.name}}">{{serviceInput.name}}</span> + </div> + <div class="text"> + <span class="title-text">Type:</span> + <span tooltips tooltip-content="{{serviceInput.type}}">{{serviceInput.type}} </span> + </div> + </div> + <div class="delete"> + <span class="sprite-new delete-icon remove-input-icon" + data-ng-class="{'disabled': isViewMode()}" + data-ng-click="deleteInput(serviceInput); $event.stopPropagation();" + data-tests-id="delete-input-{{$index}}"></span> + </div> + </div> + </div> + </expand-collapse> + + <div data-ng-repeat-end="" class="service-inputs {{$index}}"> + <expand-collapse expanded-selector=".input-inputs-list.{{$parent.$index}}-{{$index}}" + class="expand-collapse-table-row" + load-data-function="loadInputPropertiesForInstance(input.componentInstanceId, input)" + is-close-on-init="true" + data-ng-repeat-start="input in serviceInput.inputs track by $index"> + <div class="input-row"> + <div class="title-text">{{input.name}}</div> + <div class="flex-container"> + <div class="expand-collapse-inputs-table-icon"></div> + <div class="flex-item"> + <div> + <span class="title-text">Description:</span> + <span tooltips tooltip-content="{{input.description}}">{{input.description}}</span> + </div> + </div> + <div class="flex-item "> + <div class="text"> + <span class="title-text">VF Instance:</span> + <span tooltips tooltip-content="{{instance.componentInstanceName}}">{{instance.componentInstanceName}}</span> + </div> + <div class="text"> + <span class="title-text">Type:</span> + <span tooltips tooltip-content="{{input.type}}">{{input.type}} </span> + </div> + </div> + </div> + </div> + </expand-collapse> + + <div data-ng-repeat-end="" class="input-inputs-list {{$parent.$index}}-{{$index}}"> + <div class="empty-row" ng-if="input.properties.length===0">No properties to display</div> + <div ng-repeat="property in input.properties track by $index"> + <div class="property-row flex-container"> + <div class="flex-item text property-name-container"> + <span + class="title-blue-text property-name-text" tooltips tooltips-content="{{property.name}}">{{property.name}}</span> + <span class="text instance-name-text" tooltips tooltips-content="{{property.name}}">{{property.name}}</span> + </div> + <div class="type-schema-container"> + <div class="text"> + <span tooltips tooltips-content="{{property.type}}">{{property.type}}</span> + </div> + </div> + <div class="type-schema-container"> + <div class="text"> + <span tooltips tooltips-content="{{property.schema.property.type}}">{{property.schema.property.type}} </span> + </div> + </div> + </div> + </div> + </div> + </div> + </perfect-scrollbar> + </div> + </div> + </div> +</div> |