Skip to content

Commit

Permalink
Add patternfly list-view-pf-main-info and list-view-pf-actions classes
Browse files Browse the repository at this point in the history
pf-list-view has provisions for both menu (kebab) and action buttons, opting for our proven in place solution for fear the pf implementation will be a regression in terms of customizability

These two classes create an experience identical to the component options without sacraficing functioning in place code
AllenBW committed Oct 27, 2017
1 parent f7be84f commit 7f8b47b
Showing 1 changed file with 372 additions and 371 deletions.
743 changes: 372 additions & 371 deletions client/app/services/service-details/service-details.html
Original file line number Diff line number Diff line change
@@ -9,388 +9,389 @@
</span>
</div>
<pf-toolbar class="section-toolbar section-toolbar-right-actions" config="vm.headerConfig"
ng-if="!vm.loading && vm.viewType === 'detailsView'">
<actions>
<div class="ss-details-header__actions">
<div uib-dropdown class="ss-details-header__actions__inner dropdown-kebab-pf">
<custom-button ng-if="vm.hasCustomButtons(vm.service)"
service-id="vm.service.id"
custom-actions="vm.service.custom_actions">
</custom-button>
<custom-dropdown class="custom-dropdown pull-left"
config="item"
items="vm.selectedItemsList"
items-count="vm.selectedItemsListCount"
ng-repeat="item in vm.listActions"
on-update="vm.listActionDisable($config, $changes)"
menu-right="true">
</custom-dropdown>
</div>
</div>
</actions>
ng-if="!vm.loading">
<actions>
<div class="ss-details-header__actions">
<div uib-dropdown class="ss-details-header__actions__inner dropdown-kebab-pf">
<custom-button ng-if="vm.hasCustomButtons(vm.service)"
service-id="vm.service.id"
custom-actions="vm.service.custom_actions">
</custom-button>
<custom-dropdown class="custom-dropdown pull-left"
config="item"
items="vm.selectedItemsList"
items-count="vm.selectedItemsListCount"
ng-repeat="item in vm.listActions"
on-update="vm.listActionDisable($config, $changes)"
menu-right="true">
</custom-dropdown>
</div>
</div>
</actions>
</pf-toolbar>
<loading status="vm.loading"></loading>
<div ng-if="!vm.loading" class="ss-details-wrapper">
<div class="panel panel-default ss-details-panel">
<div class="panel-body">
<section>
<h2 translate>Properties</h2>
</section>
<section class="ss-form-readonly">
<div class="col-md-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" translate>Name</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.service.name}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" translate>Description</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.service.description}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" translate>GUID</label>
<div class="col-sm-6">
<input class="form-control" readonly value="{{vm.service.guid}}"/>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-4" translate>Service Id</label>
<div class="panel panel-default ss-details-panel">
<div class="panel-body">
<section>
<h2 translate>Properties</h2>
</section>
<section class="ss-form-readonly">
<div class="col-md-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" translate>Name</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.service.name}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" translate>Description</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.service.description}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" translate>GUID</label>
<div class="col-sm-6">
<input class="form-control" readonly value="{{vm.service.guid}}"/>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-4" translate>Service Id</label>

<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.service.id}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Owner</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.service.evm_owner.name}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Monthly Cost</label>
<div class="col-sm-8">
<input class="form-control" readonly
value="${{vm.service.chargeback.used_cost_sum | number:3}}"/>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-4" translate>Created On</label>
<div class="col-sm-8">
<input class="form-control" readonly
value="{{vm.service.created_at | date:'medium'}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Retirement State</label>
<div class="col-sm-8">
<input class="form-control" readonly
value="{{vm.service.retirement_state || ('Unknown' | translate)}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Retires On</label>
<div class="col-sm-8">
<input ng-if="vm.service.retires_on" class="form-control" readonly
value="{{vm.service.retires_on | date}}"/>
<input ng-if="!vm.service.retires_on" class="form-control" readonly
value="Never"/>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" translate>Tags</label>
<div class="col-sm-10">
<div class="service-details-tag-control">
<tagging-widget tags-of-item="vm.availableTags"
read-only="true"></tagging-widget>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.service.id}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Owner</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.service.evm_owner.name}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Monthly Cost</label>
<div class="col-sm-8">
<input class="form-control" readonly
value="${{vm.service.chargeback.used_cost_sum | number:3}}"/>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-4" translate>Created On</label>
<div class="col-sm-8">
<input class="form-control" readonly
value="{{vm.service.created_at | date:'medium'}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Retirement State</label>
<div class="col-sm-8">
<input class="form-control" readonly
value="{{vm.service.retirement_state || ('Unknown' | translate)}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Retires On</label>
<div class="col-sm-8">
<input ng-if="vm.service.retires_on" class="form-control" readonly
value="{{vm.service.retires_on | date}}"/>
<input ng-if="!vm.service.retires_on" class="form-control" readonly
value="Never"/>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" translate>Tags</label>
<div class="col-sm-10">
<div class="service-details-tag-control">
<tagging-widget tags-of-item="vm.availableTags"
read-only="true"></tagging-widget>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
</div>
<div ng-if="vm.service.vms.length"
class="panel panel-default ss-details-panel">
<div class="panel-body">
<section>
<h2 translate>Resources</h2>
<ul class="list-group service-details-resources">
<li class="list-group-item service-details-resource-group-item">
<a class="service-details-resource-group-title"
ng-class="{'collapsed': !vm.computeGroup.open}"
ng-click="vm.toggleOpenResourceGroup(vm.computeGroup)">
{{vm.computeGroup.title}} ({{vm.computeGroup.resources.length}})
</a>
<div class="service-details-resource-list-container"
ng-class="{'collapse': !vm.computeGroup.open}">
<div ng-if="vm.computeGroup.resources.length < 1">
<span class="service-details-resource-empty-message">
{{vm.computeGroup.emptyMessage}}
</span>
</div>
<pf-list-view ng-if="vm.computeGroup.resources.length > 0"
config="vm.resourceListConfig"
items="vm.computeGroup.resources"
menu-actions="vm.resourceMenuActions"
update-menu-action-for-item-fn="vm.updateResourceMenuActionForItemFn"
custom-scope="vm">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-3 col-xs-5 name-column">
<span class="no-wrap">
<i ng-if="item.retired"
class="fa fa-clock-o"
uib-tooltip="{{'Retired resource'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
<span ng-if="!item.retired">
<i class="pficon fa fa-power-off" ng-if="item.power_state === 'off'"
uib-tooltip="{{'Power State: Off'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
<i class="pficon pficon-ok" ng-if="item.power_state === 'on'"
uib-tooltip="{{'Power State: On'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
<i class="pficon fa fa-question-circle"
ng-if="item.power_state !== 'on' && item.power_state !== 'off'"
uib-tooltip="{{'Power State: Unknown'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
</span>
<a uib-tooltip="{{item.name}}"
tooltip-placement="bottom"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
ng-click="$ctrl.customScope.gotoComputeResource(item)"
href="#">
<i class="pficon pficon-screen"></i>
<span>
{{ item.name }}
</span>
</a>
</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 hidden-xs">
<div>
<span class="no-wrap">
<i class="fa fa-camera"></i>&nbsp;
<span uib-tooltip="{{'Total Snapshots' | translate}} : {{item.v_total_snapshots}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom">
{{item.v_total_snapshots}}
</span>
</span>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-5">
<div>
<span class="no-wrap">
<strong translate>Latest</strong>&nbsp;
<span ng-if="item.v_snapshot_newest_name">
<span
uib-tooltip="{{'Latest Snapshot Name' | translate}} : {{item.v_snapshot_newest_name}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom">
<a ui-sref="vms.snapshots({vmId: item.id})"> {{item.v_snapshot_newest_name}}</a>
</span>
-
<span
uib-tooltip="{{'Latest Snapshot Timestamp' | translate}} : {{item.v_snapshot_newest_timestamp| date:'medium'}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom">
{{item.v_snapshot_newest_timestamp | date:'short'}}
</span>
</span>
<i class="pficon fa fa-question-circle"
ng-if="!item.v_snapshot_newest_name"
uib-tooltip="{{'Latest Snapshot: Unknown'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
</span>
</div>
</div>
<div class="col-lg-3 hidden-md hidden-sm hidden-xs">
<div>
<span class="no-wrap">
<strong translate>Last Boot</strong>&nbsp;
<span ng-if="item.boot_time"
uib-tooltip="{{'Latest Boot Time' | translate}} : {{item.boot_time | date : 'MMM dd, yyyy H:mm:ss'}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom">
{{item.boot_time | date : 'MMM dd, yyyy H:mm:ss'}}
</span>
<i class="pficon fa fa-question-circle"
ng-if="!item.boot_time"
uib-tooltip="{{'Boot Time: Unknown'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
</span>
</div>
</div>
<div ng-if="!item.retired " class="list-view-pf-actions">
<div class="btn-group dropdown-kebab-pf" uib-dropdown dropdown-append-to-body
ng-if="$ctrl.customScope.permissions.vm_snapshot_add || $ctrl.customScope.permissions.viewSnapshots">
<button type="button" class="btn btn-default" uib-dropdown-toggle
type="button">
<i class="fa fa-camera"></i>
<span translate>Snapshots</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu"
aria-labelledby="btn-append-to-to-body">
<li role="menuitem" ng-if="$ctrl.customScope.permissions.viewSnapshots">
<a ui-sref="vms.snapshots({vmId: item.id})" translate>View</a>
</li>
<li role="menuitem" ng-if="$ctrl.customScope.permissions.vm_snapshot_add">
<a ng-click="$ctrl.customScope.processSnapshot(item)" translate>Create</a>
</li>
</ul>
</div>
<div class="btn-group dropdown-kebab-pf" uib-dropdown dropdown-append-to-body
ng-if="$ctrl.customScope.permissions.cockpit || $ctrl.customScope.permissions.console">
<button type="button" class="btn btn-default" uib-dropdown-toggle
type="button">
<i class="fa fa-window-maximize "></i>
<span translate>Access</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu"
aria-labelledby="btn-append-to-to-body">
<li role="menuitem"
ng-class="{'disabled': !item['supports_console?'] || item.power_state !== 'on' || !$ctrl.customScope.permissions.console}"
ng-click="$ctrl.customScope.openConsole(item)">
<a href="#" translate>VM Console</a>
</li>
<li role="menuitem"
ng-class="{'disabled': !item['supports_cockpit?'] || item.power_state !== 'on' || !$ctrl.customScope.permissions.cockpit}"
ng-click="$ctrl.customScope.openCockpit(item)">
<a href="#" translate>Web Console</a>
</li>
</ul>
<div ng-if="vm.service.vms.length"
class="panel panel-default ss-details-panel">
<div class="panel-body">
<section>
<h2 translate>Resources</h2>
<ul class="list-group service-details-resources">
<li class="list-group-item service-details-resource-group-item">
<a class="service-details-resource-group-title"
ng-class="{'collapsed': !vm.computeGroup.open}"
ng-click="vm.toggleOpenResourceGroup(vm.computeGroup)">
{{vm.computeGroup.title}} ({{vm.computeGroup.resources.length}})
</a>
<div class="service-details-resource-list-container"
ng-class="{'collapse': !vm.computeGroup.open}">
<div ng-if="vm.computeGroup.resources.length < 1">
<span class="service-details-resource-empty-message">
{{vm.computeGroup.emptyMessage}}
</span>
</div>
<pf-list-view ng-if="vm.computeGroup.resources.length > 0"
config="vm.resourceListConfig"
items="vm.computeGroup.resources"
menu-actions="vm.resourceMenuActions"
update-menu-action-for-item-fn="vm.updateResourceMenuActionForItemFn"
custom-scope="vm">
<div class="row list-view-pf-main-info">
<div class="col-lg-3 col-md-4 col-sm-8 col-xs-8 name-column">
<span class="no-wrap">
<i ng-if="item.retired"
class="fa fa-clock-o"
uib-tooltip="{{'Retired resource'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
<span ng-if="!item.retired">
<i class="pficon fa fa-power-off" ng-if="item.power_state === 'off'"
uib-tooltip="{{'Power State: Off'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
<i class="pficon pficon-ok" ng-if="item.power_state === 'on'"
uib-tooltip="{{'Power State: On'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
<i class="pficon fa fa-question-circle"
ng-if="item.power_state !== 'on' && item.power_state !== 'off'"
uib-tooltip="{{'Power State: Unknown'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
</span>
<a uib-tooltip="{{item.name}}"
tooltip-placement="bottom"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
ng-click="$ctrl.customScope.gotoComputeResource(item)"
href="#">
<i class="pficon pficon-screen"></i>
<span>
{{ item.name }}
</span>
</a>
</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<span class="no-wrap">
<i class="fa fa-camera"></i>
<span uib-tooltip="{{'Total Snapshots' | translate}} : {{item.v_total_snapshots}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom">
{{item.v_total_snapshots}}
</span>
</span>
</div>
<div class="col-lg-3 col-md-6 hidden-sm hidden-xs">
<div>
<span class="no-wrap">
<strong translate>Latest</strong>&nbsp;
<span ng-if="item.v_snapshot_newest_name">
<span
uib-tooltip="{{'Latest Snapshot Name' | translate}} : {{item.v_snapshot_newest_name}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom">
<a ui-sref="vms.snapshots({vmId: item.id})"> {{item.v_snapshot_newest_name}}</a>
</span>
-
<span
uib-tooltip="{{'Latest Snapshot Timestamp' | translate}} : {{item.v_snapshot_newest_timestamp| date:'medium'}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom">
{{item.v_snapshot_newest_timestamp | date:'short'}}
</span>
</span>
<i class="pficon fa fa-question-circle"
ng-if="!item.v_snapshot_newest_name"
uib-tooltip="{{'Latest Snapshot: Unknown'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
</span>
</div>
</div>
<div class="col-lg-4 visible-lg">
<div>
<span class="no-wrap">
<strong translate>Last Boot</strong>&nbsp;
<span ng-if="item.boot_time"
uib-tooltip="{{'Latest Boot Time' | translate}} : {{item.boot_time | date : 'MMM dd, yyyy H:mm:ss'}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom">
{{item.boot_time | date : 'MMM dd, yyyy H:mm:ss'}}
</span>
<i class="pficon fa fa-question-circle"
ng-if="!item.boot_time"
uib-tooltip="{{'Boot Time: Unknown'|translate}}"
tooltip-append-to-body="true"
tooltip-popup-delay="1000"
tooltip-placement="bottom"></i>
</span>
</div>
</div>
</div>
<div ng-if="!item.retired " class="list-view-pf-actions">
<div class="btn-group dropdown-kebab-pf" uib-dropdown dropdown-append-to-body
ng-if="$ctrl.customScope.permissions.vm_snapshot_add || $ctrl.customScope.permissions.viewSnapshots">
<button type="button" class="btn btn-default" uib-dropdown-toggle
type="button">
<i class="fa fa-camera"></i>
<span translate>Snapshots</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu"
aria-labelledby="btn-append-to-to-body">
<li role="menuitem" ng-if="$ctrl.customScope.permissions.viewSnapshots">
<a ui-sref="vms.snapshots({vmId: item.id})" translate>View</a>
</li>
<li role="menuitem" ng-if="$ctrl.customScope.permissions.vm_snapshot_add">
<a ng-click="$ctrl.customScope.processSnapshot(item)"
translate>Create</a>
</li>
</ul>
</div>
<div class="btn-group dropdown-kebab-pf" uib-dropdown dropdown-append-to-body
ng-if="$ctrl.customScope.permissions.cockpit || $ctrl.customScope.permissions.console">
<button type="button" class="btn btn-default" uib-dropdown-toggle
type="button">
<i class="fa fa-window-maximize "></i>
<span translate>Access</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu"
aria-labelledby="btn-append-to-to-body">
<li role="menuitem"
ng-class="{'disabled': !item['supports_console?'] || item.power_state !== 'on' || !$ctrl.customScope.permissions.console}"
ng-click="$ctrl.customScope.openConsole(item)">
<a href="#" translate>VM Console</a>
</li>
<li role="menuitem"
ng-class="{'disabled': !item['supports_cockpit?'] || item.power_state !== 'on' || !$ctrl.customScope.permissions.cockpit}"
ng-click="$ctrl.customScope.openCockpit(item)">
<a href="#" translate>Web Console</a>
</li>
</ul>
</div>
<div uib-dropdown="" dropdown-append-to-body
class="dropdown pull-right dropdown-kebab-pf">
<button uib-dropdown-toggle="" class="btn btn-link dropdown-toggle"
type="button">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul uib-dropdown-menu=""
class="dropdown-menu dropdown-menu-right dropdown-menu-appended-to-body">
<li role="menuitem" ng-if="$ctrl.customScope.permissions.instanceStart"
ng-class="{'disabled': $ctrl.customScope.disableStartButton(item)}">
<a ng-click="$ctrl.customScope.startVM(item, $ctrl.customScope.disableStartButton(item))"
translate>Start</a>
</li>
<li role="menuitem" ng-if="$ctrl.customScope.permissions.instanceStop"
ng-class="{'disabled': $ctrl.customScope.disableStopButton(item)}">
<a ng-click="$ctrl.customScope.stopVM(item, $ctrl.customScope.disableStopButton(item))"
translate>Stop</a>
</li>
<li role="menuitem" ng-if="$ctrl.customScope.permissions.instanceSuspend"
ng-class="{'disabled': $ctrl.customScope.disableSuspendButton(item)}">
<a ng-click="$ctrl.customScope.suspendVM(item, $ctrl.customScope.disableSuspendButton(item))"
translate>Suspend</a>
</li>
<li role="menuitem"
confirmation
confirmation-if="vm.retireVMFlag"
confirmation-title="{{'Retire Resource'|translate}}"
confirmation-message="{{'Are you sure you would like to retire this resource?'|translate}}"
confirmation-ok-text="{{'Retire'|translate}}"
confirmation-ok-style="danger"
confirmation-show-cancel="true"
confirmation-on-ok="$ctrl.customScope.retireVM(item)"
confirmation-on-cancel="vm.retireVMFlag=false"
ng-if="$ctrl.customScope.permissions.instanceRetire"
>
<a ng-click="vm.retireVMFlag=true" translate>Retire</a>
</li>
<li role="separator" class="divider"></li>
<li role="menuitem">
<a ng-click="$ctrl.customScope.gotoComputeResource(item)" translate>View
Details</a>
</li>
</ul>
</div>
</div>
</pf-list-view>
</div>
</li>
<li class="list-group-item service-details-resource-group-item"
ng-repeat="genericObject in vm.genericObjects">
<a class="service-details-resource-group-title"
ng-class="{'collapsed': !genericObject.isExpanded}"
ng-click="vm.toggleOpenGenericObjects(genericObject)">
{{genericObject.name}}
</a>
<div class="service-details-resource-list-container"
ng-class="{'collapse': !genericObject.isExpanded}">
<generic-objects-list generic-object="genericObject"
on-update="vm.setGenericObjectViewState(object)"></generic-objects-list>
</div>
</li>
</ul>
</section>
</div>
</div>

<service-details-ansible ng-if="vm.service.type === 'ServiceAnsiblePlaybook' && vm.permissions.viewAnsible"
service="vm.service"></service-details-ansible>
<div class="panel panel-default ss-details-panel relationships-panel">
<div class="panel-body">
<section>
<h2 translate>Relationships</h2>
<div class="container-fluid">
<div class="row" ng-if="vm.service.parent_service">
<div class="col-sm-4">
<a href="#" ng-click="vm.gotoService(vm.service.parent_service)">{{vm.service.parent_service.name}}</a>
</div>
<label class="control-label col-lg-2 col-md-3 col-sm-4" translate>Parent Service</label>
<div class="col-sm-4">
<span>{{vm.service.parent_service.description}}</span>
</div>
</div>
<div uib-dropdown="" dropdown-append-to-body
class="dropdown pull-right dropdown-kebab-pf">
<button uib-dropdown-toggle="" class="btn btn-link dropdown-toggle"
type="button">
<span class="fa fa-ellipsis-v"></span>
</button>
<ul uib-dropdown-menu=""
class="dropdown-menu dropdown-menu-right dropdown-menu-appended-to-body">
<li role="menuitem" ng-if="$ctrl.customScope.permissions.instanceStart"
ng-class="{'disabled': $ctrl.customScope.disableStartButton(item)}">
<a ng-click="$ctrl.customScope.startVM(item, $ctrl.customScope.disableStartButton(item))"
translate>Start</a>
</li>
<li role="menuitem" ng-if="$ctrl.customScope.permissions.instanceStop"
ng-class="{'disabled': $ctrl.customScope.disableStopButton(item)}">
<a ng-click="$ctrl.customScope.stopVM(item, $ctrl.customScope.disableStopButton(item))"
translate>Stop</a>
</li>
<li role="menuitem" ng-if="$ctrl.customScope.permissions.instanceSuspend"
ng-class="{'disabled': $ctrl.customScope.disableSuspendButton(item)}">
<a ng-click="$ctrl.customScope.suspendVM(item, $ctrl.customScope.disableSuspendButton(item))"
translate>Suspend</a>
</li>
<li role="menuitem"
confirmation
confirmation-if="vm.retireVMFlag"
confirmation-title="{{'Retire Resource'|translate}}"
confirmation-message="{{'Are you sure you would like to retire this resource?'|translate}}"
confirmation-ok-text="{{'Retire'|translate}}"
confirmation-ok-style="danger"
confirmation-show-cancel="true"
confirmation-on-ok="$ctrl.customScope.retireVM(item)"
confirmation-on-cancel="vm.retireVMFlag=false"
ng-if="$ctrl.customScope.permissions.instanceRetire"
>
<a ng-click="vm.retireVMFlag=true" translate>Retire</a>
</li>
<li role="separator" class="divider"></li>
<li role="menuitem">
<a ng-click="$ctrl.customScope.gotoComputeResource(item)" translate>View
Details</a>
</li>
</ul>
<div class="row">
<div class="col-sm-4">
<a href="#" ng-click="vm.gotoCatalogItem()">{{vm.service.service_template.name}}</a>
</div>
<label class="control-label col-lg-2 col-md-3 col-sm-4" translate>Parent Catalog Item</label>
<div class="col-sm-4">
<span>{{vm.service.service_template.description}}</span>
</div>
</div>
</div>
</div>
</pf-list-view>
</div>
</li>
<li class="list-group-item service-details-resource-group-item" ng-repeat="genericObject in vm.genericObjects">
<a class="service-details-resource-group-title"
ng-class="{'collapsed': !genericObject.isExpanded}"
ng-click="vm.toggleOpenGenericObjects(genericObject)">
{{genericObject.name}}
</a>
<div class="service-details-resource-list-container"
ng-class="{'collapse': !genericObject.isExpanded}">
<generic-objects-list generic-object="genericObject" on-update="vm.setGenericObjectViewState(object)"></generic-objects-list>
</div>
</li>
</ul>
</section>
</div>
</div>

<service-details-ansible ng-if="vm.service.type === 'ServiceAnsiblePlaybook' && vm.permissions.viewAnsible"
service="vm.service"></service-details-ansible>
<div class="panel panel-default ss-details-panel relationships-panel">
<div class="panel-body">
<section>
<h2 translate>Relationships</h2>
<div class="container-fluid">
<div class="row" ng-if="vm.service.parent_service">
<div class="col-sm-4">
<a href="#" ng-click="vm.gotoService(vm.service.parent_service)">{{vm.service.parent_service.name}}</a>
</div>
<label class="control-label col-lg-2 col-md-3 col-sm-4" translate>Parent Service</label>
<div class="col-sm-4">
<span>{{vm.service.parent_service.description}}</span>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<a href="#" ng-click="vm.gotoCatalogItem()">{{vm.service.service_template.name}}</a>
</div>
<label class="control-label col-lg-2 col-md-3 col-sm-4" translate>Parent Catalog Item</label>
<div class="col-sm-4">
<span>{{vm.service.service_template.description}}</span>
</div>
</div>
</section>
</div>
</section>
</div>
</div>
</div>

0 comments on commit 7f8b47b

Please sign in to comment.