openstack/heat-dashboard
Code Issues Proposed changes

TemplateGenerator: Add Designate::Recordset support

Browse Source 
Add support for OS::Designate::Recordset as a new resource,
which you can use from Template Generator.

Change-Id: I08bf9dacd35cb1d28e929d5e4763f7586d481606
Task: #19674
Story: #2002033
This commit is contained in:
JiyeYu 2018-06-12 11:38:37 +09:00
parent 5f9611f28b
commit 3f08ce4cf7
8 changed files with 253 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/resources/os__designate__recordset/os__designate__recordset-blue.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="55" height="55" preserveAspectRatio="xMidYMid meet" style="background-color: #FFFFFF;" viewBox="0 0 55 55">
<g class="currentLayer" style=""><title>Layer 1</title><circle class="frame" r="25" style="fill:white;fill-opacity=0.0;stroke-width:3;stroke: #3f51b5" cy="27.395854949951172" cx="28.040435791015625" id="svg_2"/><g transform="translate(0,300) scale(0.10000000149011612,-0.10000000149011612) " fill="black" stroke="none" id="svg_1" class="selected">
</g></g><g class="currentLayer" style=""><title>Layer 1</title><text x="15.8037456780144" y="26.947444905433" style="fill: #3f51b5; stroke: #3f51b5; font-size: 12px;font-family:Helvetica;" id="svg_1" class="" transform="matrix(0.8689477029051922,0,0,0.8383460251007016,2.074099908632737,2.043217027694234) ">DNS</text><text x="6.2547533214092255" y="38.90199057917994" style="fill: #3f51b5; stroke: #3f51b5; font-size: 10px;font-family:Helvetica; " id="svg_2" class="" transform="matrix(0.9034689664840698,0,0,0.8999947905540465,2.8846876919269557,2.8923381669446826) ">RECORD</text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/resources/os__designate__recordset/os__designate__recordset-gray.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="55" height="55" preserveAspectRatio="xMidYMid meet" style="background-color: #FFFFFF;" viewBox="0 0 55 55">
<g class="currentLayer" style=""><title>Layer 1</title><circle class="frame" r="25" style="fill:white;fill-opacity=0.0;stroke-width:3;stroke: #808080" cy="27.395854949951172" cx="28.040435791015625" id="svg_2"/><g transform="translate(0,300) scale(0.10000000149011612,-0.10000000149011612) " fill="black" stroke="none" id="svg_1" class="selected">
</g></g><g class="currentLayer" style=""><title>Layer 1</title><text x="15.8037456780144" y="26.947444905433" style="fill: #808080; stroke: #808080; font-size: 12px;font-family:Helvetica;" id="svg_1" class="" transform="matrix(0.8689477029051922,0,0,0.8383460251007016,2.074099908632737,2.043217027694234) ">DNS</text><text x="6.2547533214092255" y="38.90199057917994" style="fill: #808080; stroke: #808080; font-size: 10px;font-family:Helvetica; " id="svg_2" class="" transform="matrix(0.9034689664840698,0,0,0.8999947905540465,2.8846876919269557,2.8923381669446826) ">RECORD</text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/resources/os__designate__recordset/os__designate__recordset-green.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="55" height="55" preserveAspectRatio="xMidYMid meet" style="background-color: #FFFFFF;" viewBox="0 0 55 55">
<g class="currentLayer" style=""><title>Layer 1</title><circle class="frame" r="25" style="fill:white;fill-opacity=0.0;stroke-width:3;stroke:green" cy="27.395854949951172" cx="28.040435791015625" id="svg_2"/><g transform="translate(0,300) scale(0.10000000149011612,-0.10000000149011612) " fill="black" stroke="none" id="svg_1" class="selected">
</g></g><g class="currentLayer" style=""><title>Layer 1</title><text x="15.8037456780144" y="26.947444905433" style="fill: green; stroke: green; font-size: 12px;font-family:Helvetica;" id="svg_1" class="" transform="matrix(0.8689477029051922,0,0,0.8383460251007016,2.074099908632737,2.043217027694234) ">DNS</text><text x="6.2547533214092255" y="38.90199057917994" style="fill: green; stroke: green; font-size: 10px;font-family:Helvetica; " id="svg_2" class="" transform="matrix(0.9034689664840698,0,0,0.8999947905540465,2.8846876919269557,2.8923381669446826) ">RECORD</text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/resources/os__designate__recordset/os__designate__recordset-red.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="55" height="55" preserveAspectRatio="xMidYMid meet" style="background-color: #FFFFFF;" viewBox="0 0 55 55">
<g class="currentLayer" style=""><title>Layer 1</title><circle class="frame" r="25" style="fill:white;fill-opacity=0.0;stroke-width:3;stroke: #C82128" cy="27.395854949951172" cx="28.040435791015625" id="svg_2"/><g transform="translate(0,300) scale(0.10000000149011612,-0.10000000149011612) " fill="black" stroke="none" id="svg_1" class="selected">
</g></g><g class="currentLayer" style=""><title>Layer 1</title><text x="15.8037456780144" y="26.947444905433" style="fill: #C82128; stroke: #C82128; font-size: 12px;font-family:Helvetica;" id="svg_1" class="" transform="matrix(0.8689477029051922,0,0,0.8383460251007016,2.074099908632737,2.043217027694234) ">DNS</text><text x="6.2547533214092255" y="38.90199057917994" style="fill: #C82128; stroke: #C82128; font-size: 10px;font-family:Helvetica; " id="svg_2" class="" transform="matrix(0.9034689664840698,0,0,0.8999947905540465,2.8846876919269557,2.8923381669446826) ">RECORD</text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

76
heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/resources/os__designate__recordset/os__designate__recordset.html Normal file
View File

@ -0,0 +1,76 @@
<md-tabs md-dynamic-height md-stretch-tabs="always" md-border-bottom>
<md-tab label="Properties" >
<md-content layout-padding>
<md-input-container class="md-block">
<label>Name</label>
<input ng-model="$ctrl.recordset.name" name="name" type="text" required ng-pattern="validate_name" md-maxlength="255">
<div ng-messages="$ctrl.formReference.name.$error" role="alert" multiple>
<div ng-message="required" class="my-message">You must supply a name.</div>
<div ng-message="pattern" class="my-message">That doesn't look like a valid name.
</div>
<div ng-message="md-maxlength" class="my-message">
Too long name.
</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Zone</label>
<input ng-model="$ctrl.recordset.zone" name="zone" type="text" ng-disabled="$ctrl.disable.zone" required>
<div ng-messages="$ctrl.formReference.zone.$error" role="alert" multiple>
<div ng-message="required" class="my-message">You must supply a zone.</div>
<div ng-message="pattern" class="my-message">That doesn't look like a valid id of zone.
</div>
</div>
</md-input-container>
<md-input-container class="md-block" flex-gt-xs>
<label>Type</label>
<md-select ng-model="$ctrl.recordset.type" required>
<md-option ng-repeat="type in options.types" ng-value="type.id">
{$ type.name $}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block">
<label>Records</label>
<md-chips ng-model="$ctrl.recordset.records" ng-required="true" placeholder="+ record"></md-chips>
<div class="md-chips-messages" ng-messages="$ctrl.formReference.records.$error">
<div ng-message="required">At least one record is required.</div>
</div>
</md-input-container>
</md-content>
<md-switch class="md-primary" name="show_more" ng-model="show_more">
{$ 'Show More Properties' | translate $}
</md-switch>
</md-tab>
<md-tab label="Optional Properties" ng-if="show_more">
<md-content layout-padding>
<md-input-container class="md-block">
<label>TTL</label>
<input ng-model="$ctrl.recordset.ttl" name="ttl" type="number" step="1" min="1" max="2147483647">
</md-input-container>
<md-input-container class="md-block">
<label>Description</label>
<input ng-model="$ctrl.recordset.description" name="description" type="text" md-maxlength="255">
<div ng-messages="$ctrl.formReference.description.$error" role="alert" multiple>
<div ng-message="md-maxlength" class="my-message">
Too long description.
</div>
</div>
</md-input-container>
</md-content>
</md-tab>
<md-tab label="Depends on">
<md-content layout-padding>
<depends-on dependson='dependson'></depends-on>
</md-content>
</md-tab>
</md-tabs>

113
heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/resources/os__designate__recordset/os__designate__recordset.js Normal file
View File

@ -0,0 +1,113 @@
(function(angular) {
'use strict';
// OS::Designate::RecordSet
angular.module('horizon.dashboard.project.heat_dashboard.template_generator').value('osDesignateRecordsetSettings',
{
resource_key: "OS__Designate__RecordSet",
admin: false,
icon: {
class: 'fa-key ',
name: 'OS::Designate::RecordSet',
code: '\uf084',
color: '#483dff'
},
label: 'name',
modal_component: '<os-designate-recordset recordset="resource" dependson="dependson" connectedoptions="connectedoptions" form-reference="resourceForm"></os-designate-recordset>',
edge_settings: {
'OS__Designate__Zone': {
'type': 'property',
'property': 'zone',
'limit': 1,
},
},
necessary_properties: {
'name': null,
'zone': ['OS__Designate__Zone'],
'type': null,
'records': null,
},
}
);
angular.module('horizon.dashboard.project.heat_dashboard.template_generator')
.run(['osDesignateRecordsetSettings', 'hotgenGlobals', function( osDesignateRecordsetSettings, hotgenGlobals){
hotgenGlobals.update_resource_icons(
osDesignateRecordsetSettings.resource_key,
osDesignateRecordsetSettings.icon);
hotgenGlobals.update_resource_components(
osDesignateRecordsetSettings.resource_key,
osDesignateRecordsetSettings.modal_component);
hotgenGlobals.update_edge_directions(
osDesignateRecordsetSettings.resource_key,
osDesignateRecordsetSettings.edge_settings);
hotgenGlobals.update_node_labels(
osDesignateRecordsetSettings.resource_key,
osDesignateRecordsetSettings.label);
}]);
function osDesignateRecordsetController($scope, hotgenGlobals, validationRules){
$scope.options = hotgenGlobals.get_resource_options();
$scope.options.types = [
{'id': 'A', 'name': 'A'},
{'id': 'AAAA', 'name': 'AAAA'},
{'id': 'MX', 'name': 'MX'},
{'id': 'CNAME', 'name': 'CNAME'},
{'id': 'TXT', 'name': 'TXT'},
{'id': 'SRV', 'name': 'SRV'},
{'id': 'NS', 'name': 'NS'},
{'id': 'PTR', 'name': 'PTR'},
{'id': 'SPF', 'name': 'SPF'},
{'id': 'SSHFP', 'name': 'SSHFP'},
];
$scope.admin = $scope.options.auth.admin;
this.$onInit = function(){
if (typeof this.recordset.records === 'undefined'){
this.recordset.records = [];
}
if (typeof this.connectedoptions === 'undefined'){
$scope.connected_options = []
} else{
$scope.connected_options = this.connectedoptions;
}
this.disable = {'zone': false}
if ( $scope.connected_options.zone && $scope.connected_options.zone.length > 0){
this.recordset.zone = $scope.connected_options.zone[0].value
this.disable.zone = true
}
$scope.dependson = this.dependson;
}
$scope.validate_name = validationRules['name'];
}
osDesignateRecordsetController.$inject = ['$scope', 'hotgenGlobals',
'horizon.dashboard.project.heat_dashboard.template_generator.validationRules',
];
osDesignateRecordsetPath.$inject = ['horizon.dashboard.project.heat_dashboard.template_generator.basePath'];
function osDesignateRecordsetPath(basePath){
return basePath + 'js/resources/os__designate__recordset/os__designate__recordset.html';
}
angular.module('horizon.dashboard.project.heat_dashboard.template_generator').component('osDesignateRecordset', {
templateUrl: osDesignateRecordsetPath,
controller: osDesignateRecordsetController,
bindings:{
'recordset': '=',
'dependson': '=',
'connectedoptions': '<',
'formReference': '<',
}
});
})(window.angular);

49
heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/resources/os__designate__recordset/os__designate__recordset.spec.js Normal file
View File

@ -0,0 +1,49 @@
(function() {
'use strict';
describe('component os-designate-recordset', function(){
beforeEach(module('horizon.dashboard.project.heat_dashboard.template_generator'));
beforeEach(module('appTemplates'));
var $scope, $isolateScope, $compile;
var element;
beforeEach(inject(function($injector) {
$scope = $injector.get('$rootScope').$new();
$compile = $injector.get('$compile');
$scope.resource = {};
$scope.dependson = [];
$scope.connectedoptions = [];
$scope.resourceForm = {};
// element will enable you to test your directive's element on the DOM
element = $compile(angular.element('<os-designate-recordset recordset="resource"'+
'dependson="dependson" connectedoptions="connectedoptions"'+
'form-reference="resourceForm"></os-designate-recordset>'))($scope);
// Digest needs to be called to set any values on the directive's scope
$scope.$digest();
$isolateScope = element.isolateScope();
}));
it('find tab title Properties', function() {
expect(element.find('span').html()).toContain("Properties");
});
it('find tab title Properties with resource properties set', function() {
$scope.resource = { masters: [], attributes: []};
element = $compile(angular.element('<os-designate-recordset recordset="resource" '+
'dependson="dependson" form-reference="resourceForm">'+
'</os-designate-recordset>'))($scope);
$scope.$digest();
expect(element.find('span').html()).toContain("Properties");
});
});
})();

3
heat_dashboard/static/dashboard/project/heat_dashboard/template_generator/js/resources/os__designate__recordset/os__designate__recordset.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="55" height="55" preserveAspectRatio="xMidYMid meet" style="background-color: #FFFFFF;" viewBox="0 0 55 55">
<g class="currentLayer" style=""><title>Layer 1</title><circle class="frame" r="25" style="fill:white;fill-opacity=0.0;stroke-width:3;stroke:black" cy="27.395854949951172" cx="28.040435791015625" id="svg_2"/><g transform="translate(0,300) scale(0.10000000149011612,-0.10000000149011612) " fill="black" stroke="none" id="svg_1" class="selected">
</g></g><g class="currentLayer" style=""><title>Layer 1</title><text x="15.8037456780144" y="26.947444905433" style="fill: #000000; stroke: #000; font-size: 12px;font-family:Helvetica;" id="svg_1" class="" transform="matrix(0.8689477029051922,0,0,0.8383460251007016,2.074099908632737,2.043217027694234) ">DNS</text><text x="6.2547533214092255" y="38.90199057917994" style="fill: #000000; stroke: #000; font-size: 10px;font-family:Helvetica; " id="svg_2" class="" transform="matrix(0.9034689664840698,0,0,0.8999947905540465,2.8846876919269557,2.8923381669446826) ">RECORD</text></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB