Pass flag state to vue components

pinterest · Oct 18, 2024 · 5462a4e · 5462a4e
1 parent 368d6ec
commit 5462a4e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/deploy-board/deploy_board/static/js/components/clusterconfigcomponents.js b/deploy-board/deploy_board/static/js/components/clusterconfigcomponents.js
@@ -523,7 +523,7 @@ Vue.component("placements-select", {
 
 Vue.component("hosttype-select", {
     template: '<div class="form-group">\
-    <label class="deployToolTip control-label col-xs-2" data-toggle="tooltip" v-bind:title="title">{{label}}</label>\
+    <label class="deployToolTip control-label col-xs-2" data-toggle="tooltip" v-bind:title="title" v-if="isEnabled">{{label}}</label>\
     <div class="col-xs-6"><div v-bind:class="groupStyle">\
     <select v-bind:class="selectClass" v-on:change="updateValue($event.target.value)" required="true">\
     <option v-for="option in selectoptions" v-bind:value="option.value" v-bind:selected="option.isSelected" v-bind:disabled="option.isDisabled">{{option.text}}</option></select>\
@@ -538,10 +538,13 @@ Vue.component("hosttype-select", {
         <input type="checkbox" id="checkbox" title="You should only enable this feature with capacity-eng approval. Your enable/disable operation on this feature triggers a notification to capacity-eng." v-bind:checked="enablemultiplehosttypes" v-on:click="enabletypeschange($event.target.checked)">\
         <label for="checkbox" title="You should only enable this feature with capacity-eng approval. Your enable/disable operation on this feature triggers a notification to capacity-eng.">Enable Backup instance types</label>\
     </div></div>',
-    props: ['label', 'title', 'selectoptions', 'showhelp', 'small', 'selectsearch', 'retired', 'enablemultiplehosttypes', 'disablebackupinstancetypes'],
+    props: ['label', 'title', 'selectoptions', 'showhelp', 'small', 'selectsearch', 'retired', 'enablemultiplehosttypes', 'disablebackupinstancetypes', 'ismanagedresource'],
     computed: {
         isVisible: function () {
             return this.disablebackupinstancetypes === "False"
+        },
+        isEnabled: function () {
+            return this.ismanagedresource !== "True"
         }
     },
     data: function () {
@@ -562,6 +565,9 @@ Vue.component("hosttype-select", {
         enabletypeschange: function (value) {
             this.$emit('enablemultiplehosttypesclick', value)
         },
+        enablefield: function (value) {
+            this.$emit('ismanagedresource', value);
+        }
     }
 });
 

diff --git a/deploy-board/deploy_board/templates/clusters/cluster_configuration.html b/deploy-board/deploy_board/templates/clusters/cluster_configuration.html
@@ -75,7 +75,7 @@ <h4 class="panel-title pull-left">Capacity</h4>
                         @base-image-change="baseImageChange" @image-name-change="imageNameChange" @help-clicked="baseImageHelpClick" >
                     </baseimage-select>
                     <base-image-help v-show="showBaseImageHelp" v-bind:data="baseImageHelpData"></base-image-help>
-                    <hosttype-select label="Host Type" title="Compute Capability of the host" v-model="selectedHostTypeValue" v-bind:selectoptions="hostTypeOptions" v-bind:disablebackupinstancetypes="disableBackupInstanceTypes" selectsearch="true"
+                    <hosttype-select label="Host Type" title="Compute Capability of the host" v-model="selectedHostTypeValue" v-bind:selectoptions="hostTypeOptions" v-bind:disablebackupinstancetypes="disableBackupInstanceTypes" v-bind:ismanagedresource="isManagedResource" selectsearch="true"
                     showhelp="true" v-on:helpclick="hostTypeHelpClick" v-bind:enablemultiplehosttypes="enableMultipleHostTypes" v-on:enablemultiplehosttypesclick="selecttypes"></hosttype-select>
                     <hostype-help v-show="showHostTypeHelp" v-bind:data="hostTypeHelpData"></hostype-help>
                     <backup-hosttypes v-bind:backuphosttypes="backupHosttypes"></backup-hosttypes>
@@ -117,7 +117,7 @@ <h4 class="panel-title pull-left">Capacity</h4>
                 <div class="form-group">
                     <label class="deployToolTip control-label col-xs-2" data-toggle="tooltip" data-original-title="By checking this box, I understand this cluster is managed and updating it through this form is discouraged and will pause management, in which case I will resolve any configuration drift before management can be resumed." for="isManagedResourceCheckboxId" style="padding-top: 0px">Disable Management</label>
                     <div class="col-xs-2">
-                        <input type="checkbox" id="isManagedResourceCheckboxId">
+                        <input type="checkbox" id="isManagedResourceCheckboxId" v-bind:checked="ismanagedresource" v-on:click="enablefield($event.target.checked)">
                     </div>
                 </div>
                 {% endif %}
@@ -469,6 +469,7 @@ <h4 class="panel-title pull-left">Capacity</h4>
         const puppetRepository = `{{ puppet_repository }}`;
         const deployServiceWikiUrl = `{{ conflicting_deploy_service_wiki_url }}`;
         const disableBackupInstanceTypes = `{{ disable_backup_instance_types}}`;
+        const isManagedResource = `{{ is_managed_resource }}`;
 
         var capacitySetting = new Vue({
             el: "#mainPanel",
@@ -579,6 +580,7 @@ <h4 class="panel-title pull-left">Capacity</h4>
                 hieraPaths,
                 deployServiceWikiUrl,
                 disableBackupInstanceTypes,
+                isManagedResource,
             }),
             methods: {
                 addConfig: function(config) {