diff --git a/assets/styles/global/_button.scss b/assets/styles/global/_button.scss index 770cbd6503..48d25fb66c 100644 --- a/assets/styles/global/_button.scss +++ b/assets/styles/global/_button.scss @@ -77,13 +77,15 @@ button, .role-secondary { background: transparent; color: var(--primary) !important; - border: solid thin var(--primary); + border: solid 1px var(--primary); + line-height: $btn-height - 2px; } .role-tertiary { background: var(--accent-btn); - border: solid thin var(--primary); + border: solid 1px var(--primary); color: var(--primary); + line-height: $btn-height - 2px; } .role-link { diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml index 2783ba780b..b67631b91e 100644 --- a/assets/translations/en-us.yaml +++ b/assets/translations/en-us.yaml @@ -2455,6 +2455,12 @@ promptRemove: promptRestore: title: Restore Snapshot +promptSaveAsRKETemplate: + title: Create RKE Template from {cluster} + name: Cluster Template Name + description: Create a new RKE cluster template and initial revision from the current cluster configuration. + warning: This will modify the current cluster, setting up the cluster to use the newly created cluster template and revision. + rancherAlertingDrivers: msTeams: Enable Microsoft Teams sms: Enable SMS diff --git a/components/PromptModal.vue b/components/PromptModal.vue new file mode 100644 index 0000000000..f46ebcbe0a --- /dev/null +++ b/components/PromptModal.vue @@ -0,0 +1,106 @@ + + + + + + + + + diff --git a/components/SaveAsRKETemplateDialog.vue b/components/SaveAsRKETemplateDialog.vue new file mode 100644 index 0000000000..49d3bbd64b --- /dev/null +++ b/components/SaveAsRKETemplateDialog.vue @@ -0,0 +1,101 @@ + + + + + + + + + + {{ t('promptSaveAsRKETemplate.description') }} + + + + + + + + + {{ t('generic.cancel') }} + + + + + + + + + diff --git a/layouts/default.vue b/layouts/default.vue index 1a4c6cd51c..146f6e27d5 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -8,6 +8,7 @@ import ActionMenu from '@/components/ActionMenu'; import WindowManager from '@/components/nav/WindowManager'; import PromptRemove from '@/components/PromptRemove'; import PromptRestore from '@/components/PromptRestore'; +import PromptModal from '@/components/PromptModal'; import AssignTo from '@/components/AssignTo'; import Group from '@/components/nav/Group'; import Header from '@/components/nav/Header'; @@ -32,6 +33,7 @@ export default { PromptRemove, PromptRestore, AssignTo, + PromptModal, Header, ActionMenu, Group, @@ -483,6 +485,7 @@ export default { + diff --git a/models/provisioning.cattle.io.cluster.js b/models/provisioning.cattle.io.cluster.js index 15e26771f4..beb1266630 100644 --- a/models/provisioning.cattle.io.cluster.js +++ b/models/provisioning.cattle.io.cluster.js @@ -6,6 +6,8 @@ import { ucFirst } from '@/utils/string'; export const DEFAULT_WORKSPACE = 'fleet-default'; +const SAVE_AS_RKE_TEMPLATE_ACTION = '"saveAsTemplate'; + export default { details() { const out = [ @@ -45,6 +47,20 @@ export default { enabled: this.$rootGetters['isRancher'], }); + const canSaveAsTemplate = this.isRke1 && this.mgmt.status.driver === 'rancherKubernetesEngine' && !this.mgmt.spec.clusterTemplateName; + + if (canSaveAsTemplate) { + insertAt(out, 2, { divider: true }); + + insertAt(out, 3, { + action: 'saveAsRKETemplate', + label: 'Save as RKE Template', + icon: 'icon icon-folder', + bulkable: true, + enabled: this.$rootGetters['isRancher'], + }); + } + return out; }, @@ -284,4 +300,13 @@ export default { return proxyFor(this.$ctx, x); }); }, + + saveAsRKETemplate() { + return (resources = this) => { + this.$dispatch('promptModal', { + resources, + component: 'SaveAsRKETemplateDialog' + }); + }; + } }; diff --git a/plugins/steve/actions.js b/plugins/steve/actions.js index a46e4cb9a3..04a798d3e8 100644 --- a/plugins/steve/actions.js +++ b/plugins/steve/actions.js @@ -399,6 +399,10 @@ export default { commit('action-menu/toggleAssignTo', resources, { root: true }); }, + promptModal({ commit, state }, data ) { + commit('action-menu/togglePromptModal', data, { root: true }); + }, + async resourceAction({ getters, dispatch }, { resource, actionName, body, opt, }) { diff --git a/store/action-menu.js b/store/action-menu.js index 996661c131..fe2302d67e 100644 --- a/store/action-menu.js +++ b/store/action-menu.js @@ -13,11 +13,13 @@ export const state = function() { showPromptRestore: false, showAssignTo: false, showPromptUpdate: false, + showModal: false, toMove: [], toRemove: [], toRestore: [], toAssign: [], toUpdate: [], + modalData: {}, }; }; @@ -135,7 +137,24 @@ export const mutations = { } state.toUpdate = resources; - } + }, + + togglePromptModal(state, data) { + + console.log('Toggle prompt modal'); + console.log(data); + + if (!data) { + // Clearing the resources also hides the prompt + state.showModal = false; + } else { + console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> SHOW >>> '); + console.log(data.resources); + state.showModal = true; + } + + state.modalData = data; + } }; export const actions = {
{{ t('promptSaveAsRKETemplate.description') }}