refactor(ui): reorganize shared/utils.ts

ui/src/app/app-router.tsx

@@ -24,7 +24,7 @@ import {uiUrl} from './shared/base';
 import {ChatButton} from './shared/components/chat-button';
 import ErrorBoundary from './shared/components/error-boundary';
 import {services} from './shared/services';
-import {Utils} from './shared/utils';
+import * as nsUtils from './shared/namespaces';
 import userinfo from './userinfo';
 import {Widgets} from './widgets/widgets';
 import workflowEventBindings from './workflow-event-bindings';
@@ -59,21 +59,21 @@ export function AppRouter({popupManager, history, notificationsManager}: {popupM
             type: NotificationType.Error
         });
     };
-    Utils.onNamespaceChange = setNamespace;
+    nsUtils.setOnNamespaceChange(setNamespace);
     useEffect(() => {
         const sub = popupManager.popupProps.subscribe(setPopupProps);
         return () => sub.unsubscribe();
     }, [popupManager]);
     useEffect(() => {
         services.info.getUserInfo().then(userInfo => {
-            Utils.userNamespace = userInfo.serviceAccountNamespace;
-            setNamespace(Utils.currentNamespace);
+            nsUtils.setUserNamespace(userInfo.serviceAccountNamespace);
+            setNamespace(nsUtils.getCurrentNamespace());
         });
         services.info
             .getInfo()
             .then(info => {
-                Utils.managedNamespace = info.managedNamespace;
-                setNamespace(Utils.currentNamespace);
+                nsUtils.setManagedNamespace(info.managedNamespace);
+                setNamespace(nsUtils.getCurrentNamespace());
                 setModals(info.modals);
                 setNavBarBackgroundColor(info.navColor);
             })
@@ -82,7 +82,8 @@ export function AppRouter({popupManager, history, notificationsManager}: {popupM
             .catch(setError);
     }, []);
 
-    const namespaceSuffix = Utils.managedNamespace ? '' : '/' + (namespace || '');
+    const managedNamespace = nsUtils.getManagedNamespace();
+    const namespaceSuffix = managedNamespace ? '' : '/' + (namespace || '');
     return (
         <>
             {popupProps && <Popup {...popupProps} />}
@@ -179,7 +180,7 @@ export function AppRouter({popupManager, history, notificationsManager}: {popupM
                                 <Route exact={true} strict={true} path={apiDocsUrl} component={apiDocs.component} />
                                 <Route exact={true} strict={true} path={userInfoUrl} component={userinfo.component} />
                                 <Route exact={true} strict={true} path={loginUrl} component={login.component} />
-                                {Utils.managedNamespace && <Redirect to={workflowsUrl} />}
+                                {managedNamespace && <Redirect to={workflowsUrl} />}
                                 {namespace && <Redirect to={workflowsUrl + '/' + namespace} />}
                             </Switch>
                         </ErrorBoundary>

ui/src/app/cluster-workflow-templates/cluster-workflow-template-details.tsx

@@ -16,7 +16,7 @@ import {Context} from '../shared/context';
 import {historyUrl} from '../shared/history';
 import {services} from '../shared/services';
 import {useQueryParams} from '../shared/use-query-params';
-import {Utils} from '../shared/utils';
+import * as nsUtils from '../shared/namespaces';
 import {WorkflowDetailsList} from '../workflows/components/workflow-details-list/workflow-details-list';
 import {SubmitWorkflowPanel} from '../workflows/components/submit-workflow-panel';
 import {ClusterWorkflowTemplateEditor} from './cluster-workflow-template-editor';
@@ -73,7 +73,7 @@ export function ClusterWorkflowTemplateDetails({history, location, match}: Route
 
                 setWorkflows(workflowList.items);
                 setColumns(info.columns);
-                setNamespace(Utils.getNamespaceWithDefault(info.managedNamespace));
+                setNamespace(nsUtils.getNamespaceWithDefault(info.managedNamespace));
                 setError(null);
             } catch (err) {
                 setError(err);

ui/src/app/cron-workflows/cron-workflow-creator.tsx

@@ -8,11 +8,11 @@ import {ExampleManifests} from '../shared/components/example-manifests';
 import {UploadButton} from '../shared/components/upload-button';
 import {exampleCronWorkflow} from '../shared/examples';
 import {services} from '../shared/services';
-import {Utils} from '../shared/utils';
+import * as nsUtils from '../shared/namespaces';
 import {CronWorkflowEditor} from './cron-workflow-editor';
 
 export function CronWorkflowCreator({onCreate, namespace}: {namespace: string; onCreate: (cronWorkflow: CronWorkflow) => void}) {
-    const [cronWorkflow, setCronWorkflow] = useState<CronWorkflow>(exampleCronWorkflow(Utils.getNamespaceWithDefault(namespace)));
+    const [cronWorkflow, setCronWorkflow] = useState<CronWorkflow>(exampleCronWorkflow(nsUtils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -22,7 +22,7 @@ export function CronWorkflowCreator({onCreate, namespace}: {namespace: string; o
                     icon='plus'
                     onClick={async () => {
                         try {
-                            const newCronWorkflow = await services.cronWorkflows.create(cronWorkflow, Utils.getNamespaceWithDefault(cronWorkflow.metadata.namespace));
+                            const newCronWorkflow = await services.cronWorkflows.create(cronWorkflow, nsUtils.getNamespaceWithDefault(cronWorkflow.metadata.namespace));
                             onCreate(newCronWorkflow);
                         } catch (err) {
                             setError(err);

ui/src/app/cron-workflows/cron-workflow-list.tsx

@@ -21,7 +21,7 @@ import {Footnote} from '../shared/footnote';
 import {historyUrl} from '../shared/history';
 import {services} from '../shared/services';
 import {useQueryParams} from '../shared/use-query-params';
-import {Utils} from '../shared/utils';
+import * as nsUtils from '../shared/namespaces';
 import {CronWorkflowCreator} from './cron-workflow-creator';
 import {CronWorkflowFilters} from './cron-workflow-filters';
 import {PrettySchedule} from './pretty-schedule';
@@ -36,7 +36,7 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
     const {navigation} = useContext(Context);
 
     // state for URL, query, and label parameters
-    const [namespace, setNamespace] = useState<string>(Utils.getNamespace(match.params.namespace) || '');
+    const [namespace, setNamespace] = useState<string>(nsUtils.getNamespace(match.params.namespace) || '');
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
     const [labels, setLabels] = useState<string[]>([]);
     const [states, setStates] = useState(['Running', 'Suspended']); // check all by default
@@ -55,7 +55,7 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
     useEffect(
         () =>
             history.push(
-                historyUrl('cron-workflows' + (Utils.managedNamespace ? '' : '/{namespace}'), {
+                historyUrl('cron-workflows' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {
                     namespace,
                     sidePanel
                 })

ui/src/app/event-flow/event-flow-page.tsx

@@ -28,7 +28,7 @@ import {ListWatch} from '../shared/list-watch';
 import {RetryObservable} from '../shared/retry-observable';
 import {services} from '../shared/services';
 import {useQueryParams} from '../shared/use-query-params';
-import {Utils} from '../shared/utils';
+import * as nsUtils from '../shared/namespaces';
 import {EventsPanel} from '../workflows/components/events-panel';
 import {FullHeightLogsViewer} from '../workflows/components/workflow-logs-viewer/full-height-logs-viewer';
 import {buildGraph} from './build-graph';
@@ -43,7 +43,7 @@ export function EventFlowPage({history, location, match}: RouteComponentProps<an
     const queryParams = new URLSearchParams(location.search);
 
     // state for URL and query parameters
-    const [namespace, setNamespace] = useState(Utils.getNamespace(match.params.namespace) || '');
+    const [namespace, setNamespace] = useState(nsUtils.getNamespace(match.params.namespace) || '');
     const [showFlow, setShowFlow] = useState(queryParams.get('showFlow') === 'true');
     const [showWorkflows, setShowWorkflows] = useState(queryParams.get('showWorkflows') !== 'false');
     const [expanded, setExpanded] = useState(queryParams.get('expanded') === 'true');
@@ -64,7 +64,7 @@ export function EventFlowPage({history, location, match}: RouteComponentProps<an
     useEffect(
         () =>
             history.push(
-                historyUrl('event-flow' + (Utils.managedNamespace ? '' : '/{namespace}'), {
+                historyUrl('event-flow' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {
                     namespace,
                     showFlow,
                     showWorkflows,

ui/src/app/event-sources/event-source-creator.tsx

@@ -7,11 +7,11 @@ import {ErrorNotice} from '../shared/components/error-notice';
 import {UploadButton} from '../shared/components/upload-button';
 import {exampleEventSource} from '../shared/examples';
 import {services} from '../shared/services';
-import {Utils} from '../shared/utils';
+import * as nsUtils from '../shared/namespaces';
 import {EventSourceEditor} from './event-source-editor';
 
 export function EventSourceCreator({onCreate, namespace}: {namespace: string; onCreate: (eventSource: EventSource) => void}) {
-    const [eventSource, setEventSource] = useState<EventSource>(exampleEventSource(Utils.getNamespaceWithDefault(namespace)));
+    const [eventSource, setEventSource] = useState<EventSource>(exampleEventSource(nsUtils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -21,7 +21,7 @@ export function EventSourceCreator({onCreate, namespace}: {namespace: string; on
                     icon='plus'
                     onClick={async () => {
                         try {
-                            const newEventSource = await services.eventSource.create(eventSource, Utils.getNamespaceWithDefault(eventSource.metadata.namespace));
+                            const newEventSource = await services.eventSource.create(eventSource, nsUtils.getNamespaceWithDefault(eventSource.metadata.namespace));
                             onCreate(newEventSource);
                         } catch (err) {
                             setError(err);

ui/src/app/event-sources/event-source-list.tsx

@@ -8,7 +8,7 @@ import {Link, RouteComponentProps} from 'react-router-dom';
 
 import {EventSource, kubernetes} from '../../models';
 import {ID} from '../event-flow/id';
-import {Utils as EventsUtils} from '../sensors/utils';
+import {statusIconClasses} from '../sensors/utils';
 import {uiUrl} from '../shared/base';
 import {ErrorNotice} from '../shared/components/error-notice';
 import {Node} from '../shared/components/graph/types';
@@ -22,7 +22,7 @@ import {Footnote} from '../shared/footnote';
 import {historyUrl} from '../shared/history';
 import {services} from '../shared/services';
 import {useQueryParams} from '../shared/use-query-params';
-import {Utils} from '../shared/utils';
+import * as nsUtils from '../shared/namespaces';
 import {EventsPanel} from '../workflows/components/events-panel';
 import {EventSourceCreator} from './event-source-creator';
 import {EventSourceLogsViewer} from './event-source-log-viewer';
@@ -36,7 +36,7 @@ export function EventSourceList({match, location, history}: RouteComponentProps<
     const {navigation} = useContext(Context);
 
     // state for URL and query parameters
-    const [namespace, setNamespace] = useState(Utils.getNamespace(match.params.namespace) || '');
+    const [namespace, setNamespace] = useState(nsUtils.getNamespace(match.params.namespace) || '');
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
     const [selectedNode, setSelectedNode] = useState<Node>(queryParams.get('selectedNode'));
     const [tab, setTab] = useState<Node>(queryParams.get('tab'));
@@ -53,7 +53,7 @@ export function EventSourceList({match, location, history}: RouteComponentProps<
     useEffect(
         () =>
             history.push(
-                historyUrl('event-sources' + (Utils.managedNamespace ? '' : '/{namespace}'), {
+                historyUrl('event-sources' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {
                     namespace,
                     sidePanel,
                     selectedNode,
@@ -140,7 +140,7 @@ export function EventSourceList({match, location, history}: RouteComponentProps<
                                 key={`${es.metadata.namespace}/${es.metadata.name}`}
                                 to={uiUrl(`event-sources/${es.metadata.namespace}/${es.metadata.name}`)}>
                                 <div className='columns small-1'>
-                                    <i className={classNames('fa', EventsUtils.statusIconClasses(es.status != null ? es.status.conditions : [], 'fas fa-bolt'))} />
+                                    <i className={classNames('fa', statusIconClasses(es.status != null ? es.status.conditions : [], 'fas fa-bolt'))} />
                                 </div>
                                 <div className='columns small-4'>{es.metadata.name}</div>
                                 <div className='columns small-3'>{es.metadata.namespace}</div>

ui/src/app/plugins/plugin-list.tsx

@@ -7,15 +7,15 @@ import {uiUrl} from '../shared/base';
 import {useCollectEvent} from '../shared/use-collect-event';
 import {ZeroState} from '../shared/components/zero-state';
 import {historyUrl} from '../shared/history';
-import {Utils} from '../shared/utils';
+import * as nsUtils from '../shared/namespaces';
 
 export function PluginList({match, history}: RouteComponentProps<any>) {
     // state for URL and query parameters
-    const [namespace] = useState(Utils.getNamespace(match.params.namespace) || '');
+    const [namespace] = useState(nsUtils.getNamespace(match.params.namespace) || '');
     useEffect(
         () =>
             history.push(
-                historyUrl('plugins' + (Utils.managedNamespace ? '' : '/{namespace}'), {
+                historyUrl('plugins' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {
                     namespace
                 })
             ),

ui/src/app/reports/reports.tsx

@@ -15,7 +15,7 @@ import {Context} from '../shared/context';
 import {Footnote} from '../shared/footnote';
 import {historyUrl} from '../shared/history';
 import {services} from '../shared/services';
-import {Utils} from '../shared/utils';
+import * as nsUtils from '../shared/namespaces';
 import {ReportFilters} from './reports-filters';
 import {workflowsToChartData} from './workflows-to-chart-data';
 
@@ -31,15 +31,15 @@ export function Reports({match, location, history}: RouteComponentProps<any>) {
     const {navigation} = useContext(Context);
 
     // state for URL, query, and label parameters
-    const [namespace, setNamespace] = useState<string>(Utils.getNamespace(match.params.namespace) || '');
+    const [namespace, setNamespace] = useState<string>(nsUtils.getNamespace(match.params.namespace) || '');
     const [labels, setLabels] = useState((queryParams.get('labels') || '').split(',').filter(v => v !== ''));
     // internal state
     const [charts, setCharts] = useState<Chart[]>();
     const [error, setError] = useState<Error>();
 
     // save history
     useEffect(() => {
-        history.push(historyUrl('reports' + (Utils.managedNamespace ? '' : '/{namespace}'), {namespace, labels: labels.join(',')}));
+        history.push(historyUrl('reports' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {namespace, labels: labels.join(',')}));
     }, [namespace, labels]);
 
     async function onChange(newNamespace: string, newLabels: string[]) {

ui/src/app/sensors/sensor-creator.tsx

@@ -7,11 +7,11 @@ import {ErrorNotice} from '../shared/components/error-notice';
 import {UploadButton} from '../shared/components/upload-button';
 import {exampleSensor} from '../shared/examples';
 import {services} from '../shared/services';
-import {Utils} from '../shared/utils';
+import * as nsUtils from '../shared/namespaces';
 import {SensorEditor} from './sensor-editor';
 
 export function SensorCreator({namespace, onCreate}: {namespace: string; onCreate: (sensor: Sensor) => void}) {
-    const [sensor, setSensor] = useState<Sensor>(exampleSensor(Utils.getNamespaceWithDefault(namespace)));
+    const [sensor, setSensor] = useState<Sensor>(exampleSensor(nsUtils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -21,7 +21,7 @@ export function SensorCreator({namespace, onCreate}: {namespace: string; onCreat
                     icon='plus'
                     onClick={async () => {
                         try {
-                            const newSensor = await services.sensor.create(sensor, Utils.getNamespaceWithDefault(sensor.metadata.namespace));
+                            const newSensor = await services.sensor.create(sensor, nsUtils.getNamespaceWithDefault(sensor.metadata.namespace));
                             onCreate(newSensor);
                         } catch (err) {
                             setError(err);

ui/src/app/sensors/sensor-list.tsx

@@ -20,11 +20,12 @@ import {Footnote} from '../shared/footnote';
 import {historyUrl} from '../shared/history';
 import {services} from '../shared/services';
 import {useQueryParams} from '../shared/use-query-params';
-import {Utils} from '../shared/utils';
+import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
+import * as nsUtils from '../shared/namespaces';
 import {SensorCreator} from './sensor-creator';
 import {SensorSidePanel} from './sensor-side-panel';
-import {Utils as EventsUtils} from './utils';
-import useTimestamp, {TIMESTAMP_KEYS} from '../shared/use-timestamp';
+import {statusIconClasses} from './utils';
+
 
 const learnMore = <a href='https://argoproj.github.io/argo-events/concepts/sensor/'>Learn more</a>;
 
@@ -34,7 +35,7 @@ export function SensorList({match, location, history}: RouteComponentProps<any>)
     const {navigation} = useContext(Context);
 
     // state for URL and query parameters
-    const [namespace, setNamespace] = useState(Utils.getNamespace(match.params.namespace) || '');
+    const [namespace, setNamespace] = useState(nsUtils.getNamespace(match.params.namespace) || '');
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
     const [selectedNode, setSelectedNode] = useState<Node>(queryParams.get('selectedNode'));
 
@@ -49,7 +50,7 @@ export function SensorList({match, location, history}: RouteComponentProps<any>)
     useEffect(
         () =>
             history.push(
-                historyUrl('sensors' + (Utils.managedNamespace ? '' : '/{namespace}'), {
+                historyUrl('sensors' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {
                     namespace,
                     sidePanel,
                     selectedNode
@@ -135,10 +136,7 @@ export function SensorList({match, location, history}: RouteComponentProps<any>)
                                 key={`${s.metadata.namespace}/${s.metadata.name}`}
                                 to={uiUrl(`sensors/${s.metadata.namespace}/${s.metadata.name}`)}>
                                 <div className='columns small-1'>
-                                    <i
-                                        className={classNames('fa', EventsUtils.statusIconClasses(s.status != null ? s.status.conditions : [], 'fa-satellite-dish'))}
-                                        aria-hidden='true'
-                                    />
+                                    <i className={classNames('fa', statusIconClasses(s.status != null ? s.status.conditions : [], 'fa-satellite-dish'))} aria-hidden='true' />
                                 </div>
                                 <div className='columns small-4'>{s.metadata.name}</div>
                                 <div className='columns small-3'>{s.metadata.namespace}</div>