From fc7f415e4704a0253bc8e721f99a89bf3406a6e7 Mon Sep 17 00:00:00 2001
From: Stephen Muth <smuth4@users.noreply.github.com>
Date: Mon, 24 Mar 2025 12:24:11 -0400
Subject: [PATCH] Remove deprecated 'authority' references from tap form
 (#13850)

PR #13578 removes 'authority' from being a pseudo-k8s resource, but the
viz web `/tap` form still expects it to be present, issuing a
`/api/tps-reports?resource_type=authority&all_namespaces=true` call, which
returns 500 `cannot find Kubernetes canonical name from friendly name [authority]`,
breaking the form entirely.

This change removes all references to authorities in the form,
restoring functionality.

This was validated against a edge-25.3.3 linkerd/linkerd-viz install by
performing a successful tap with the new code in the web UI.

Fixes #13841

Signed-off-by: Stephen Muth <smuth4@gmail.com>
---
 web/app/js/components/Tap.jsx          | 10 ++-----
 web/app/js/components/TapQueryForm.jsx | 39 ++------------------------
 2 files changed, 4 insertions(+), 45 deletions(-)

diff --git a/web/app/js/components/Tap.jsx b/web/app/js/components/Tap.jsx
index e95f1f186..261ae9da3 100644
--- a/web/app/js/components/Tap.jsx
+++ b/web/app/js/components/Tap.jsx
@@ -34,7 +34,6 @@ class Tap extends React.Component {
       tapResultsById: this.tapResultsById,
       error: null,
       resourcesByNs: {},
-      authoritiesByNs: {},
       query: {
         resource: '',
         namespace: '',
@@ -43,7 +42,6 @@ class Tap extends React.Component {
         method: '',
         path: '',
         scheme: '',
-        authority: '',
         maxRps: '',
       },
       maxLinesToDisplay: 40,
@@ -269,15 +267,12 @@ class Tap extends React.Component {
     });
 
     const url = this.api.urlsForResourceNoStats('all');
-    const authorityUrl = this.api.urlsForResource('authority');
-    this.api.setCurrentRequests([this.api.fetchMetrics(url), this.api.fetchMetrics(authorityUrl)]);
+    this.api.setCurrentRequests([this.api.fetchMetrics(url)]);
     Promise.all(this.api.getCurrentPromises())
       .then(rsp => {
         const { resourcesByNs } = groupResourcesByNs(rsp[0]);
-        const { authoritiesByNs } = groupResourcesByNs(rsp[1]);
         this.setState({
           resourcesByNs,
-          authoritiesByNs,
           pendingRequests: false,
         });
       })
@@ -292,7 +287,7 @@ class Tap extends React.Component {
   };
 
   render() {
-    const { tapResultsById, tapRequestInProgress, tapIsClosing, resourcesByNs, authoritiesByNs, query, showTapEnabledWarning, error } = this.state;
+    const { tapResultsById, tapRequestInProgress, tapIsClosing, resourcesByNs, query, showTapEnabledWarning, error } = this.state;
     const tableRows = _orderBy(_values(tapResultsById), r => r.lastUpdated, 'desc');
 
     return (
@@ -308,7 +303,6 @@ class Tap extends React.Component {
           handleTapStop={this.handleTapStop}
           handleTapClear={this.handleTapClear}
           resourcesByNs={resourcesByNs}
-          authoritiesByNs={authoritiesByNs}
           updateQuery={this.updateQuery}
           currentQuery={query} />
         {showTapEnabledWarning &&
diff --git a/web/app/js/components/TapQueryForm.jsx b/web/app/js/components/TapQueryForm.jsx
index a6a185bfe..445ba301a 100644
--- a/web/app/js/components/TapQueryForm.jsx
+++ b/web/app/js/components/TapQueryForm.jsx
@@ -97,21 +97,17 @@ class TapQueryForm extends React.Component {
   static getDerivedStateFromProps(props, state) {
     if (!_isEqual(props.resourcesByNs, state.resourcesByNs)) {
       const resourcesByNs = props.resourcesByNs;
-      const authoritiesByNs = props.authoritiesByNs;
       const namespaces = Object.keys(resourcesByNs).sort();
       const resourceNames = getResourceList(resourcesByNs, state.query.namespace);
       const toResourceNames = getResourceList(resourcesByNs, state.query.toNamespace);
-      const authorities = getResourceList(authoritiesByNs, state.query.namespace);
 
       return _merge(state, {
         resourcesByNs,
-        authoritiesByNs,
         autocomplete: {
           namespace: namespaces,
           resource: resourceNames,
           toNamespace: namespaces,
           toResource: toResourceNames,
-          authority: authorities,
         },
       });
     } else {
@@ -133,20 +129,18 @@ class TapQueryForm extends React.Component {
     this.state = {
       query,
       advancedFormExpanded,
-      authoritiesByNs: {},
       resourcesByNs: {},
       autocomplete: {
         namespace: [],
         resource: [],
         toNamespace: [],
         toResource: [],
-        authority: [],
       },
     };
   }
 
   handleFormChange = (name, scopeResource) => {
-    const { query, autocomplete, resourcesByNs, authoritiesByNs } = this.state;
+    const { query, autocomplete, resourcesByNs } = this.state;
     const { updateQuery } = this.props;
 
     const state = {
@@ -154,7 +148,6 @@ class TapQueryForm extends React.Component {
       autocomplete,
     };
 
-    const shouldScopeAuthority = name === 'namespace';
     const newQueryValues = {};
 
     return event => {
@@ -169,10 +162,6 @@ class TapQueryForm extends React.Component {
         newQueryValues[scopeResource] = `namespace/${formVal}`;
       }
 
-      if (shouldScopeAuthority) {
-        state.autocomplete.authority = authoritiesByNs[formVal];
-      }
-
       this.setState(state);
       updateQuery(state.query);
       this.handleUrlUpdate(newQueryValues);
@@ -320,7 +309,7 @@ class TapQueryForm extends React.Component {
   };
 
   renderAdvancedTapFormContent() {
-    const { autocomplete, query } = this.state;
+    const { query } = this.state;
     const { classes } = this.props;
 
     return (
@@ -339,29 +328,6 @@ class TapQueryForm extends React.Component {
           </Grid>
         </Grid>
 
-        <Grid container spacing={3}>
-          <Grid item xs={6} md={3} classes={{ item: classes.formControlWrapper }}>
-            <FormControl className={classes.formControl}>
-              <InputLabel htmlFor="authority"><Trans>formAuthority</Trans></InputLabel>
-              <Select
-                value={query.authority}
-                onChange={this.handleFormChange('authority')}
-                inputProps={{ name: 'authority', id: 'authority' }}
-                className={classes.selectEmpty}>
-                {
-                  _map(autocomplete.authority, (d, i) => (
-                    <MenuItem key={`authority-${i}`} value={d}>{d}</MenuItem>
-                  ))
-                }
-              </Select>
-              <FormHelperText><Trans>formAuthorityHelpText</Trans></FormHelperText>
-            </FormControl>
-          </Grid>
-          <Grid item xs={6} md={3} className={classes.formControlWrapper}>
-            {this.renderTextInput(<Trans>formPath</Trans>, 'path', <Trans>formPathHelpText</Trans>)}
-          </Grid>
-        </Grid>
-
         <Grid container spacing={3}>
           <Grid item xs={6} md={3} className={classes.formControlWrapper}>
             {this.renderTextInput(<Trans>formScheme</Trans>, 'scheme', <Trans>formSchemeHelpText</Trans>)}
@@ -449,7 +415,6 @@ class TapQueryForm extends React.Component {
 }
 
 TapQueryForm.propTypes = {
-  authoritiesByNs: PropTypes.shape({}).isRequired,
   cmdName: PropTypes.string.isRequired,
   currentQuery: tapQueryPropType.isRequired,
   enableAdvancedForm: PropTypes.bool,