Merge pull request #58 from iamyeka/feat-finops-optimize

feat(applicationInstance): one-click finops optimization

config/routes.ts

@@ -214,6 +214,11 @@ const applicationRoutes = [
 ];
 
 const instanceRoutes = [
+  {
+    path: '/instances/*/-/finops',
+    menuRender: false,
+    component: 'instances/FinOps',
+  },
   {
     path: '/instances/*/-/edit',
     menuRender: false,

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,

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} />
         {' '}

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>
+  );
+};