rotate cert modal

assets/translations/en-us.yaml

@@ -1048,6 +1048,12 @@ cluster:
     machinePools: Machine Pools
     registry: Private Registry
     upgrade: Upgrade Strategy
+  rotateCertificates:
+    label: Rotate Certificates
+    modalTitle: Rotate Cluster Certificates
+    services: Services
+    allServices: Rotate all service certificates
+    selectService: Rotate an individual service
 
 clusterIndexPage:
   hardwareResourceGauge:

components/RotateCertificates.vue

@@ -0,0 +1,135 @@
+<script>
+import LabeledSelect from '@/components/form/LabeledSelect';
+import Card from '@/components/Card';
+import AsyncButton from '@/components/AsyncButton';
+
+import RadioGroup from '@/components/form/RadioGroup';
+
+import { get } from '@/utils/object';
+import { mapState } from 'vuex';
+
+export default {
+  components: {
+    LabeledSelect,
+    RadioGroup,
+    Card,
+    AsyncButton
+  },
+  data() {
+    return {
+      selectedService: '', allServices: true, errors: []
+    };
+  },
+  computed:   {
+    ...mapState('action-menu', ['showPromptRotate', 'toRotate']),
+
+    serviceOptions() {
+      const schema = this.$store.getters['rancher/schemaFor']('rotatecertificateinput');
+
+      return get(schema, 'resourceFields.services.options') || '';
+    },
+
+    actionParams() {
+      if (this.allServices) {
+        return {
+          services:       null,
+          caCertificates: false,
+        };
+      } else {
+        return {
+          services:       this.selectedService,
+          caCertificates: false,
+        };
+      }
+    }
+  },
+
+  watch:    {
+    showPromptRotate(show) {
+      if (show) {
+        this.$modal.show('rotate-certs');
+      } else {
+        this.$modal.hide('rotate-certs');
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.$store.commit('action-menu/togglePromptRotate');
+    },
+
+    rotate(btnCB) {
+      const cluster = this.toRotate.mgmt || {};
+
+      if (!cluster?.actions?.rotateCertificates) {
+        btnCB(false);
+      } else {
+        const params = this.actionParams;
+
+        cluster.doAction('rotateCertificates', cluster, { params }).then((res) => {
+          if (res._status === 200) {
+            btnCB(true);
+            this.errors = [];
+            this.close();
+          } else {
+            this.errors.push(res._statusText);
+            btnCB(false);
+          }
+        });
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <modal class="rotate-modal" name="rotate-certs" @closed="close">
+    <Card :style="{'height':'100%'}">
+      <template #title>
+        <h3>{{ t('cluster.rotateCertificates.modalTitle') }}</h3>
+      </template>
+      <template #body>
+        <div v-for="error in errors" :key="error" class="row mb-20 text-error">
+          {{ error }}
+        </div>
+        <div class="row">
+          <div class="col span-6">
+            <RadioGroup v-model="allServices" name="service-mode" :options="[{value: true,label:t('cluster.rotateCertificates.allServices')}, {value: false, label:t('cluster.rotateCertificates.selectService')}]" />
+          </div>
+          <div class="col span-6">
+            <LabeledSelect v-if="!allServices" v-model="selectedService" :options="serviceOptions" :label="t('cluster.rotateCertificates.services')" />
+          </div>
+        </div>
+      </template>
+      <template #actions>
+        <button class="btn role-secondary mr-20" @click="close">
+          {{ t('generic.cancel') }}
+        </button>
+        <AsyncButton @click="rotate" />
+      </template>
+    </Card>
+  </modal>
+</template>
+
+<style lang='scss' scoped>
+.rotate-modal ::v-deep.v--modal-box{
+  border:none;
+
+  & .card-container{
+    margin: 0;
+
+    & .card-wrap {
+      display:flex;
+      flex-direction:column;
+    }
+
+    & .card-body {
+      flex: 1;
+    }
+
+    & .card-actions{
+      align-self: center
+    };
+  }
+}
+</style>

list/provisioning.cattle.io.cluster.vue

@@ -1,12 +1,15 @@
 <script>
 import ResourceTable from '@/components/ResourceTable';
 import Masthead from '@/components/ResourceList/Masthead';
+import RotateCertificates from '@/components/RotateCertificates';
 import { allHash } from '@/utils/promise';
 import { CAPI, MANAGEMENT } from '@/config/types';
 import { MODE, _IMPORT } from '@/config/query-params';
 
 export default {
-  components: { ResourceTable, Masthead },
+  components: {
+    ResourceTable, Masthead, RotateCertificates
+  },
 
   async fetch() {
     const hash = await allHash({
@@ -104,5 +107,6 @@ export default {
         </button>
       </template>
     </ResourceTable>
+    <RotateCertificates />
   </div>
 </template>

models/provisioning.cattle.io.cluster.js

@@ -45,6 +45,15 @@ export default {
       enabled:    this.$rootGetters['isRancher'],
     });
 
+    if (this.mgmt.actions['rotateCertificates']) {
+      insertAt(out, 1, {
+        action:     'toggleRotateCertificates',
+        label:      'Rotate Certificates',
+        icon:       'icon icon-backup',
+        bulkable:   true,
+      });
+    }
+
     const canSaveAsTemplate = this.isRke1 && this.mgmt.status.driver === 'rancherKubernetesEngine' && !this.mgmt.spec.clusterTemplateName && this.hasLink('update');
     const canRotateEncryptionKey = this.isRke1 && this.mgmt?.hasAction('rotateEncryptionKey');
 
@@ -303,6 +312,12 @@ export default {
     };
   },
 
+  toggleRotateCertificates() {
+    return () => {
+      this.$dispatch('promptRotate', this);
+    };
+  },
+
   etcdSnapshots() {
     return (this.status?.etcdSnapshots || []).map((x) => {
       x.id = x.name || x._name;

plugins/steve/actions.js

@@ -403,6 +403,10 @@ export default {
     commit('action-menu/togglePromptModal', data, { root: true });
   },
 
+  promptRotate({ commit, state }, cluster ) {
+    commit('action-menu/togglePromptRotate', cluster, { root: true });
+  },
+
   async resourceAction({ getters, dispatch }, {
     resource, actionName, body, opt,
   }) {

store/action-menu.js

@@ -13,6 +13,7 @@ export const state = function() {
     showPromptRestore: false,
     showAssignTo:      false,
     showPromptUpdate:  false,
+    showPromptRotate:  false,
     showModal:         false,
     toMove:            [],
     toRemove:          [],
@@ -20,6 +21,7 @@ export const state = function() {
     toAssign:          [],
     toUpdate:          [],
     modalData:         {},
+    toRotate:          {}
   };
 };
 
@@ -148,6 +150,16 @@ export const mutations = {
     }
 
     state.modalData = data;
+  },
+
+   togglePromptRotate(state, cluster) {
+    if (!cluster) {
+      state.showPromptRotate = false;
+    } else {
+      state.showPromptRotate = !state.showPromptRotate;
+    }
+
+    state.toRotate = cluster;
   }
 };