1
0
mirror of https://github.com/ansible/awx.git synced 2024-10-30 22:21:13 +03:00

Add support for looking up and selecting licenses on license page

This commit is contained in:
mabashian 2019-09-04 17:34:17 -04:00 committed by Ryan Petrello
parent 29fd399b06
commit 608567795d
No known key found for this signature in database
GPG Key ID: F2AA5F2122351777
6 changed files with 330 additions and 117 deletions

View File

@ -1595,7 +1595,7 @@ tr td button i {
padding: 20px 0;
.alert {
padding: 10px;
padding: 0px;
margin: 0;
word-wrap: break-word;
}

View File

@ -183,10 +183,13 @@
overflow: hidden;
}
.License-rhCredField {
margin-bottom: 10px;
}
.License-label {
color: @field-label;
font-weight: 400;
margin-top: 10px;
}
.License-action {
@ -198,3 +201,90 @@
.License-actionError {
flex: 1;
}
.License-subSelectorModal {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1040;
display: flex;
align-items: center;
justify-content: center;
}
.License-modal {
width: 750px;
}
.License-modalBody {
border: 1px solid @b7grey;
max-height: 550px;
overflow: scroll;
border-radius: 4px;
}
.License-modalRow {
display: flex;
padding: 10px;
}
.License-modalRow:not(:last-of-type) {
border-bottom: 1px solid @b7grey;
}
.License-modalRowRadio {
flex: 0 0 40px;
display: flex;
align-items: center;
}
.License-trialTag {
font-weight: 100;
background-color: #ebebeb;
border-radius: 5px;
color: #606060;
font-size: 10px;
margin-right: 10px;
padding: 3px 9px;
line-height: 14px;
word-break: keep-all;
display: inline-flex;
}
.License-introText {
margin-bottom: 10px;
}
.License-getLicensesButton {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
}
.License-checkboxLabel {
margin-left: 5px;
font-weight: normal;
}
.License-modalRowDetails {
flex: 1;
}
.License-modalRowDetailsLabel {
font-weight: normal;
width: 100%;
}
.License-modalRowDetailsRow {
margin-bottom: 10px;
}
.License-modalRowDetails--50 {
display: flex;
flex-basis: 50%;
align-items: center;
line-height: 21px;
}

View File

@ -32,11 +32,9 @@ export default
};
const reset = function() {
document.getElementById('License-form').reset();
$scope.newLicense.eula = undefined;
if (!$scope.licenseError) {
$scope.rhCreds = {};
}
$scope.rhCreds = {};
$scope.selectedLicense = {};
};
const initVars = (config) => {
@ -56,6 +54,7 @@ export default
$scope.time.expiresOn = calcExpiresOn($scope.license.license_info.license_date);
$scope.valid = CheckLicense.valid($scope.license.license_info);
$scope.compliant = $scope.license.license_info.compliant;
$scope.selectedLicense = {};
$scope.newLicense = {
pendo: true,
insights: true
@ -131,18 +130,60 @@ export default
}
};
$scope.lookupLicenses = () => {
if ($scope.rhCreds.username && $scope.rhCreds.password) {
Wait('start');
ConfigService.getSubscriptions($scope.rhCreds.username, $scope.rhCreds.password)
.then(({data}) => {
Wait('stop');
if (data && data.length > 0) {
$scope.rhLicenses = data;
if ($scope.selectedLicense.fullLicense) {
$scope.selectedLicense.modalKey = $scope.selectedLicense.fullLicense.license_key;
}
$scope.showLicenseModal = true;
} else {
ProcessErrors($scope, data, status, null, {
hdr: i18n._('No Licenses Found'),
msg: i18n._('We were unable to locate licenses associated with this account')
});
}
})
.catch(({data, status}) => {
Wait('stop');
ProcessErrors($scope, data, status, null, {
hdr: i18n._('Error Fetching Licenses')
});
});
}
};
$scope.confirmLicenseSelection = () => {
$scope.showLicenseModal = false;
$scope.selectedLicense.fullLicense = $scope.rhLicenses.find((license) => {
return license.license_key === $scope.selectedLicense.modalKey;
});
$scope.selectedLicense.modalKey = undefined;
};
$scope.cancelLicenseLookup = () => {
$scope.showLicenseModal = false;
$scope.selectedLicense.modalKey = undefined;
};
$scope.submit = function() {
Wait('start');
$scope.licenseError = false;
let payload = {};
if ($scope.newLicense.file) {
payload = $scope.newLicense.file;
} else if ($scope.rhCreds.username && $scope.rhCreds.password) {
payload = {
rh_password: $scope.rhCreds.password,
rh_username: $scope.rhCreds.username
};
} else if ($scope.selectedLicense.fullLicense) {
payload = $scope.selectedLicense.fullLicense;
if ($scope.rhCreds.username && $scope.rhCreds.password) {
payload.rh_password = $scope.rhCreds.password;
payload.rh_username = $scope.rhCreds.username;
}
}
CheckLicense.post(payload, $scope.newLicense.eula)
.then((licenseInfo) => {
reset();
@ -179,9 +220,11 @@ export default
}, 4000);
}
});
}).catch((data) => {
}).catch(({data, status}) => {
Wait('stop');
$scope.licenseError = data.error;
ProcessErrors($scope, data, status, null, {
hdr: i18n._('Error Applying License')
});
});
};
}];

View File

@ -75,118 +75,193 @@
<div class="card at-Panel">
<div class="List-titleText">{{title}}</div>
<div class="License-body">
<div class="License-helperText" ng-if="licenseMissing" translate>Welcome to Ansible Tower! Please complete the steps below to acquire a license.</div>
<div class="AddPermissions-directions" ng-if="licenseMissing">
<span class="AddPermissions-directionNumber">
1
</span>
<span class="License-helperText">
<translate>Please click the button below to visit Ansible's website to get a Tower license key.</translate>
</span>
</div>
<button class="License-downloadLicenseButton btn btn-primary" ng-if="licenseMissing" ng-click="downloadLicense()">
<translate>Request License</translate>
</button>
<div class="AddPermissions-directions">
<span class="AddPermissions-directionNumber" ng-if="licenseMissing">
2
</span>
<span class="License-helperText">
<translate>Choose your license file or provide your Red Hat customer credentials, agree to the End User License Agreement, and click submit.</translate>
</span>
</div>
<form id="License-form" name="uploadlicense">
<div class="License-subTitleText">
<span class="Form-requiredAsterisk">*</span>
<translate>License</translate>
</div>
<div class="input-group License-file--container">
<div class="License-file--left">
<div class="d-block w-100">
<div class="License-helperText License-licenseStepHelp" translate>Upload a license file</div>
<div class="License-filePicker">
<span class="btn btn-primary" ng-click="fakeClick()" ng-disabled="!user_is_superuser || (rhCreds.username && rhCreds.username.length > 0) || (rhCreds.password && rhCreds.password.length > 0)" translate>Browse</span>
<span class="License-fileName" ng-class="{'License-helperText' : fileName == 'No file selected.'}">{{fileName|translate}}</span>
<input id="License-file" class="form-control" type="file" file-on-change="getKey"/>
</div>
<div class="License-helperText License-introText" ng-if="licenseMissing" translate>Welcome to Ansible Tower! Please complete the steps below to acquire a license.</div>
<div class="input-group License-file--container">
<div class="License-file--left">
<div class="d-block w-100">
<div class="AddPermissions-directions" ng-if="licenseMissing">
<span class="AddPermissions-directionNumber">
1
</span>
<span class="License-helperText">
<translate>Please click the button below to visit Ansible's website to get a Tower license key.</translate>
</span>
</div>
</div>
<div class="License-file--middle License-helperText" translate>
<div class="License-separator"></div>
<div translate>OR</div>
<div class="License-separator"></div>
</div>
<div class="License-file--right">
<div class="d-block w-100">
<div class="License-helperText License-licenseStepHelp" translate>Provide your Red Hat customer credentials</div>
<div>
<label class="License-label d-block" translate>USERNAME</label>
<input class="form-control Form-textInput" type="text" ng-model="rhCreds.username" ng-disabled="!user_is_superuser || newLicense.file" />
</div>
<div>
<label class="License-label d-block" translate>PASSWORD</label>
<div class="input-group Form-mixedInputGroup" ng-if="showPlaceholderPassword">
<input class="form-control Form-textInput" type="text" value="ENCRYPTED" disabled />
<span class="input-group-btn input-group-append">
<button class="btn at-ButtonHollow--default at-Input-button" ng-disabled="!user_is_superuser || newLicense.file" ng-click="replacePassword()" aw-tool-tip="Replace" data-placement="top" data-original-title="Replace">
<i class="fa fa-undo"></i>
</button>
</span>
</div>
<div class="input-group" ng-if="!showPlaceholderPassword">
<input id="rh-password" class="form-control Form-textInput" type="password" ng-model="rhCreds.password" ng-disabled="!user_is_superuser || newLicense.file" />
</div>
</div>
<button class="License-downloadLicenseButton btn btn-primary" ng-if="licenseMissing" ng-click="downloadLicense()">
<translate>Request License</translate>
</button>
<div class="AddPermissions-directions">
<span class="AddPermissions-directionNumber" ng-if="licenseMissing">
2
</span>
<span class="License-helperText">
<translate>Choose your license file, agree to the End User License Agreement, and click submit.</translate>
</span>
</div>
<div class="License-subTitleText">
<span class="Form-requiredAsterisk">*</span>
<translate>License</translate>
</div>
<div class="License-helperText License-licenseStepHelp" translate>Upload a license file</div>
<div class="License-filePicker">
<span class="btn btn-primary" ng-click="fakeClick()" ng-disabled="!user_is_superuser || (rhCreds.username && rhCreds.username.length > 0) || (rhCreds.password && rhCreds.password.length > 0)" translate>Browse</span>
<span class="License-fileName" ng-class="{'License-helperText' : fileName == 'No file selected.'}">{{fileName|translate}}</span>
<input id="License-file" class="form-control" type="file" file-on-change="getKey"/>
</div>
</div>
</div>
<div class="License-subTitleText">
<span class="Form-requiredAsterisk">*</span>
<translate>End User License Agreement</translate>
<div class="License-file--middle License-helperText" translate>
<div class="License-separator"></div>
<div translate>OR</div>
<div class="License-separator"></div>
</div>
<div id="eula_notice"
class="License-eulaNotice">{{ license.eula }}</div>
<div class="form-group License-detailsGroup">
<div class="License-file--right">
<div class="d-block w-100">
<div class="AddPermissions-directions">
<span class="License-helperText">
<translate>Provide your Red Hat customer credentials and you can choose from a list of your available licenses. The credentials you use will be stored for future use in retrieving renewal or expanded licenses. You can update or remove them in SETTINGS > SYSTEM.</translate>
</span>
</div>
<div class="License-rhCredField">
<label class="License-label d-block" translate>USERNAME</label>
<input class="form-control Form-textInput" type="text" ng-model="rhCreds.username" ng-disabled="!user_is_superuser || newLicense.file" />
</div>
<div class="License-rhCredField">
<label class="License-label d-block" translate>PASSWORD</label>
<div class="input-group Form-mixedInputGroup" ng-if="showPlaceholderPassword">
<input class="form-control Form-textInput" type="text" value="ENCRYPTED" disabled />
<span class="input-group-btn input-group-append">
<button class="btn at-ButtonHollow--default at-Input-button" ng-disabled="!user_is_superuser || newLicense.file" ng-click="replacePassword()" aw-tool-tip="Replace" data-placement="top" data-original-title="Replace">
<i class="fa fa-undo"></i>
</button>
</span>
</div>
<div class="input-group" ng-if="!showPlaceholderPassword">
<input id="rh-password" class="form-control Form-textInput" type="password" ng-model="rhCreds.password" ng-disabled="!user_is_superuser || newLicense.file" />
</div>
</div>
<div class="License-getLicensesButton">
<span ng-click="lookupLicenses()" class="btn btn-primary" ng-disabled="!rhCreds.username || !rhCreds.password" translate>GET LICENSES</button>
</div>
<div ng-if="selectedLicense.fullLicense">
<div class="at-RowItem-label" translate>
Selected
</div>
{{selectedLicense.fullLicense.subscription_name}}
</div>
</div>
</div>
</div>
<div class="License-subTitleText">
<span class="Form-requiredAsterisk">*</span>
<translate>End User License Agreement</translate>
</div>
<div id="eula_notice"
class="License-eulaNotice">{{ license.eula }}</div>
<div class="form-group License-detailsGroup">
<div class="License-analyticsCheckbox checkbox">
<label class="License-details--label">
<input type="checkbox" ng-model="newLicense.eula" ng-disabled="!user_is_superuser" required>
<span class="License-checkboxLabel" translate><b>I agree to the End User License Agreement</b></span>
</label>
</div>
</div>
<div class="License-subTitleText" ng-if="licenseMissing">
<translate>Tracking and Analytics</translate>
</div>
<div class="form-group License-detailsGroup" ng-if="licenseMissing">
<span class="License-helperText">
<translate>
By default, Tower collects and transmits analytics data on Tower usage to Red Hat. There are two categories of data collected by Tower. For more information, see <a target="_blank" href="http://docs.ansible.com/ansible-tower/latest/html/installandreference/user-data.html#index-0">this Tower documentation page</a>. Uncheck the following boxes to disable this feature.</translate>
</span>
<div class="License-analyticsCheckboxGroup">
<div class="License-analyticsCheckbox checkbox">
<label class="License-details--label">
<input type="checkbox" ng-model="newLicense.eula" ng-disabled="!user_is_superuser" required>
<translate>I agree to the End User License Agreement</translate>
</label>
</div>
</div>
<div class="License-subTitleText" ng-if="licenseMissing">
<translate>Tracking and Analytics</translate>
</div>
<div class="form-group License-detailsGroup" ng-if="licenseMissing">
<span class="License-helperText">
<translate>
By default, Tower collects and transmits analytics data on Tower usage to Red Hat. There are two categories of data collected by Tower. For more information, see <a target="_blank" href="http://docs.ansible.com/ansible-tower/latest/html/installandreference/user-data.html#index-0">this Tower documentation page</a>. Uncheck the following boxes to disable this feature.</translate>
</span>
<div class="License-analyticsCheckboxGroup">
<div class="License-analyticsCheckbox checkbox">
<label class="License-details--label">
<input type="checkbox" ng-model="newLicense.pendo" ng-disabled="!user_is_superuser">
<translate>User analytics: This data is used to enhance future releases of the Tower Software and help streamline customer experience and success.</translate>
</div>
<div class="License-analyticsCheckbox checkbox">
<input type="checkbox" ng-model="newLicense.insights" ng-disabled="!user_is_superuser">
<translate>Automation analytics: This data is used to enhance future releases of the Tower Software and to provide Automation Insights to Tower subscribers.</translate>
</div>
<span class="License-checkboxLabel" translate><b>User analytics</b>: This data is used to enhance future releases of the Tower Software and help streamline customer experience and success.</span>
</label>
</div>
<div class="License-analyticsCheckbox checkbox">
<label class="License-details--label">
<input id="license-insights" type="checkbox" ng-model="newLicense.insights" ng-disabled="!user_is_superuser">
<span class="License-checkboxLabel" translate><b>Automation analytics</b>: This data is used to enhance future releases of the Tower Software and to provide Automation Insights to Tower subscribers.</span>
</label>
</div>
</div>
<div class="License-action">
<div class="License-actionError">
<span ng-show="success == true" class="License-greenText License-submit--success pull-right" translate>Save successful!</span>
<span ng-show="licenseError" class="License-redText License-submit--failure pull-right" translate>Save unsuccessful - {{licenseError}}</span>
</div>
<div>
<button ng-click="submit()" class="btn btn-success pull-right" ng-disabled="(!newLicense.file && (!rhCreds.username || !rhCreds.password)) || (newLicense.file && newLicense.file.license_key == null) || newLicense.eula == null || !user_is_superuser" translate>Submit</button>
</div>
</div>
<div class="License-action">
<div class="License-actionError">
<span ng-show="success == true" class="License-greenText License-submit--success pull-right" translate>Save successful!</span>
</div>
</form>
<div>
<button ng-click="submit()" class="btn btn-success pull-right" ng-disabled="(!newLicense.file && !selectedLicense.fullLicense) || (newLicense.file && newLicense.file.license_key == null) || newLicense.eula == null || !user_is_superuser" translate>Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="License-subSelectorModal" ng-show="showLicenseModal">
<div class="modal-dialog License-modal">
<div class="Modal-content modal-content">
<div class="Modal-header">
<div class="Modal-title" translate>
Select a license
</div>
<div class="Modal-exitHolder">
<button class="close Modal-exit" ng-click="cancelLicenseLookup()">
<i class="fa fa-times-circle"></i>
</button>
</div>
</div>
<div class="Modal-body ng-binding">
<div class="License-modalBody">
<form>
<div class="License-modalRow" ng-repeat="license in rhLicenses track by license.license_key">
<div class="License-modalRowRadio">
<input type="radio" id="license-{{license.license_key}}" ng-model="selectedLicense.modalKey" value="{{license.license_key}}" />
</div>
<div class="License-modalRowDetails">
<label for="license-{{license.license_key}}" class="License-modalRowDetailsLabel">
<div class="License-modalRowDetailsRow">
<div class="License-trialTag" ng-if="license.trial" translate>
Trial
</div>
<b>{{license.subscription_name}}</b>
</div>
<div class="d-flex">
<div class="License-modalRowDetails--50">
<div class="at-RowItem-label" translate>
Managed Nodes
</div>
{{license.instance_count}}
</div>
<div class="License-modalRowDetails--50">
<div class="at-RowItem-label" translate>
Expires
</div>
{{license.license_date | formatEpoch}}
</div>
</div>
</label>
</div>
</div>
</form>
</div>
</div>
<div class="Modal-footer">
<button ng-click="cancelLicenseLookup()" class="btn Modal-footerButton Modal-defaultButton">CANCEL</button>
<button
ng-click="confirmLicenseSelection()"
class="btn Modal-footerButton btn-success"
ng-disabled="!selectedLicense.modalKey"
translate
>
SELECT
</button>
</div>
</div>
</div>
</div>

View File

@ -238,9 +238,9 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
msg = "";
_.forOwn(data, function(value, key) {
if (Array.isArray(data[key])) {
msg += `${key}: ${data[key][0]}`;
msg += `${key.toUpperCase()}: ${data[key][0]}`;
} else {
msg += `${key} : ${value} `;
msg += `${key.toUpperCase()}: ${value} `;
}
});
Alert(defaultMsg.hdr, msg);

View File

@ -58,6 +58,11 @@ export default
deferred.reject('Config not found.');
}
return deferred.promise;
},
getSubscriptions: function(username, password) {
Rest.setUrl(`${GetBasePath('config')}subscriptions`);
return Rest.post({ rh_username: username, rh_password: password} );
}
};
}