fixes to perfherder and links

Author: camd

comparison-tools/README.md

@@ -138,7 +138,7 @@ Visual regression testing using Puppeteer to compare UI between environments.
 node ui_comparator.js [options]
 
 Options:
-  --local URL       Local base URL (default: http://localhost:5001)
+  --local URL       Local base URL (default: http://localhost:5000)
   --staging URL     Staging base URL (default: https://treeherder.allizom.org)
   --output DIR      Output directory for screenshots and reports
   --timeout MS      Page load timeout (default: 30000)
@@ -268,7 +268,7 @@ Options:
 When running locally via Docker Compose:
 
 - **Backend API**: `http://localhost:8000`
-- **Frontend**: `http://localhost:5001` (note: port may vary)
+- **Frontend**: `http://localhost:5000` (note: port may vary)
 - **Database**: `postgresql://postgres:mozilla1234@localhost:5499/treeherder`
 - **Redis**: `redis://localhost:6388`
 
@@ -304,8 +304,8 @@ When running locally via Docker Compose:
    # Check frontend port
    docker-compose ps frontend
 
-   # Frontend might be on port 5000 or 5001
-   curl http://localhost:5001
+   # Frontend might be on port 5000 or 5000
+   curl http://localhost:5000
    ```
 
 4. **Missing Python dependencies**:
@@ -325,7 +325,7 @@ When running locally via Docker Compose:
 If you encounter port conflicts, check your `docker-compose.yml` for port mappings:
 
 - Backend: `8000:8000`
-- Frontend: `5001:5000` (or `5000:5000`)
+- Frontend: `5000:5000` (or `5000:5000`)
 - PostgreSQL: `5499:5432` (or `5432:5432`)
 - Redis: `6388:6379` (or `6379:6379`)
 

comparison-tools/run_comparison.py

@@ -90,7 +90,7 @@ def run_ui_comparison(self):
                 "node",
                 str(self.tools_dir / "ui_comparator.js"),
                 "--local",
-                self.local_base_url.replace("8000", "5001"),  # Frontend port
+                self.local_base_url.replace("8000", "5000"),  # Frontend port
                 "--staging",
                 self.staging_base_url,
                 "--output",

comparison-tools/ui_comparator.js

@@ -11,7 +11,7 @@ const { createHash } = require('crypto');
 
 class TreeherderUIComparator {
   constructor(options = {}) {
-    this.localBaseUrl = options.localBaseUrl || 'http://localhost:5001';
+    this.localBaseUrl = options.localBaseUrl || 'http://localhost:5000';
     this.stagingBaseUrl =
       options.stagingBaseUrl || 'https://treeherder.allizom.org';
     this.outputDir = options.outputDir || './comparison-results';

fixbugs.md

@@ -2,7 +2,7 @@
 
 Think deeply. Create a plan to fix issues within the /perfherder route.
 
-The local running app is at <http://localhost:5001/perfherder>
+The local running app is at <http://localhost:5000/perfherder>
 
 Fixes needed for the /perfherder/graphs route:
 

treeherder-comparison-analysis.md

@@ -2,11 +2,11 @@
 
 ## Overview
 
-This document tracks differences found between the local development version of Treeherder (<http://localhost:5001>) and the staging version (<https://treeherder.allizom.org>) when comparing the Perfherder interface.
+This document tracks differences found between the local development version of Treeherder (<http://localhost:5000>) and the staging version (<https://treeherder.allizom.org>) when comparing the Perfherder interface.
 
 ## Comparison URLs
 
-- **Local**: <http://localhost:5001/perfherder/alerts?hideDwnToInv=1&page=1>
+- **Local**: <http://localhost:5000/perfherder/alerts?hideDwnToInv=1&page=1>
 - **Staging**: <https://treeherder.allizom.org/perfherder/alerts?hideDwnToInv=1&page=1>
 
 ## Navigation Tabs to Compare
@@ -132,7 +132,7 @@ Since no code issues were found, these are optional improvements for development
 ### 🔧 Infrastructure Configuration (Optional)
 
 1. **Backend Configuration**: The local setup is already correctly configured to use staging backend data
-2. **Port Configuration**: Successfully modified webpack config to use port 5001
+2. **Port Configuration**: Successfully modified webpack config to use port 5000
 3. **Development Server**: Running successfully with appropriate proxy settings
 
 ## Action Items

ui/css/perf.css

@@ -69,10 +69,11 @@ h1 {
 }
 
 .show-hide-check {
-  float: right;
-  position: static;
-  margin-right: 13px !important;
-  margin-top: -27px;
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  margin: 0;
+  cursor: pointer;
 }
 
 .graph-right-padding {

ui/css/treeherder-custom-styles.css

@@ -29,6 +29,11 @@ a {
   font-size: 1rem;
 }
 
+/* Remove underlines from links globally */
+a {
+  text-decoration: none;
+}
+
 /* Bootstrap 4 will not show <a> as a link style if it has no href.
    This adds that style back. */
 .link-style {

ui/perfherder/graphs/LegendCard.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Badge, Button, Form } from 'react-bootstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Badge, Button, Form, CloseButton } from 'react-bootstrap';
 
 import { getFrameworkName } from '../perf-helpers/helpers';
 import { graphColors } from '../perf-helpers/constants';
@@ -129,33 +127,27 @@ const LegendCard = ({
     }
   };
 
-  const subtitleStyle = 'p-0 mb-0 border-0 text-secondary text-left';
+  const subtitleStyle = 'p-0 mb-0 border-0 text-secondary text-start';
   const symbolType = series.symbol || ['circle', 'outline'];
 
   const { suite, platform, framework_id: frameworkId } = series;
   const framework = getFrameworkName(frameworks, frameworkId);
   const perfdocs = new Perfdocs(framework, suite, platform);
   const hasDocumentation = perfdocs.hasDocumentation();
   return (
-    <Form.Group className="ps-0 border">
-      <Button
-        className="close me-3 my-2 ms-2 bg-transparent"
+    <Form.Group className="ps-0 border position-relative">
+      <CloseButton
+        className="position-absolute top-0 end-0 m-2"
         onClick={removeTest}
         data-testid="remove-test-button"
-      >
-        <FontAwesomeIcon
-          className="pointer"
-          icon={faTimes}
-          size="xs"
-          title=""
-        />
-      </Button>
+        aria-label="Remove test"
+      />
       <div className={`${series.color[0]} graph-legend-card p-3`}>
         <Button
           variant="outline-link"
           className={`p-0 mb-0 pointer border-0 ${
             series.visible ? series.color[0] : 'text-muted'
-          } text-left`}
+          } text-start`}
           onClick={() => addTestData('addRelatedConfigs')}
           title="Add related configurations"
         >
@@ -213,7 +205,7 @@ const LegendCard = ({
         <div className="small">{`alert_threshold: ${series.alertThreshold}`}</div>
         <div className="small">{`${series.signatureHash.slice(0, 16)}...`}</div>
       </div>
-      <Form.Control
+      <Form.Check
         className="show-hide-check"
         type="checkbox"
         checked={series.visible}

webpack.config.js

@@ -120,7 +120,7 @@ const developmentConfig = {
 
   devServer: {
     host: '0.0.0.0',
-    port: process.env.PORT || 5001,
+    port: process.env.PORT || 5000,
     hot: true,
     historyApiFallback: true,
     open: true,

yarn.lock

@@ -1932,6 +1932,13 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
+"@swc/helpers@^0.5.0":
+  version "0.5.17"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.17.tgz#5a7be95ac0f0bf186e7e6e890e7a6f6cda6ce971"
+  integrity sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==
+  dependencies:
+    tslib "^2.8.0"
+
 "@testing-library/[email protected]":
   version "10.4.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.1.tgz#d444f8a889e9a46e9a3b4f3b88e0fcb3efb6cf95"