Skip to content

Commit

Permalink
Adds ansible details to service-details component
Browse files Browse the repository at this point in the history 
Increases polling duration for this view
  • Loading branch information
@AllenBW
AllenBW committed Mar 10, 2017
1 parent b91ab67 commit 12c2796
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 88 deletions.
18 changes: 8 additions & 10 deletions client/app/services/service-details/service-details-ansible.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const ServiceDetailsAnsibleComponent = {
controller: ComponentController,
controllerAs: 'vm',
bindings: {
results: '<',
service: '<',
},
templateUrl,
};
Expand All @@ -17,24 +17,18 @@ function ComponentController(ModalService) {

function activate() {
angular.extend(vm, {
// Data
oStacks: vm.service.orchestration_stacks[0],
output: "",
plays: {
open: true,
resources: [],
},
creds: {
open: true,
resources: [],
},
results: {
resources: [],
},
output: "",

// Functions
sampleAction: angular.noop(),
viewPlay: angular.noop(),
watchLive: watchLive,
elapsed: elapsed,

// Config
credListConfig: credListConfig(),
Expand Down Expand Up @@ -67,6 +61,10 @@ function ComponentController(ModalService) {
};
ModalService.open(modalOptions);
}

function elapsed(finish, start) {
return Math.abs(new Date(finish) - new Date(start))/100;
}
}


127 changes: 65 additions & 62 deletions client/app/services/service-details/service-details-ansible.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,90 +2,93 @@
<div class="panel-body">
<section class="ss-form-readonly clearfix">
<h2 translate>Results</h2>
<div class="row">
<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>Status</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.results.status || ('Unknown' | translate)}}"/>
</div>
<div class="row">
<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>Status</label>
<div class="col-sm-8">
<input class="form-control text-capitalize" readonly value="{{vm.oStacks.status || ('Unknown' | translate)}}"/>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Started</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.results.started || ('Unknown' | translate)}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Started</label>
<div class="col-sm-8">
<input class="form-control" readonly
value="{{vm.oStacks.start_time | date:'short' || ('Unknown' | translate)}}"/>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Finished</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.results.finished || ('Unknown' | translate)}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Finished</label>
<div class="col-sm-8">
<input class="form-control" readonly
value="{{vm.oStacks.finish_time | date:'short' || ('Unknown' | translate)}}"/>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Elapsed</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.results.elapsed || ('Unknown' | translate)}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Elapsed</label>
<div class="col-sm-8">
<input class="form-control" readonly
value="{{ vm.elapsed(vm.oStacks.finish_time, vm.oStacks.start_time) | elapsedTime }}"/>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Launched By</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.results.launched_by || ('Unknown' | translate)}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Launched By</label>
<div class="col-sm-8">
<input class="form-control text-capitalize" readonly value="{{vm.service.evm_owner.name || ('Unknown' | translate)}}"/>
</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>Playbook</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.results.playbook || ('Unknown' | translate)}}"/>
</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>Playbook</label>
<div class="col-sm-8">
<input class="form-control text-capitalize" readonly value="{{vm.oStacks.name || ('Unknown' | translate)}}"/>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Repo Name</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.results.repo_name || ('Unknown' | translate)}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Repo Name</label>
<div class="col-sm-8">
<input class="form-control text-capitalize" readonly value="{{vm.results.repo_name || ('Unknown' | translate)}}"/>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Verbosity</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.results.verbosity || ('Unknown' | translate)}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Verbosity</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.oStacks.verbosity }}"/>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Inventory</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.results.inventory || ('Unknown' | translate)}}"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" translate>Inventory</label>
<div class="col-sm-8">
<input class="form-control" readonly value="{{vm.results.inventory || ('Unknown' | translate)}}"/>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<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.creds.open}"
ng-click="vm.creds.open = !vm.creds.open">
{{ 'Credentials' | translate}} ({{vm.creds.resources.length}})
<a class="service-details-resource-group-title" ng-class="{'collapsed': vm.credential.open}"
ng-click="vm.credential.open = !vm.credential.open">
{{ 'Credentials' | translate}} ({{vm.service.credential.length}})
</a>
<div class="service-details-resource-list-container" ng-class="{'collapse': !vm.creds.open}">
<div ng-if="vm.creds.resources.length < 1">
<div class="service-details-resource-list-container" ng-class="{'collapse': vm.credential.open}">
<div ng-if="vm.service.credential.length < 1">
<span class="service-details-resource-empty-message" translate>
No credentials available.
</span>
</div>
<div pf-list-view ng-if="vm.creds.resources.length > 0" config="vm.credListConfig"
items="vm.creds.resources" custom-scope="vm">
<div pf-list-view ng-if="vm.service.credential.length > 0" config="vm.credListConfig"
items="vm.service.credential" custom-scope="vm">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 name-column">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 name-column">
<span class="no-wrap">
<strong> {{ item.provider }}</strong>
<strong> {{ item.name }}</strong>
</a>
</span>
</div>
Expand All @@ -104,11 +107,11 @@ <h2 translate>Results</h2>
<section>
<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.plays.open}"
<a class="service-details-resource-group-title" ng-class="{'collapsed': vm.plays.open}"
ng-click="vm.plays.open = !vm.plays.open">
{{ 'Plays' | translate}} ({{vm.plays.resources.length}})
</a>
<div class="service-details-resource-list-container" ng-class="{'collapse': !vm.plays.open}">
<div class="service-details-resource-list-container" ng-class="{'collapse': vm.plays.open}">
<div ng-if="vm.plays.resources.length < 1">
<span class="service-details-resource-empty-message" translate>
No plays available.
Expand Down Expand Up @@ -190,7 +193,7 @@ <h2 translate>Standard Out
</div>
</h2>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-16">
<div class="well ">
<div ng-if="vm.output.length < 1">
<span class="service-details-resource-empty-message" translate>
Expand Down
19 changes: 13 additions & 6 deletions client/app/services/service-details/service-details.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ function ComponentController($stateParams, $state, $window, CollectionsApi, Even
title: N_('Service Details'),
service: {},
availableTags: [],
credential: {},
listActions: [],

// Functions
Expand All @@ -53,7 +54,7 @@ function ComponentController($stateParams, $state, $window, CollectionsApi, Even
resourceListConfig: getResourceListConfig(),
});
fetchResources(vm.serviceId);
Polling.start('servicesPolling', startPollingService, 10000);
Polling.start('servicesPolling', startPollingService, 50000);
}

function startPollingService() {
Expand All @@ -64,16 +65,22 @@ function ComponentController($stateParams, $state, $window, CollectionsApi, Even
ServicesState.getService(id).then(handleSuccess, handleFailure);

function handleSuccess(response) {
TaggingService.queryAvailableTags('services/' + id + '/tags/').then(assignAvailableTags);
function assignAvailableTags(response) {
vm.availableTags = response;
}

vm.service = response;
vm.title = vm.service.name;
getListActions();
Chargeback.processReports(vm.service);
vm.computeGroup = vm.createResourceGroups(vm.service);

TaggingService.queryAvailableTags('services/' + id + '/tags/').then(assignAvailableTags);
function assignAvailableTags(response) {
vm.availableTags = response;
}

ServicesState.getServiceCredential(vm.service.options.config_info.provision.credential_id).then(assignCredential);
function assignCredential(response) {
vm.service.credential = [response];
}

vm.loading = false;
}

Expand Down
2 changes: 1 addition & 1 deletion client/app/services/service-details/service-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ <h2 translate>Resources</h2>
</div>
</div>
<service-details-ansible ng-if="vm.service.type === 'ServiceAnsiblePlaybook'"
results="vm.service"></service-details-ansible>
service="vm.service"></service-details-ansible>
<div class="panel panel-default ss-details-panel relationships-panel">
<div class="panel-body">
<section>
Expand Down
23 changes: 14 additions & 9 deletions client/app/services/services-state.service.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,14 @@ export function ServicesStateFactory(ListConfiguration, CollectionsApi, RBAC) {
return {
services: services,
getService: getService,
getServiceCredential: getServiceCredential,
getServices: getServices,
getServicesMinimal: getServicesMinimal,
getLifeCycleCustomDropdown: getLifeCycleCustomDropdown,
getPolicyCustomDropdown: getPolicyCustomDropdown,
getConfigurationCustomDropdown: getConfigurationCustomDropdown,
};

// Returns minimal data for the services matching the current filters, useful for getting a filter count
function getServicesMinimal(filters) {
const options = {
filter: getQueryFilters(filters),
};

return CollectionsApi.query('services', options);
}

function getService(id) {
const options = {
attributes: [
Expand All @@ -50,6 +42,19 @@ export function ServicesStateFactory(ListConfiguration, CollectionsApi, RBAC) {
return CollectionsApi.get('services', id, options);
}

function getServiceCredential(credentialId) {
return CollectionsApi.get('authentications', credentialId, {});
}

// Returns minimal data for the services matching the current filters, useful for getting a filter count
function getServicesMinimal(filters) {
const options = {
filter: getQueryFilters(filters),
};

return CollectionsApi.query('services', options);
}

function getServices(limit, offset, filters, sortField, sortAscending) {
const options = {
expand: 'resources',
Expand Down

0 comments on commit 12c2796

Please sign in to comment.