feat: support /rollouts/:namespace?q=... and /rollout/:namespace/:name (

#1902) Signed-off-by: Simon Ninon <[email protected]>
argoproj · Jun 30, 2022 · 03b7f5e · 03b7f5e
1 parent 935a825
commit 03b7f5e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/USERS.md b/USERS.md
@@ -19,6 +19,7 @@ Organizations below are **officially** using Argo Rollouts. Please send a PR wit
 1. [New Relic](https://newrelic.com/)
 1. [Nitro](https://www.gonitro.com)
 1. [Nozzle](https://nozzle.io)
+1. [PagerDuty](https://www.pagerduty.com/)
 1. [PayPal](https://www.paypal.com/)
 1. [PayPay](https://paypay.ne.jp/)
 1. [Quipper](https://www.quipper.com/)

diff --git a/ui/src/app/App.tsx b/ui/src/app/App.tsx
@@ -92,7 +92,7 @@ const App = () => {
                             <Switch>
                                 <Page
                                     exact
-                                    path='/'
+                                    path='/:namespace?'
                                     component={<RolloutsList />}
                                     shortcuts={[
                                         {key: '/', description: 'Search'},
@@ -102,7 +102,7 @@ const App = () => {
                                     ]}
                                     changeNamespace={changeNamespace}
                                 />
-                                <Page path='/rollout/:name' component={<Rollout />} changeNamespace={changeNamespace} />
+                                <Page path='/rollout/:namespace?/:name' component={<Rollout />} changeNamespace={changeNamespace} />
                             </Switch>
                         </Router>
                     </KeybindingProvider>
@@ -112,4 +112,4 @@ const App = () => {
     );
 };
 
-export default App;
+export default App;
diff --git a/ui/src/app/components/header/header.tsx b/ui/src/app/components/header/header.tsx
@@ -13,6 +13,7 @@ export const Header = (props: {pageHasShortcuts: boolean; changeNamespace: (val:
     const history = useHistory();
     const namespaceInfo = React.useContext(NamespaceContext);
     const {name} = useParams<{name: string}>();
+    const {namespace} = useParams<{namespace: string}>();
     const api = React.useContext(RolloutAPIContext);
     const [version, setVersion] = React.useState('v?');
     const [nsInput, setNsInput] = React.useState(namespaceInfo.namespace);
@@ -23,6 +24,12 @@ export const Header = (props: {pageHasShortcuts: boolean; changeNamespace: (val:
         };
         getVersion();
     }, []);
+    React.useEffect(() => {
+      if (namespace && namespace != namespaceInfo.namespace) {
+        props.changeNamespace(namespace);
+        setNsInput(namespace);
+      }
+    }, []);
     return (
         <GenericHeader>
             <Link to='/'>
@@ -54,8 +61,9 @@ export const Header = (props: {pageHasShortcuts: boolean; changeNamespace: (val:
                             placeholder='Namespace'
                             onChange={(el) => setNsInput(el.target.value)}
                             onItemClick={(val) => {
-                                props.changeNamespace(val ? val : nsInput);
-                                history.push(`/`);
+                                const selectedNamespace = val ? val : nsInput;
+                                props.changeNamespace(selectedNamespace);
+                                history.push(`/${selectedNamespace}`);
                             }}
                             value={nsInput}
                         />
@@ -65,4 +73,4 @@ export const Header = (props: {pageHasShortcuts: boolean; changeNamespace: (val:
             </div>
         </GenericHeader>
     );
-};
+};
diff --git a/ui/src/app/components/rollouts-list/rollouts-list.tsx b/ui/src/app/components/rollouts-list/rollouts-list.tsx
@@ -29,6 +29,12 @@ export const RolloutsList = () => {
     const [filteredRollouts, setFilteredRollouts] = React.useState(rollouts);
     const [pos, nav, reset] = useNav(filteredRollouts.length);
     const [searchString, setSearchString, searchInput] = useAutocomplete('');
+    const searchParam = new URLSearchParams(window.location.search).get('q');
+    React.useEffect(() => {
+      if (searchParam && searchParam != searchString) {
+        setSearchString(searchParam);
+      }
+    }, []);
 
     const {useKeybinding, keybindingState} = React.useContext(KeybindingContext);
 
@@ -81,6 +87,9 @@ export const RolloutsList = () => {
         if ((filtered || []).length > 0) {
             setFilteredRollouts(filtered);
         }
+        if (searchString) {
+          history.replace(`/${namespaceCtx.namespace}?q=${searchString}`);
+        }
     }, [searchString, rollouts]);
 
     const namespaceCtx = React.useContext(NamespaceContext);
@@ -97,7 +106,7 @@ export const RolloutsList = () => {
                                     className='rollouts-list__search'
                                     placeholder='Search...'
                                     style={{marginBottom: '1.5em'}}
-                                    onItemClick={(item) => history.push(`/rollout/${item}`)}
+                                    onItemClick={(item) => history.push(`/rollout/${namespaceCtx.namespace}/${item}`)}
                                     icon='fa-search'
                                     {...searchInput}
                                 />
@@ -176,7 +185,7 @@ export const RolloutWidget = (props: {rollout: RolloutInfo; deselect: () => void
 
     return (
         <EffectDiv className={`rollouts-list__widget ${props.selected ? 'rollouts-list__widget--selected' : ''}`} innerref={ref}>
-            <Link to={`/rollout/${rollout.objectMeta?.name}`} className='rollouts-list__widget__container'>
+            <Link to={`/rollout/${rollout.objectMeta?.namespace}/${rollout.objectMeta?.name}`} className='rollouts-list__widget__container'>
                 <WidgetHeader
                     rollout={rollout}
                     refresh={() => {