Multi Sync app feature (#25)

OpsMx · Jan 9, 2025 · 0bc9d3e · 0bc9d3e
1 parent cb0c25a
commit 0bc9d3e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/ui/src/app/applications/components/applications-container.tsx b/ui/src/app/applications/components/applications-container.tsx
@@ -7,6 +7,7 @@ import {ApplicationsList} from './applications-list/applications-list';
 export const ApplicationsContainer = (props: RouteComponentProps<any>) => (
     <Switch>
         <Route exact={true} path={`${props.match.path}`} component={ApplicationsList} />
+        <Route exact={true} path={`${props.match.path}/opsmx/opsmxsyncronizeApp`} component={ApplicationsList} />
         <Route exact={true} path={`${props.match.path}/opsmx/creation`} component={ApplicationsList} />
         <Route exact={true} path={`${props.match.path}/:name`} component={ApplicationDetails} />
         <Route exact={true} path={`${props.match.path}/:name/opsmx/details`} component={ApplicationDetails} />

diff --git a/ui/src/app/applications/components/applications-list/applications-list.tsx b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -299,7 +299,7 @@ const FlexTopBar = (props: {toolbar: Toolbar | Observable<Toolbar>}) => {
 
 const checkUrlIncludesOpsmx = (param: string) => {
     let urlSplit = param?.split('/')
-    if(urlSplit && urlSplit[urlSplit.length-2] == 'opsmx' && urlSplit[urlSplit.length-1] == 'creation'){
+    if(urlSplit && urlSplit[urlSplit.length-2] == 'opsmx' && (urlSplit[urlSplit.length-1] == 'creation' || urlSplit[urlSplit.length-1] == 'opsmxsyncronizeApp')){
         return true;
     }
         return false;
@@ -390,7 +390,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                             const {filteredApps, filterResults} = filterApps(applications, pref, pref.search);
                                             return (
                                                 <React.Fragment>
-                                                    <FlexTopBar
+                                                   { !pathHasOpsmx ? <> <FlexTopBar
                                                         toolbar={{
                                                             tools: (
                                                                 <React.Fragment key='app-list-tools'>
@@ -558,7 +558,13 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                             hide={() => ctx.navigation.goto('.', {refreshApps: null}, {replace: true})}
                                                             apps={filteredApps}
                                                         />
-                                                    </div>
+                                                    </div></> :   <ApplicationsSyncPanel
+                                                            key='syncsPanel'
+                                                            show={syncAppsInput}
+                                                            hide={() => { if(pathHasOpsmx){window.parent.postMessage({msg:'closeEvent'},'*')}
+                                                            ctx.navigation.goto('.', {syncApps: null}, {replace: true})}}
+                                                            apps={filteredApps} pathHasOpsmx={pathHasOpsmx}
+                                                        />}
                                                     <ObservableQuery>
                                                         {q => (
                                                             <DataLoader

diff --git a/ui/src/app/applications/components/applications-sync-panel/applications-sync-panel.tsx b/ui/src/app/applications/components/applications-sync-panel/applications-sync-panel.tsx
@@ -15,11 +15,17 @@ interface Progress {
     title: string;
 }
 
-export const ApplicationsSyncPanel = ({show, apps, hide}: {show: boolean; apps: models.Application[]; hide: () => void}) => {
+export const ApplicationsSyncPanel = ({show, apps, hide, pathHasOpsmx}: {show: boolean; apps: models.Application[]; hide: () => void, pathHasOpsmx:boolean}) => {
     const [form, setForm] = React.useState<FormApi>(null);
     const [progress, setProgress] = React.useState<Progress>(null);
     const getSelectedApps = (params: any) => apps.filter((_, i) => params['app/' + i]);
     const [isPending, setPending] = React.useState(false);
+
+    React.useEffect(()=>{
+        if (pathHasOpsmx) {
+            window.parent.postMessage({msg:'loadEvent'},'*')
+        }
+    },[])
     const syncHandler = (currentForm: FormApi, ctx: ContextApis, applications: models.Application[]) => {
         const formValues = currentForm.getFormState().values;
         const replaceChecked = formValues.syncOptions?.includes('Replace=true');
@@ -61,11 +67,13 @@ export const ApplicationsSyncPanel = ({show, apps, hide}: {show: boolean; apps:
                                 <Spinner show={isPending} style={{marginRight: '5px'}} />
                                 Sync
                             </button>{' '}
-                            <button onClick={() => hide()} className='argo-button argo-button--base-o'>
+                            {!pathHasOpsmx ? <button onClick={() => hide()} className='argo-button argo-button--base-o'>
                                 Cancel
-                            </button>
+                            </button> : ''}
                         </div>
-                    }>
+                    }
+                    pathHasOpsmx={pathHasOpsmx}
+                    >
                     <Form
                         defaultValues={{syncFlags: []}}
                         onSubmit={async (params: any) => {

diff --git a/ui/src/app/shared/components/layout/layout.tsx b/ui/src/app/shared/components/layout/layout.tsx
@@ -15,7 +15,7 @@ export interface LayoutProps {
 
 const checkUrlIncludesOpsmx = (param: string) => {
     let urlSplit = param?.split('/')
-    if(urlSplit && urlSplit[urlSplit.length-2] == 'opsmx' && urlSplit[urlSplit.length-1] == 'creation'){
+    if(urlSplit && urlSplit[urlSplit.length-2] == 'opsmx' && (urlSplit[urlSplit.length-1] == 'creation' || urlSplit[urlSplit.length-1] == 'opsmxsyncronizeApp')){
         return true;
     }
         return false;