| <!-- |
| This in an HTML Import-able file that contains the definition |
| of the following elements: |
| |
| <leasing-selections-sk> |
| |
| This is the side navigation menu for the Skia Leasing Server |
| |
| To use this file import it: |
| |
| <link href="leasing-selections-sk.html" rel="import" /> |
| |
| Usage: |
| |
| <leasing-selections-sk></leasing-selections-sk> |
| |
| Attributes: |
| pool - The Swarming pool. |
| osTypes - All available OS types in the above pool. |
| deviceTypes - All available device types for the selected OS type. |
| osToDeviceTypes - All available device types for all OS types. |
| loadingDetails - Whether we are waiting to hear back from the server. |
| botId - The bot Id that should be leased. Eg: skia-gce-001. |
| taskIdForIsolates - The task Id whose isolates should be kept ready on bot. |
| desc - Description of the leasing task. |
| duration - How long the bot will be leased for. |
| |
| Events: |
| None |
| |
| Methods: |
| None |
| --> |
| <link rel="import" href="/res/imp/bower_components/iron-selector/iron-selector.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-item/paper-item.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-listbox/paper-listbox.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-spinner/paper-spinner.html"> |
| <link rel="import" href="/res/common/imp/confirm-dialog-sk.html"> |
| |
| <dom-module id="leasing-selections-sk"> |
| <style> |
| .loading-details-spinner { |
| margin: auto; |
| vertical-align: middle; |
| padding-left: 10em; |
| } |
| .iron-selected { |
| background-color: #D6ECF2; |
| } |
| .step-title { |
| padding-top: 2em; |
| } |
| .smaller-font { |
| font-size: 80%; |
| } |
| paper-dropdown-menu, paper-listbox { |
| width: 350px; |
| } |
| paper-dropdown-menu { |
| margin: auto; |
| display: block; |
| } |
| paper-button { |
| color: #1f78b4; |
| } |
| table.options td { |
| text-align: center; |
| padding-right: 5em; |
| padding-left: 5em; |
| padding-bottom: 2em; |
| } |
| .panel { |
| @apply(--shadow-elevation-2dp); |
| } |
| </style> |
| <template> |
| |
| <div class="loading-details-spinner"> |
| <paper-spinner active="[[loadingDetails]]" |
| alt="Loading details"></paper-spinner> |
| </div> |
| |
| <confirm-dialog-sk id="confirm_dialog"></confirm-dialog-sk> |
| |
| <br/><br/> |
| |
| <table class="options panel"> |
| |
| <tr> |
| <td class="step-title">Select Pool</td> |
| <td> |
| <paper-dropdown-menu disabled="[[loadingDetails]]"> |
| <paper-listbox class="dropdown-content" selected="{{pool}}" id="pool_listbox" attr-for-selected="value"> |
| <paper-item value="Skia">Skia</paper-item> |
| <paper-item value="SkiaCT">SkiaCT</paper-item> |
| <paper-item value="SkiaInternal">SkiaInternal</paper-item> |
| <paper-item value="CT">CT</paper-item> |
| <paper-item value="CTAndroidBuilder">CTAndroidBuilder</paper-item> |
| <paper-item value="CTLinuxBuilder">CTLinuxBuilder</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| </td> |
| </tr> |
| |
| <tr> |
| <td class="step-title">Select OS Type</td> |
| <td> |
| <paper-dropdown-menu disabled="[[loadingDetails]]" on-iron-select="osSelected"> |
| <paper-listbox class="dropdown-content" selected="0" id="os_listbox"> |
| <template is="dom-repeat" items="[[getKeys(osTypes)]]"> |
| <paper-item value="[[item]]">[[displayOsTypes(item, osTypes)]]</paper-item> |
| </template> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| </td> |
| </tr> |
| |
| <tr> |
| <td class="step-title">Select Device Type</td> |
| <td> |
| <paper-dropdown-menu disabled="[[loadingDetails]]" id="device_dropdown_menu"> |
| <paper-listbox class="dropdown-content" attr-for-selected="value" id="device_listbox" selected="{{selectedDeviceType}}"> |
| <template is="dom-repeat" items="[[getKeys(deviceTypes)]]"> |
| <paper-item value="[[item]]">[[displayDeviceTypes(item, deviceTypes)]]</paper-item> |
| </template> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| </td> |
| </tr> |
| |
| <tr> |
| <td class="step-title">Specify BotId (optional)</td> |
| <td> |
| <paper-input value="{{botId}}" disabled="[[loadingDetails]]"></paper-input> |
| <span class="smaller-font">Note: OS Type and Device Type are ignored if this is populated</span> |
| </td> |
| </tr> |
| |
| <tr> |
| <td class="step-title">Specify Swarming Task Id<br/>to keep artifacts ready on bot<br/>(optional)</td> |
| <td> |
| <paper-input value="{{taskIdForIsolates}}" disabled="[[loadingDetails]]"></paper-input> |
| </td> |
| </tr> |
| |
| <tr> |
| <td class="step-title">Lease duration</td> |
| <td> |
| <paper-dropdown-menu disabled="[[loadingDetails]]"> |
| <paper-listbox class="dropdown-content" selected="{{duration}}" attr-for-selected="value" id="duration_listbox"> |
| <paper-item value="1">1hr</paper-item> |
| <paper-item value="2">2hr</paper-item> |
| <paper-item value="6">6hr</paper-item> |
| <paper-item value="23">23hr</paper-item> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| </td> |
| |
| <tr> |
| <td class="step-title">Description</td> |
| <td> |
| <paper-input value="{{desc}}" label="Description is required" disabled="[[loadingDetails]]"></paper-input> |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2" class="center"> |
| <paper-button raised id="submit" on-click="onSubmit">Lease Bot</paper-button> |
| </td> |
| </tr> |
| |
| </table> |
| |
| </template> |
| </dom-module> |
| |
| <script> |
| Polymer({ |
| is: "leasing-selections-sk", |
| properties: { |
| pool: { |
| type: String, |
| value: "Skia", |
| observer: "poolChanged", |
| }, |
| osTypes: { |
| type: Object, |
| value: {}, |
| observer: "osTypesChanged", |
| }, |
| deviceTypes: { |
| type: Object, |
| value: {}, |
| }, |
| selectedDeviceType: { |
| type: String, |
| value: "", |
| }, |
| osToDeviceTypes: { |
| type: Object, |
| value: {}, |
| }, |
| loadingDetails: { |
| type: Boolean, |
| value: true, |
| }, |
| botId: { |
| type: String, |
| value: "", |
| }, |
| taskIdForIsolates: { |
| type: String, |
| value: "", |
| }, |
| desc: { |
| type: String, |
| value: "", |
| }, |
| duration: { |
| type: String, |
| value: "1", |
| }, |
| }, |
| |
| onSubmit: function() { |
| if (!this.validateInputs()) { |
| return; |
| } |
| |
| this.$.confirm_dialog.open("Proceed with adding leasing task?") |
| .then(this.addTask.bind(this)) |
| .catch(function(err) { |
| console.log(err); |
| sk.errorMessage("Did not add task"); |
| }) |
| |
| }, |
| |
| addTask: function() { |
| var params = {}; |
| params.pool = this.pool; |
| params.botId = this.botId; |
| if (!this.botId) { |
| params.osType = this.$.os_listbox.selectedItem.value; |
| if (this.$.device_listbox.selectedItem) { |
| params.deviceType = this.$.device_listbox.selectedItem.value; |
| } |
| } |
| params.taskIdForIsolates = this.taskIdForIsolates; |
| params.duration = this.duration; |
| params.description = this.desc; |
| |
| sk.post("/_/add_leasing_task", JSON.stringify(params)).then(function(resp) { |
| window.location.href = "/my_leases"; |
| }).catch(sk.errorMessage); |
| }, |
| |
| validateInputs: function() { |
| if (this.loadingDetails) { |
| sk.errorMessage("Please wait till pool details complete loading"); |
| return false; |
| } |
| if (!this.desc) { |
| sk.errorMessage("Please specify a description"); |
| return false; |
| } |
| return true; |
| }, |
| |
| osSelected: function(e) { |
| if (e.target.selectedItem) { |
| this.deviceTypes = {}; |
| this.selectedDeviceType = ''; |
| this.$.device_dropdown_menu.disabled = (e.target.selectedItem.value !== "Android" && |
| !e.target.selectedItem.value.startsWith("iOS")); |
| if (!this.$.device_dropdown_menu.disabled) { |
| this.deviceTypes = this.osToDeviceTypes[e.target.selectedItem.value]; |
| this.selectedDeviceType = this.getKeys(this.deviceTypes)[0]; |
| } |
| } |
| }, |
| |
| displayOsTypes: function(item, map) { |
| return item + this.getCountsStr(item, map); |
| }, |
| |
| displayDeviceTypes: function(item, map) { |
| var alias = leasing.alias.device(item); |
| // Make the display look similar to the swarming UI page. |
| return alias + leasing.alias.getAKAStr(item) + this.getCountsStr(item, map); |
| }, |
| |
| getCountsStr: function(item, map) { |
| return ' - ' + map[item] + ' bots online'; |
| }, |
| |
| getKeys: function(m) { |
| return Object.keys(m); |
| }, |
| |
| poolChanged: function(newValue) { |
| this.loadingDetails = true; |
| this.osTypes = {}; |
| this.osToDeviceTypes = {}; |
| sk.post("/_/pooldetails?pool=" + newValue).then(JSON.parse).then(function(resp) { |
| this.osTypes = resp.OsTypes; |
| this.osToDeviceTypes = resp.OsToDeviceTypes; |
| this.$.os_listbox.selected = 0; |
| }.bind(this)).catch(sk.errorMessage); |
| }, |
| |
| osTypesChanged: function(newValue) { |
| this.loadingDetails = !Object.keys(newValue).length; |
| }, |
| }); |
| </script> |
| |
