From 5896f7561b0ea3c9e4e556df68d9a702ed247881 Mon Sep 17 00:00:00 2001 From: Anton Gilgur <4970083+agilgur5@users.noreply.github.com> Date: Mon, 23 Oct 2023 18:39:17 -0400 Subject: [PATCH] refactor(ui): use named functions for better tracing (#12062) Signed-off-by: Anton Gilgur --- ui/src/app/app-router.tsx | 4 ++-- ui/src/app/app.tsx | 4 ++-- .../cluster-workflow-template-creator.tsx | 4 ++-- .../components/cron-workflow-creator.tsx | 4 ++-- .../components/cron-workflow-editor.tsx | 6 +++--- .../components/cron-workflow-spec-editior.tsx | 4 ++-- .../components/cron-workflow-status-viewer.tsx | 4 ++-- .../event-flow-details/build-graph.ts | 8 ++++---- .../components/event-source-creator.tsx | 4 ++-- .../event-source-details.tsx | 4 ++-- .../components/event-source-editor.tsx | 6 +++--- .../event-source-list/event-source-list.tsx | 4 ++-- .../components/event-source-log-viewer.tsx | 6 +++--- ui/src/app/help/components/help.tsx | 4 ++-- ui/src/app/login/components/login.tsx | 17 +++++++++-------- ui/src/app/modals/modal-switch.tsx | 4 ++-- .../components/plugin-list/plugin-list.tsx | 4 ++-- .../sensor-details/sensor-details.tsx | 4 ++-- ui/src/app/shared/components/graph/label.tsx | 4 ++-- .../shared/components/graph/pretty-layout.ts | 4 ++-- ui/src/app/userinfo/components/cli-help.tsx | 15 ++++++++------- ui/src/app/widgets/workflow-graph.tsx | 4 ++-- ui/src/app/widgets/workflow-status-badge.tsx | 4 ++-- .../workflow-event-bindings.tsx | 4 ++-- .../workflow-details/artifact-panel.tsx | 6 +++--- .../workflow-details/suspend-inputs.tsx | 4 ++-- .../json-logs-field-selector.tsx | 4 ++-- 27 files changed, 73 insertions(+), 71 deletions(-) diff --git a/ui/src/app/app-router.tsx b/ui/src/app/app-router.tsx index 52c8933681c1..f06e01917857 100644 --- a/ui/src/app/app-router.tsx +++ b/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(); const [modals, setModals] = useState<{string: boolean}>(); const [version, setVersion] = useState(); @@ -186,4 +186,4 @@ export const AppRouter = ({popupManager, history, notificationsManager}: {popupM ); -}; +} diff --git a/ui/src/app/app.tsx b/ui/src/app/app.tsx index 88abf735ce05..f4099e32beff 100644 --- a/ui/src/app/app.tsx +++ b/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 = () => { ); -}; +} diff --git a/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-creator.tsx b/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-creator.tsx index da8ab460c97a..dacaa334275a 100644 --- a/ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-creator.tsx +++ b/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(exampleClusterWorkflowTemplate()); const [error, setError] = useState(); return ( @@ -34,4 +34,4 @@ export const ClusterWorkflowTemplateCreator = ({onCreate}: {onCreate: (workflow: ); -}; +} diff --git a/ui/src/app/cron-workflows/components/cron-workflow-creator.tsx b/ui/src/app/cron-workflows/components/cron-workflow-creator.tsx index 5415ca8005e1..8a31ed782ad0 100644 --- a/ui/src/app/cron-workflows/components/cron-workflow-creator.tsx +++ b/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(exampleCronWorkflow(Utils.getNamespaceWithDefault(namespace))); const [error, setError] = useState(); return ( @@ -35,4 +35,4 @@ export const CronWorkflowCreator = ({onCreate, namespace}: {namespace: string; o

); -}; +} diff --git a/ui/src/app/cron-workflows/components/cron-workflow-editor.tsx b/ui/src/app/cron-workflows/components/cron-workflow-editor.tsx index caa0b8169a31..854471a9938e 100644 --- a/ui/src/app/cron-workflows/components/cron-workflow-editor.tsx +++ b/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 ( ); -}; +} diff --git a/ui/src/app/cron-workflows/components/cron-workflow-spec-editior.tsx b/ui/src/app/cron-workflows/components/cron-workflow-spec-editior.tsx index 5f5b00e7649b..c7f920c5295f 100644 --- a/ui/src/app/cron-workflows/components/cron-workflow-spec-editior.tsx +++ b/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 (
@@ -89,4 +89,4 @@ export const CronWorkflowSpecEditor = ({onChange, spec}: {spec: CronWorkflowSpec
); -}; +} diff --git a/ui/src/app/cron-workflows/components/cron-workflow-status-viewer.tsx b/ui/src/app/cron-workflows/components/cron-workflow-status-viewer.tsx index 3e75ec588e60..3812afea01e6 100644 --- a/ui/src/app/cron-workflows/components/cron-workflow-status-viewer.tsx +++ b/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 ); -}; +} function getCronWorkflowActiveWorkflowList(active: kubernetes.ObjectReference[]) { return active.reverse().map(activeWf => ); diff --git a/ui/src/app/event-flow/components/event-flow-details/build-graph.ts b/ui/src/app/event-flow/components/event-flow-details/build-graph.ts index 7293480af9fe..c8c04fc8ef21 100644 --- a/ui/src/app/event-flow/components/event-flow-details/build-graph.ts +++ b/ui/src/app/event-flow/components/event-flow-details/build-graph.ts @@ -6,7 +6,7 @@ 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 ''; } @@ -14,10 +14,10 @@ const status = (r: {status?: {conditions?: Condition[]}}) => { 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; -}; +} diff --git a/ui/src/app/event-sources/components/event-source-creator.tsx b/ui/src/app/event-sources/components/event-source-creator.tsx index 8af0a236cdce..b038c0e32b69 100644 --- a/ui/src/app/event-sources/components/event-source-creator.tsx +++ b/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(exampleEventSource(Utils.getNamespaceWithDefault(namespace))); const [error, setError] = useState(); return ( @@ -36,4 +36,4 @@ export const EventSourceCreator = ({onCreate, namespace}: {namespace: string; on

); -}; +} diff --git a/ui/src/app/event-sources/components/event-source-details/event-source-details.tsx b/ui/src/app/event-sources/components/event-source-details/event-source-details.tsx index 9e712e9cb70a..9bc89576d6a0 100644 --- a/ui/src/app/event-sources/components/event-source-details/event-source-details.tsx +++ b/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) => { +export function EventSourceDetails({history, location, match}: RouteComponentProps) { // 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 ); -}; +} diff --git a/ui/src/app/event-sources/components/event-source-editor.tsx b/ui/src/app/event-sources/components/event-source-editor.tsx index 62ffa99ebaf0..af1dc3fa1556 100644 --- a/ui/src/app/event-sources/components/event-source-editor.tsx +++ b/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 ( ); -}; +} diff --git a/ui/src/app/event-sources/components/event-source-list/event-source-list.tsx b/ui/src/app/event-sources/components/event-source-list/event-source-list.tsx index 3ee05328b996..f988cacc569a 100644 --- a/ui/src/app/event-sources/components/event-source-list/event-source-list.tsx +++ b/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 = Learn more; -export const EventSourceList = ({match, location, history}: RouteComponentProps) => { +export function EventSourceList({match, location, history}: RouteComponentProps) { // boiler-plate const queryParams = new URLSearchParams(location.search); const {navigation} = useContext(Context); @@ -187,4 +187,4 @@ export const EventSourceList = ({match, location, history}: RouteComponentProps< ); -}; +} diff --git a/ui/src/app/event-sources/components/event-source-log-viewer.tsx b/ui/src/app/event-sources/components/event-source-log-viewer.tsx index 8f0dd4777b3f..7b45c0a22990 100644 --- a/ui/src/app/event-sources/components/event-source-log-viewer.tsx +++ b/ui/src/app/event-sources/components/event-source-log-viewer.tsx @@ -12,7 +12,7 @@ function identity(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(); const [logsObservable, setLogsObservable] = useState>(); const [logLoaded, setLogLoaded] = useState(false); @@ -106,4 +106,4 @@ export const EventSourceLogsViewer = ({ ); -}; +} diff --git a/ui/src/app/help/components/help.tsx b/ui/src/app/help/components/help.tsx index 714735631a66..c6a6a7be4913 100644 --- a/ui/src/app/help/components/help.tsx +++ b/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 ( @@ -42,4 +42,4 @@ export const Help = () => { ); -}; +} diff --git a/ui/src/app/login/components/login.tsx b/ui/src/app/login/components/login.tsx index 76eff13101a1..fd217c208dee 100644 --- a/ui/src/app/login/components/login.tsx +++ b/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 ( @@ -77,4 +78,4 @@ export const Login = () => { ); -}; +} diff --git a/ui/src/app/modals/modal-switch.tsx b/ui/src/app/modals/modal-switch.tsx index 1aad3c56d58e..3a132e6d0cb1 100644 --- a/ui/src/app/modals/modal-switch.tsx +++ b/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(localStorage.getItem('ftu', '')); useEffect(() => localStorage.setItem('ftu', ftu, ''), [ftu]); @@ -32,4 +32,4 @@ export const ModalSwitch = ({version, modals}: {version: string; modals: {[key: return setLastVersion(majorMinorVersion)} version={version} />; } return <>; -}; +} diff --git a/ui/src/app/plugins/components/plugin-list/plugin-list.tsx b/ui/src/app/plugins/components/plugin-list/plugin-list.tsx index b0bfe33c8e85..5cb50ad7cf1e 100644 --- a/ui/src/app/plugins/components/plugin-list/plugin-list.tsx +++ b/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) => { +export function PluginList({match, history}: RouteComponentProps) { // 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) => { ); -}; +} diff --git a/ui/src/app/sensors/components/sensor-details/sensor-details.tsx b/ui/src/app/sensors/components/sensor-details/sensor-details.tsx index f712d7423c1d..5a8d3fd4e1da 100644 --- a/ui/src/app/sensors/components/sensor-details/sensor-details.tsx +++ b/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) => { +export function SensorDetails({match, location, history}: RouteComponentProps) { // 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 ); -}; +} diff --git a/ui/src/app/shared/components/graph/label.tsx b/ui/src/app/shared/components/graph/label.tsx index b40e44115c0a..5d5a34127805 100644 --- a/ui/src/app/shared/components/graph/label.tsx +++ b/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) => { ); -}; +} diff --git a/ui/src/app/shared/components/graph/pretty-layout.ts b/ui/src/app/shared/components/graph/pretty-layout.ts index 3573d8819edc..3aa3681b488c 100644 --- a/ui/src/app/shared/components/graph/pretty-layout.ts +++ b/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 }); } }); -}; +} diff --git a/ui/src/app/userinfo/components/cli-help.tsx b/ui/src/app/userinfo/components/cli-help.tsx index 9122b297e9fc..2304951cfd15 100644 --- a/ui/src/app/userinfo/components/cli-help.tsx +++ b/ui/src/app/userinfo/components/cli-help.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import {createRef, useState} from 'react'; + import {Notice} from '../../shared/components/notice'; -export const CliHelp = () => { +export function CliHelp() { const argoSecure = document.location.protocol === 'https:'; const argoBaseHref = document .getElementsByTagName('base')[0] @@ -15,15 +16,15 @@ export const CliHelp = () => { .find(x => x.startsWith('authorization=')) || '' ).replace(/^authorization="?(.*?)"?$/, '$1'); - const text = `export ARGO_SERVER='${document.location.hostname}:${document.location.port || (argoSecure ? 443 : 80)}' -export ARGO_HTTP1=true + const text = `export ARGO_SERVER='${document.location.hostname}:${document.location.port || (argoSecure ? 443 : 80)}' +export ARGO_HTTP1=true export ARGO_SECURE=${argoSecure ? 'true' : 'false'} export ARGO_BASE_HREF=${argoBaseHref} -export ARGO_TOKEN='${argoToken}' -export ARGO_NAMESPACE=argo ;# or whatever your namespace is +export ARGO_TOKEN='${argoToken}' +export ARGO_NAMESPACE=argo ;# or whatever your namespace is export KUBECONFIG=/dev/null ;# recommended -# check it works: +# check it works: argo list`; const [copied, setCopied] = useState(false); @@ -61,4 +62,4 @@ argo list`;