refactor(ui): use named functions for better tracing (#12062)

Signed-off-by: Anton Gilgur <[email protected]>

ui/src/app/app-router.tsx

@@ -43,7 +43,7 @@ const loginUrl = uiUrl('login');
 const timelineUrl = uiUrl('timeline');
 const reportsUrl = uiUrl('reports');
 
-export const AppRouter = ({popupManager, history, notificationsManager}: {popupManager: PopupManager; history: H.History; notificationsManager: NotificationsManager}) => {
+export function AppRouter({popupManager, history, notificationsManager}: {popupManager: PopupManager; history: H.History; notificationsManager: NotificationsManager}) {
     const [popupProps, setPopupProps] = useState<PopupProps>();
     const [modals, setModals] = useState<{string: boolean}>();
     const [version, setVersion] = useState<Version>();
@@ -186,4 +186,4 @@ export const AppRouter = ({popupManager, history, notificationsManager}: {popupM
             </Router>
         </>
     );
-};
+}

ui/src/app/app.tsx

@@ -7,7 +7,7 @@ import {ContextApis, Provider} from './shared/context';
 
 const history = createBrowserHistory();
 
-export const App = () => {
+export function App() {
     const popupManager: PopupManager = new PopupManager();
     const notificationsManager: NotificationsManager = new NotificationsManager();
     const navigationManager: NavigationManager = new NavigationManager(history);
@@ -24,4 +24,4 @@ export const App = () => {
             <AppRouter history={history} notificationsManager={notificationsManager} popupManager={popupManager} />
         </Provider>
     );
-};
+}

ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-creator.tsx

@@ -9,7 +9,7 @@ import {exampleClusterWorkflowTemplate} from '../../shared/examples';
 import {services} from '../../shared/services';
 import {ClusterWorkflowTemplateEditor} from './cluster-workflow-template-editor';
 
-export const ClusterWorkflowTemplateCreator = ({onCreate}: {onCreate: (workflow: ClusterWorkflowTemplate) => void}) => {
+export function ClusterWorkflowTemplateCreator({onCreate}: {onCreate: (workflow: ClusterWorkflowTemplate) => void}) {
     const [template, setTemplate] = useState<ClusterWorkflowTemplate>(exampleClusterWorkflowTemplate());
     const [error, setError] = useState<Error>();
     return (
@@ -34,4 +34,4 @@ export const ClusterWorkflowTemplateCreator = ({onCreate}: {onCreate: (workflow:
             </div>
         </>
     );
-};
+}

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

@@ -10,7 +10,7 @@ import {services} from '../../shared/services';
 import {Utils} from '../../shared/utils';
 import {CronWorkflowEditor} from './cron-workflow-editor';
 
-export const CronWorkflowCreator = ({onCreate, namespace}: {namespace: string; onCreate: (cronWorkflow: CronWorkflow) => void}) => {
+export function CronWorkflowCreator({onCreate, namespace}: {namespace: string; onCreate: (cronWorkflow: CronWorkflow) => void}) {
     const [cronWorkflow, setCronWorkflow] = useState<CronWorkflow>(exampleCronWorkflow(Utils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
@@ -35,4 +35,4 @@ export const CronWorkflowCreator = ({onCreate, namespace}: {namespace: string; o
             </p>
         </>
     );
-};
+}

ui/src/app/cron-workflows/components/cron-workflow-editor.tsx

@@ -9,7 +9,7 @@ import {ObjectEditor} from '../../shared/components/object-editor/object-editor'
 import {CronWorkflowSpecEditor} from './cron-workflow-spec-editior';
 import {CronWorkflowStatusViewer} from './cron-workflow-status-viewer';
 
-export const CronWorkflowEditor = ({
+export function CronWorkflowEditor({
     selectedTabKey,
     onTabSelected,
     onError,
@@ -21,7 +21,7 @@ export const CronWorkflowEditor = ({
     onError: (error: Error) => void;
     onTabSelected?: (tab: string) => void;
     selectedTabKey?: string;
-}) => {
+}) {
     return (
         <Tabs
             key='tabs'
@@ -82,4 +82,4 @@ export const CronWorkflowEditor = ({
             ]}
         />
     );
-};
+}

ui/src/app/cron-workflows/components/cron-workflow-spec-editior.tsx

@@ -5,7 +5,7 @@ import {NumberInput} from '../../shared/components/number-input';
 import {TextInput} from '../../shared/components/text-input';
 import {ScheduleValidator} from './schedule-validator';
 
-export const CronWorkflowSpecEditor = ({onChange, spec}: {spec: CronWorkflowSpec; onChange: (spec: CronWorkflowSpec) => void}) => {
+export function CronWorkflowSpecEditor({onChange, spec}: {spec: CronWorkflowSpec; onChange: (spec: CronWorkflowSpec) => void}) {
     return (
         <div className='white-box'>
             <div className='white-box__details'>
@@ -89,4 +89,4 @@ export const CronWorkflowSpecEditor = ({onChange, spec}: {spec: CronWorkflowSpec
             </div>
         </div>
     );
-};
+}

ui/src/app/cron-workflows/components/cron-workflow-status-viewer.tsx

@@ -6,7 +6,7 @@ import {ConditionsPanel} from '../../shared/conditions-panel';
 import {WorkflowLink} from '../../workflows/components/workflow-link';
 import {PrettySchedule} from './pretty-schedule';
 
-export const CronWorkflowStatusViewer = ({spec, status}: {spec: CronWorkflowSpec; status: CronWorkflowStatus}) => {
+export function CronWorkflowStatusViewer({spec, status}: {spec: CronWorkflowSpec; status: CronWorkflowStatus}) {
     if (status === null) {
         return null;
     }
@@ -34,7 +34,7 @@ export const CronWorkflowStatusViewer = ({spec, status}: {spec: CronWorkflowSpec
             </div>
         </div>
     );
-};
+}
 
 function getCronWorkflowActiveWorkflowList(active: kubernetes.ObjectReference[]) {
     return active.reverse().map(activeWf => <WorkflowLink key={activeWf.uid} namespace={activeWf.namespace} name={activeWf.name} />);

ui/src/app/event-flow/components/event-flow-details/build-graph.ts

@@ -6,18 +6,18 @@ import {icons as phaseIcons} from '../../../workflows/components/workflow-dag/ic
 import {icons} from './icons';
 import {ID} from './id';
 
-const status = (r: {status?: {conditions?: Condition[]}}) => {
+function status(r: {status?: {conditions?: Condition[]}}) {
     if (!r.status || !r.status.conditions) {
         return '';
     }
     if (!!r.status.conditions.find(c => c.status === 'False')) {
         return 'Failed';
     }
     return !!r.status.conditions.find(c => c.status !== 'True') ? 'Pending' : 'Ready';
-};
+}
 
 const numNodesToHide = 2;
-export const buildGraph = (eventSources: EventSource[], sensors: Sensor[], workflows: Workflow[], flow: {[p: string]: {count: number; timeout?: any}}, expanded: boolean) => {
+export function buildGraph(eventSources: EventSource[], sensors: Sensor[], workflows: Workflow[], flow: {[p: string]: {count: number; timeout?: any}}, expanded: boolean) {
     const edgeLabel = (id: Node, label?: string) => (!!flow[id] ? (label || '') + ' (' + flow[id].count + ')' : label);
     const edgeClassNames = (id: Node) => (!!flow[id] && flow[id].timeout ? 'flow' : '');
     const graph = new Graph();
@@ -110,4 +110,4 @@ export const buildGraph = (eventSources: EventSource[], sensors: Sensor[], workf
     });
 
     return graph;
-};
+}

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

@@ -9,7 +9,7 @@ import {services} from '../../shared/services';
 import {Utils} from '../../shared/utils';
 import {EventSourceEditor} from './event-source-editor';
 
-export const EventSourceCreator = ({onCreate, namespace}: {namespace: string; onCreate: (eventSource: EventSource) => void}) => {
+export function EventSourceCreator({onCreate, namespace}: {namespace: string; onCreate: (eventSource: EventSource) => void}) {
     const [eventSource, setEventSource] = useState<EventSource>(exampleEventSource(Utils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
@@ -36,4 +36,4 @@ export const EventSourceCreator = ({onCreate, namespace}: {namespace: string; on
             </p>
         </>
     );
-};
+}

ui/src/app/event-sources/components/event-source-details/event-source-details.tsx

@@ -17,7 +17,7 @@ import {EventsPanel} from '../../../workflows/components/events-panel';
 import {EventSourceEditor} from '../event-source-editor';
 import {EventSourceLogsViewer} from '../event-source-log-viewer';
 
-export const EventSourceDetails = ({history, location, match}: RouteComponentProps<any>) => {
+export function EventSourceDetails({history, location, match}: RouteComponentProps<any>) {
     // boiler-plate
     const {notifications, navigation, popup} = useContext(Context);
     const queryParams = new URLSearchParams(location.search);
@@ -172,4 +172,4 @@ export const EventSourceDetails = ({history, location, match}: RouteComponentPro
             </SlidingPanel>
         </Page>
     );
-};
+}

ui/src/app/event-sources/components/event-source-editor.tsx

@@ -5,7 +5,7 @@ import {EventSource} from '../../../models';
 import {MetadataEditor} from '../../shared/components/editors/metadata-editor';
 import {ObjectEditor} from '../../shared/components/object-editor/object-editor';
 
-export const EventSourceEditor = ({
+export function EventSourceEditor({
     onChange,
     onError,
     onTabSelected,
@@ -17,7 +17,7 @@ export const EventSourceEditor = ({
     onError: (error: Error) => void;
     onTabSelected?: (tab: string) => void;
     selectedTabKey?: string;
-}) => {
+}) {
     return (
         <Tabs
             key='tabs'
@@ -39,4 +39,4 @@ export const EventSourceEditor = ({
             ]}
         />
     );
-};
+}

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

@@ -26,7 +26,7 @@ import {EventSourceLogsViewer} from '../event-source-log-viewer';
 
 const learnMore = <a href='https://argoproj.github.io/argo-events/concepts/event_source/'>Learn more</a>;
 
-export const EventSourceList = ({match, location, history}: RouteComponentProps<any>) => {
+export function EventSourceList({match, location, history}: RouteComponentProps<any>) {
     // boiler-plate
     const queryParams = new URLSearchParams(location.search);
     const {navigation} = useContext(Context);
@@ -187,4 +187,4 @@ export const EventSourceList = ({match, location, history}: RouteComponentProps<
             </SlidingPanel>
         </Page>
     );
-};
+}

ui/src/app/event-sources/components/event-source-log-viewer.tsx

@@ -12,7 +12,7 @@ function identity<T>(value: T) {
     return () => value;
 }
 
-export const EventSourceLogsViewer = ({
+export function EventSourceLogsViewer({
     namespace,
     selectedEvent: selectedEvent,
     eventSource,
@@ -22,7 +22,7 @@ export const EventSourceLogsViewer = ({
     selectedEvent: string;
     eventSource: EventSource;
     onClick: (selectedNode: string) => void;
-}) => {
+}) {
     const [error, setError] = useState<Error>();
     const [logsObservable, setLogsObservable] = useState<Observable<string>>();
     const [logLoaded, setLogLoaded] = useState(false);
@@ -106,4 +106,4 @@ export const EventSourceLogsViewer = ({
             </div>
         </div>
     );
-};
+}

ui/src/app/help/components/help.tsx

@@ -4,7 +4,7 @@ import {uiUrl} from '../../shared/base';
 import {useCollectEvent} from '../../shared/components/use-collect-event';
 require('./help.scss');
 
-export const Help = () => {
+export function Help() {
     useCollectEvent('openedHelp');
     return (
         <Page title='Help'>
@@ -42,4 +42,4 @@ export const Help = () => {
             </div>
         </Page>
     );
-};
+}

ui/src/app/login/components/login.tsx

@@ -5,23 +5,24 @@ import {useCollectEvent} from '../../shared/components/use-collect-event';
 
 require('./login.scss');
 
-const logout = () => {
+function logout() {
     document.cookie = 'authorization=;Max-Age=0';
     document.location.reload();
-};
-const user = (token: string) => {
+}
+function user(token: string) {
     const path = uiUrl('');
     document.cookie = 'authorization=' + token + ';SameSite=Strict;path=' + path;
     document.location.href = path;
-};
-const getRedirect = (): string => {
+}
+function getRedirect(): string {
     const urlParams = new URLSearchParams(new URL(document.location.href).search);
     if (urlParams.has('redirect')) {
         return 'redirect=' + urlParams.get('redirect');
     }
     return 'redirect=' + window.location.origin + '/workflows';
-};
-export const Login = () => {
+}
+
+export function Login() {
     useCollectEvent('openedLogin');
     return (
         <Page title='Login' toolbar={{breadcrumbs: [{title: 'Login'}]}}>
@@ -77,4 +78,4 @@ export const Login = () => {
             </div>
         </Page>
     );
-};
+}

ui/src/app/modals/modal-switch.tsx

@@ -6,7 +6,7 @@ import {FirstTimeUserModal} from './first-time-user/first-time-user-modal';
 import {NewVersionModal} from './new-version/new-version-modal';
 import {majorMinor} from './version';
 
-export const ModalSwitch = ({version, modals}: {version: string; modals: {[key: string]: boolean}}) => {
+export function ModalSwitch({version, modals}: {version: string; modals: {[key: string]: boolean}}) {
     const localStorage = new ScopedLocalStorage('modal');
     const [ftu, setFtu] = useState<string>(localStorage.getItem('ftu', ''));
     useEffect(() => localStorage.setItem('ftu', ftu, ''), [ftu]);
@@ -32,4 +32,4 @@ export const ModalSwitch = ({version, modals}: {version: string; modals: {[key:
         return <NewVersionModal dismiss={() => setLastVersion(majorMinorVersion)} version={version} />;
     }
     return <></>;
-};
+}

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

@@ -8,7 +8,7 @@ import {ZeroState} from '../../../shared/components/zero-state';
 import {historyUrl} from '../../../shared/history';
 import {Utils} from '../../../shared/utils';
 
-export const PluginList = ({match, history}: RouteComponentProps<any>) => {
+export function PluginList({match, history}: RouteComponentProps<any>) {
     // state for URL and query parameters
     const [namespace] = useState(Utils.getNamespace(match.params.namespace) || '');
     useEffect(
@@ -39,4 +39,4 @@ export const PluginList = ({match, history}: RouteComponentProps<any>) => {
             </ZeroState>
         </Page>
     );
-};
+}

ui/src/app/sensors/components/sensor-details/sensor-details.tsx

@@ -18,7 +18,7 @@ import {SensorSidePanel} from '../sensor-side-panel';
 
 require('../../../workflows/components/workflow-details/workflow-details.scss');
 
-export const SensorDetails = ({match, location, history}: RouteComponentProps<any>) => {
+export function SensorDetails({match, location, history}: RouteComponentProps<any>) {
     // boiler-plate
     const {navigation, notifications, popup} = useContext(Context);
     const queryParams = new URLSearchParams(location.search);
@@ -141,4 +141,4 @@ export const SensorDetails = ({match, location, history}: RouteComponentProps<an
             )}
         </Page>
     );
-};
+}

ui/src/app/shared/components/graph/label.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export const formatLabel = (label: string) => {
+export function formatLabel(label: string) {
     if (!label) {
         return;
     }
@@ -54,4 +54,4 @@ export const formatLabel = (label: string) => {
             </tspan>
         </>
     );
-};
+}

ui/src/app/shared/components/graph/pretty-layout.ts

@@ -2,7 +2,7 @@ import * as dagre from 'dagre';
 import {Graph, Node} from './types';
 
 const minSize = 1;
-export const layoutGraphPretty = (graph: Graph, nodeSize: number, horizontal: boolean, hidden: (id: Node) => boolean) => {
+export function layoutGraphPretty(graph: Graph, nodeSize: number, horizontal: boolean, hidden: (id: Node) => boolean) {
     const gap = nodeSize * 1.25;
     const g = new dagre.graphlib.Graph();
     g.setGraph({rankdir: horizontal ? 'LR' : 'TB', ranksep: gap, nodesep: gap, edgesep: gap});
@@ -39,4 +39,4 @@ export const layoutGraphPretty = (graph: Graph, nodeSize: number, horizontal: bo
             });
         }
     });
-};
+}