From dc105633d34491a25af82978b845edd97e50e472 Mon Sep 17 00:00:00 2001
From: yeka <rongjun0821@gmail.com>
Date: Mon, 18 Dec 2023 14:37:35 +0800
Subject: [PATCH 1/2] feat(applicationInstance): one-click finops optimization

Signed-off-by: yeka <rongjun0821@gmail.com>
---
 .../instances/Pods/components/ButtonBar.tsx      | 15 +++++++++++++--
 .../instances/Pods/components/ButtonBarV2.tsx    | 16 +++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/pages/instances/Pods/components/ButtonBar.tsx b/src/pages/instances/Pods/components/ButtonBar.tsx
index 3e57c56c..6b8171e2 100644
--- a/src/pages/instances/Pods/components/ButtonBar.tsx
+++ b/src/pages/instances/Pods/components/ButtonBar.tsx
@@ -13,6 +13,7 @@ import { isRestrictedStatus } from '@/components/State';
 import { ClusterStatus, PublishType } from '@/const';
 import { createPipelineRun, deleteCluster, freeCluster } from '@/services/clusters/clusters';
 import { DangerText, WarningText } from '@/components/Widget';
+import { MicroApp } from '@/components/Widget';
 
 interface ButtonBarProps {
   clusterStatus: CLUSTER.ClusterStatusV2,
@@ -22,10 +23,12 @@ interface ButtonBarProps {
 
 function ButtonBar(props: ButtonBarProps) {
   const { clusterStatus, cluster, manualPaused } = props;
-  const { id, fullPath } = cluster;
+  const {
+    id, fullPath, name, template,
+  } = cluster;
   const { status } = clusterStatus;
   const intl = useIntl();
-  const { successAlert } = useModel('alert');
+  const { successAlert, errorAlert } = useModel('alert');
   const [enableRebuilddeployModal, setEnableRebuilddeployModal] = useState(false);
 
   const { run: runRestart } = useRequest(() => createPipelineRun(id!, { action: 'restart' }), {
@@ -147,6 +150,14 @@ function ButtonBar(props: ButtonBarProps) {
 
   return (
     <div style={{ marginBottom: '5px', textAlign: 'right' }}>
+      <MicroApp
+        name="finops"
+        clusterID={id}
+        clusterName={name}
+        templateName={template.name}
+        fullPath={fullPath}
+        errorAlert={errorAlert}
+      />
       <Button
         disabled={!RBAC.Permissions.buildAndDeployCluster.allowed || isRestrictedStatus(status)}
         type="primary"
diff --git a/src/pages/instances/Pods/components/ButtonBarV2.tsx b/src/pages/instances/Pods/components/ButtonBarV2.tsx
index 501aa5aa..dc3f2fb7 100644
--- a/src/pages/instances/Pods/components/ButtonBarV2.tsx
+++ b/src/pages/instances/Pods/components/ButtonBarV2.tsx
@@ -13,7 +13,7 @@ import { isRestrictedStatus } from '@/components/State';
 import { ClusterStatus, PublishType } from '@/const';
 import { createPipelineRun, deleteCluster, freeCluster } from '@/services/clusters/clusters';
 import { CatalogType } from '@/services/core';
-import { DangerText, WarningText } from '@/components/Widget';
+import { DangerText, MicroApp, WarningText } from '@/components/Widget';
 
 interface ButtonBarProps {
   clusterStatus: CLUSTER.ClusterStatusV2,
@@ -26,10 +26,12 @@ function ButtonBarV2(props: ButtonBarProps) {
   const {
     clusterStatus, cluster, manualPaused, template = { type: CatalogType.V1 },
   } = props;
-  const { id, fullPath } = cluster;
+  const {
+    id, fullPath, name, templateInfo,
+  } = cluster;
   const { status } = clusterStatus;
   const intl = useIntl();
-  const { successAlert } = useModel('alert');
+  const { successAlert, errorAlert } = useModel('alert');
   const [enableRebuilddeployModal, setEnableRebuilddeployModal] = useState(false);
 
   const { run: runRestart } = useRequest(() => createPipelineRun(id!, { action: 'restart' }), {
@@ -157,6 +159,14 @@ function ButtonBarV2(props: ButtonBarProps) {
 
   return (
     <div style={{ marginBottom: '5px', textAlign: 'right' }}>
+      <MicroApp
+        name="finops"
+        clusterID={id}
+        clusterName={name}
+        templateName={templateInfo.name}
+        fullPath={fullPath}
+        errorAlert={errorAlert}
+      />
       <Button
         disabled={!RBAC.Permissions.buildAndDeployCluster.allowed
           || isRestrictedStatus(status)

From 8b99bdecac253e7ef488f41920679279997b4d43 Mon Sep 17 00:00:00 2001
From: yeka <rongjun0821@gmail.com>
Date: Wed, 20 Dec 2023 11:19:05 +0800
Subject: [PATCH 2/2] feat(applicationInstance): one-click finops optimization

Signed-off-by: yeka <rongjun0821@gmail.com>
---
 config/routes.ts                     |  5 +++++
 src/app.tsx                          |  4 ++++
 src/components/Widget/MicroApp.tsx   |  3 ++-
 src/pages/instances/FinOps/index.tsx | 26 ++++++++++++++++++++++++++
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/instances/FinOps/index.tsx

diff --git a/config/routes.ts b/config/routes.ts
index d830c291..a00f2dd5 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -214,6 +214,11 @@ const applicationRoutes = [
 ];
 
 const instanceRoutes = [
+  {
+    path: '/instances/*/-/finops',
+    menuRender: false,
+    component: 'instances/FinOps',
+  },
   {
     path: '/instances/*/-/edit',
     menuRender: false,
diff --git a/src/app.tsx b/src/app.tsx
index 6ab739ed..8689cb7a 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -556,6 +556,10 @@ function formatClusterMenu(fullPath: string) {
       path: `/instances${fullPath}/-/edit`,
       menuRender: false,
     },
+    {
+      path: `/instances${fullPath}/-/finops`,
+      menuRender: false,
+    },
     {
       path: `/instances${fullPath}/-/editv2`,
       menuRender: false,
diff --git a/src/components/Widget/MicroApp.tsx b/src/components/Widget/MicroApp.tsx
index 0b29ca61..478c5ace 100644
--- a/src/components/Widget/MicroApp.tsx
+++ b/src/components/Widget/MicroApp.tsx
@@ -17,7 +17,8 @@ function WithCheck<Props extends MicroAppProps & { defaultNode?: React.ReactElem
       });
     });
     return ifRender ? (
-      <div style={{ display: 'inline-block' }}>
+      // eslint-disable-next-line react/destructuring-assignment
+      <div style={{ display: 'inline-block', ...props.style }}>
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <WrappedComponent {...props} />
         {' '}
diff --git a/src/pages/instances/FinOps/index.tsx b/src/pages/instances/FinOps/index.tsx
new file mode 100644
index 00000000..77b3c978
--- /dev/null
+++ b/src/pages/instances/FinOps/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useModel } from '@@/plugin-model/useModel';
+import { Card, Modal } from 'antd';
+import { MicroApp } from '@/components/Widget';
+import PageWithBreadcrumb from '@/components/PageWithBreadcrumb';
+
+export default (): React.ReactNode => {
+  const { initialState } = useModel('@@initialState');
+  const { id, name, fullPath } = initialState!.resource;
+  const { errorAlert } = useModel('alert');
+
+  return (
+    <PageWithBreadcrumb>
+      <MicroApp
+        style={{ width: '100%' }}
+        name="finopsconfirm"
+        clusterID={id}
+        clusterName={name}
+        fullPath={fullPath}
+        errorAlert={errorAlert}
+        card={Card}
+        modal={Modal}
+      />
+    </PageWithBreadcrumb>
+  );
+};