feat(kubernetes): add rolling restart button teaser [EE-4510] (#8126)

* rolling restart teaser button

* add be only rolling restart

* move position of button

app/kubernetes/components/yaml-inspector/yamlInspector.html

@@ -22,6 +22,12 @@
       <pr-icon class="vertical-center" icon="'check'" size="'md'" mode="'success'"></pr-icon> copied
     </span>
 
-    <yaml-replace class="float-right" feature-id="$ctrl.limitedFeature"></yaml-replace>
+    <be-only-button
+      class="float-right"
+      feature-id="$ctrl.limitedFeature"
+      message="'Applies any changes that you make in the YAML editor by calling the Kubernetes API to patch the relevant resources. Any resource removals or unexpected resource additions that you make in the YAML will be ignored. Note that editing is disabled for resources in namespaces marked as system.'"
+      heading="'Apply YAML changes'"
+      button-text="'Apply changes'"
+    ></be-only-button>
   </div>
 </div>

app/kubernetes/react/views/beOnlyButton/index.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+
+import { FeatureId } from '@/react/portainer/feature-flags/enums';
+
+import { Button } from '@@/buttons';
+import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
+
+interface Props {
+  featureId: FeatureId;
+  heading: string;
+  message: string;
+  buttonText: string;
+  className?: string;
+  icon?: ReactNode;
+}
+
+export function BEOnlyButton({
+  featureId,
+  heading,
+  message,
+  buttonText,
+  className,
+  icon,
+}: Props) {
+  return (
+    <TooltipWithChildren
+      className={className}
+      heading={heading}
+      BEFeatureID={featureId}
+      message={message}
+    >
+      <Button
+        icon={icon}
+        type="button"
+        color="warninglight"
+        size="small"
+        onClick={() => {}}
+        disabled
+      >
+        {buttonText}
+      </Button>
+    </TooltipWithChildren>
+  );
+}

app/kubernetes/react/views/index.ts

@@ -4,7 +4,7 @@ import { r2a } from '@/react-tools/react2angular';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
-import { YAMLReplace } from '@/kubernetes/react/views/yamlReplace';
+import { BEOnlyButton } from '@/kubernetes/react/views/beOnlyButton';
 import { IngressesDatatableView } from '@/react/kubernetes/ingresses/IngressDatatable';
 import { CreateIngressView } from '@/react/kubernetes/ingresses/CreateIngressView';
 
@@ -22,8 +22,13 @@ export const viewsModule = angular
     r2a(withUIRouter(withReactQuery(withCurrentUser(CreateIngressView))), [])
   )
   .component(
-    'yamlReplace',
-    r2a(withUIRouter(withReactQuery(withCurrentUser(YAMLReplace))), [
+    'beOnlyButton',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(BEOnlyButton))), [
       'featureId',
+      'heading',
+      'message',
+      'buttonText',
+      'className',
+      'icon',
     ])
   ).name;

app/kubernetes/react/views/yamlReplace/index.tsx

@@ -1,30 +0,0 @@
-import { FeatureId } from '@/react/portainer/feature-flags/enums';
-
-import { Button } from '@@/buttons';
-import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
-
-interface Props {
-  featureId: FeatureId;
-}
-export function YAMLReplace({ featureId }: Props) {
-  return (
-    <TooltipWithChildren
-      className="float-right"
-      heading="Apply YAML changes"
-      BEFeatureID={featureId}
-      message="Applies any changes that you make in the YAML editor by calling the Kubernetes API to patch the relevant resources. Any resource removals or unexpected resource additions that you make in the YAML will be ignored. Note that editing is disabled for resources in namespaces marked as system."
-    >
-      <div className="float-right">
-        <Button
-          type="button"
-          color="warninglight"
-          size="small"
-          onClick={() => {}}
-          disabled
-        >
-          Apply changes
-        </Button>
-      </div>
-    </TooltipWithChildren>
-  );
-}

app/kubernetes/views/applications/edit/application.html

@@ -214,11 +214,11 @@
     <div class="col-sm-12">
       <rd-widget>
         <rd-widget-body>
-          <div ng-if="!ctrl.isSystemNamespace()" style="margin-bottom: 15px">
+          <div ng-if="!ctrl.isSystemNamespace()" class="mb-4 flex items-center gap-1">
             <button
               ng-if="!ctrl.isExternalApplication()"
               type="button"
-              class="btn btn-sm btn-light vertical-center"
+              class="btn btn-sm btn-light vertical-center ml-2"
               ui-sref="kubernetes.applications.application.edit"
               style="margin-left: 0"
               data-cy="k8sAppDetail-editAppButton"
@@ -229,18 +229,23 @@
               authorization="K8sApplicationDetailsW"
               ng-if="ctrl.isExternalApplication()"
               type="button"
-              class="btn btn-sm btn-light"
+              class="btn btn-sm btn-light ml-2"
               ui-sref="kubernetes.applications.application.edit"
-              style="margin-left: 0"
               data-cy="k8sAppDetail-editAppButton"
             >
               <pr-icon icon="'code'" class-name="'mr-1'"></pr-icon>Edit External application
             </button>
+            <be-only-button
+              icon="'refresh-cw'"
+              feature-id="ctrl.limitedFeature"
+              message="'A rolling restart of the application is performed.'"
+              heading="'Rolling restart'"
+              button-text="'Rolling restart'"
+            ></be-only-button>
             <button
               ng-if="ctrl.application.ApplicationType !== ctrl.KubernetesApplicationTypes.POD"
               type="button"
-              class="btn btn-sm btn-light"
-              style="margin-left: 0"
+              class="btn btn-sm btn-light ml-2"
               ng-click="ctrl.redeployApplication()"
               data-cy="k8sAppDetail-redeployButton"
             >
@@ -250,7 +255,6 @@
               ng-if="!ctrl.isExternalApplication()"
               type="button"
               class="btn btn-sm btn-light"
-              style="margin-left: 0"
               ng-click="ctrl.rollbackApplication()"
               ng-disabled="ctrl.application.Revisions.length < 2 || ctrl.state.appType !== ctrl.KubernetesDeploymentTypes.APPLICATION_FORM"
               data-cy="k8sAppDetail-rollbackButton"

app/kubernetes/views/applications/edit/applicationController.js

@@ -1,6 +1,7 @@
 import angular from 'angular';
 import _ from 'lodash-es';
 import * as JsonPatch from 'fast-json-patch';
+import { FeatureId } from '@/react/portainer/feature-flags/enums';
 
 import {
   KubernetesApplicationDataAccessPolicies,
@@ -350,6 +351,8 @@ class KubernetesApplicationController {
   }
 
   async onInit() {
+    this.limitedFeature = FeatureId.K8S_ROLLING_RESTART;
+
     this.state = {
       activeTab: 0,
       currentName: this.$state.$current.name,

app/react/portainer/feature-flags/enums.ts

@@ -35,4 +35,5 @@ export enum FeatureId {
   CUSTOM_LOGIN_BANNER = 'custom-login-banner',
   ENFORCE_DEPLOYMENT_OPTIONS = 'k8s-enforce-deployment-options',
   K8S_ADM_ONLY_USR_INGRESS_DEPLY = 'k8s-admin-only-ingress-deploy',
+  K8S_ROLLING_RESTART = 'k8s-rolling-restart',
 }

app/react/portainer/feature-flags/feature-flags.service.ts

@@ -40,6 +40,7 @@ export async function init(edition: Edition) {
     [FeatureId.K8S_EDIT_YAML]: Edition.BE,
     [FeatureId.ENFORCE_DEPLOYMENT_OPTIONS]: Edition.BE,
     [FeatureId.K8S_ADM_ONLY_USR_INGRESS_DEPLY]: Edition.BE,
+    [FeatureId.K8S_ROLLING_RESTART]: Edition.BE,
   };
 
   state.currentEdition = currentEdition;