feat: sort import modules

Author: PeterYurkovich

README.md

@@ -7,7 +7,7 @@ This plugin enables frontend UI based on feature flags passed to the backend. Th
 Feature flags should be added to the Feature enum [here](pkg/server/server.go) and to the useFeatures hook [here](web/src/shared/hooks/useFeatures.ts). Whenever a feature is enabled, a set of related feature extension points is included in the plugin-manifest.json served by the backend. These feature extension points are created through the use of [json-patches](https://datatracker.ietf.org/doc/html/rfc6902), such as the `acm-alerting` patch [here](config/acm-alerting.patch.json). The server looks for a patch in the format of `{feature-flag-name}.patch.json` to apply. Some feature flags, such as `acm-alerting` require other flags to be set such as `alertmanager` and `thanos-querier` to instruct the backend how to communicate with the observability signals they utilize
 
 | Feature           | OCP Version |
-|-------------------|-------------|
+| ----------------- | ----------- |
 | acm-alerting      | 4.14+       |
 | perses-dashboards | 4.14+       |
 | incidents         | 4.17+       |
@@ -16,7 +16,6 @@ Feature flags should be added to the Feature enum [here](pkg/server/server.go) a
 | metrics           | 5.0+        |
 | targets           | 5.0+        |
 
-
 ## monitoring-plugin
 
 This section describes knowledge helpful to development of the default monitoring-plugin.
@@ -69,8 +68,8 @@ Install the [devspace](https://www.devspace.sh/docs/getting-started/installation
 
 1. Install the frontend dependencies running `make install-frontend`.
 2. Start the frontend `make start-frontend`.
-4. Select the namespace the monitoring-plugin is located in `devspace use namespace openshift-monitoring`.
-5. In a different terminal start the devspace sync `devspace dev`.
+3. Select the namespace the monitoring-plugin is located in `devspace use namespace openshift-monitoring`.
+4. In a different terminal start the devspace sync `devspace dev`.
 
 When running the `devspace dev` command, the pipeline will run the `scale_down_cmo` function to prevent CMO from fighting over control of the pod. After CMO has been scaled down, devspace will "take over" the monitoring-plugin pod, grabbing all of the certificates and backend binary and configuration to run in the devspace pod. The backend will stay the same as what is built in the Dockerfile.devspace file, only the frontend changes will be reflected live in cluster.
 
@@ -82,6 +81,18 @@ After development you can run `devspace purge` which will cleanup and then call
 
 ### Local Development
 
+#### Editor configuration
+
+Some of the lint rules for typescript which we have enabled in our codebase are not supported by prettier and need to be solved by running `eslint --fix` You can configure your code editor to perform this on save/format although some setup is needed:
+
+- zed: https://zed.dev/docs/languages/javascript#eslint
+- vscode: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
+
+We recommend running the following eslint rules when formatting:
+
+- `import/order`
+- `sort-imports`
+
 #### Dependencies
 
 1. [Node.js 22+](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) are required
@@ -121,12 +132,13 @@ The application will be running at [localhost:9000](http://localhost:9000/).
 ## monitoring-console-plugin (mcp)
 
 ### Dependencies
+
 1. [Local Development Dependencies](README#Dependencies)
 2. [yq](https://github.com/mikefarah/yq) for acm deployment
 3. sed ([gnu-sed](https://formulae.brew.sh/formula/gnu-sed) for mac, with sed being aliased to that gnu-sed)
 
-
 ### Building an image
+
 Images for the mcp can be built by running the following command. Due to the limitation of linux/amd64 image builds on Apple Silicon Macs's, some of the changes are run locally and not just in the Dockerfiles. If you are on a Mac, it is not suggested to cancel the exection of this scipt part way through
 
 ```bash
@@ -153,7 +165,7 @@ Since the store for the `monitoring-plugin` is stored in the `openshift/console`
 # Login to an OpenShift cluster
 $ oc login <clusterAddress> -u <username> -p <password>
 
-# Start podman (or Docker) - Linux machines can skip this part 
+# Start podman (or Docker) - Linux machines can skip this part
 $ podman machine init
 $ podman machine start
 
@@ -173,6 +185,7 @@ $ make start-coo-backend
 `make start-coo-backend` will inject the `alerting,targets,legacy-dashboards,metrics,incidents,perses-dashboards` features.
 
 #### Local Development with Perses Proxy
+
 The bridge script `start-console.sh` is configured to proxy to a local Perses instance running at port `:8080`. To run the local Perses instance you will need to clone the [perses/perses](https://github.com/perses/perses) repository and follow the start up instructions in [ui/README.md](https://github.com/perses/perses/blob/63601751674403f626d1dea3dec168bdad0ef1c7/ui/README.md) :
 
 ```
@@ -189,16 +202,18 @@ $ ./scripts/api_backend_dev.sh
 # Lastly navigate to http://localhost:8080/ to see Perses app running
 ```
 
-##### Install COO && Perses Datasource && Perses Sample Dashboard 
-1. Install COO through the OpenShift UI > OperatorHub > Cluster Observability Operator 
-2. Install UIPlugin > monitoring 
+##### Install COO && Perses Datasource && Perses Sample Dashboard
+
+1. Install COO through the OpenShift UI > OperatorHub > Cluster Observability Operator
+2. Install UIPlugin > monitoring
 3. oc apply -f <PERSES_DATASOURCE_YAML>
-   - See sample yaml [here](https://github.com/observability-ui/development-tools/blob/main/monitoring-plugin/monitoring-console-plugin/perses/thanos-querier-datasource.yaml) 
+   - See sample yaml [here](https://github.com/observability-ui/development-tools/blob/main/monitoring-plugin/monitoring-console-plugin/perses/thanos-querier-datasource.yaml)
 4. oc apply -f <PERSES_DASHBOARD_YAML>
-   - See sample yaml  [here](https://github.com/observability-ui/development-tools/blob/main/monitoring-plugin/monitoring-console-plugin/perses/perses-dashboard.yaml)
+   - See sample yaml [here](https://github.com/observability-ui/development-tools/blob/main/monitoring-plugin/monitoring-console-plugin/perses/perses-dashboard.yaml)
+
+##### Port forward Perses Datasource
 
-##### Port forward Perses Datasource 
-To use the PERSES_DATASOURCE you deployed above, you'll need to forward it to your local machine then proxy it using the local Perses Instance. 
+To use the PERSES_DATASOURCE you deployed above, you'll need to forward it to your local machine then proxy it using the local Perses Instance.
 
 ```
 # Forward cluster Prometheus Instance to localhost:9090

web/cypress.config.ts

@@ -4,7 +4,10 @@ import * as console from 'console';
 import * as path from 'path';
 import registerCypressGrep from '@cypress/grep/src/plugin';
 import { DefinePlugin, NormalModuleReplacementPlugin } from 'webpack';
-import { writeBenchmarkReport, injectBenchmarksIntoMochawesome } from './cypress/plugins/benchmark-reporter';
+import {
+  writeBenchmarkReport,
+  injectBenchmarksIntoMochawesome,
+} from './cypress/plugins/benchmark-reporter';
 
 const getLoginCredentials = (index: number): { username: string; password: string } => {
   const users = (process.env.CYPRESS_LOGIN_USERS || '').split(',').filter(Boolean);
@@ -161,7 +164,6 @@ export default defineConfig({
         },
 
         writeBenchmarkReport,
-
       });
       on('after:spec', (spec: Cypress.Spec, results: CypressCommandLine.RunResult) => {
         if (results && results.video) {
@@ -199,6 +201,7 @@ export default defineConfig({
         resolve: {
           extensions: ['.ts', '.tsx', '.js', '.jsx'],
           alias: {
+            '@': path.resolve(__dirname, 'src'),
             '@perses-dev/plugin-system': path.resolve(
               __dirname,
               'cypress/component/mocks/perses-plugin-system.tsx',

web/cypress/support/incidents_prometheus_query_mocks/mock-generators.ts

@@ -1,6 +1,6 @@
 // Mock data generators for Prometheus mocking system
 import { IncidentDefinition, PrometheusResult } from './types';
-import { severityToValue, parseQueryLabels } from './utils';
+import { parseQueryLabels, severityToValue } from './utils';
 import { nowInClusterTimezone } from './utils';
 import { NEW_METRIC_NAME, OLD_METRIC_NAME } from './prometheus-mocks';
 

web/cypress/support/incidents_prometheus_query_mocks/prometheus-mocks.ts

@@ -1,5 +1,5 @@
-import { IncidentDefinition, PrometheusResponse, IncidentScenarioFixture } from './types';
-import { createIncidentMock, createAlertDetailsMock } from './mock-generators';
+import { IncidentDefinition, IncidentScenarioFixture, PrometheusResponse } from './types';
+import { createAlertDetailsMock, createIncidentMock } from './mock-generators';
 import { convertFixtureToIncidents, parseYamlFixture } from './schema/fixture-converter';
 import { incidentsPage } from '../../views/incidents-page';
 

web/cypress/support/incidents_prometheus_query_mocks/schema/fixture-converter.ts

@@ -1,10 +1,10 @@
 import {
   IncidentDefinition,
-  IncidentTimeline,
-  IncidentScenarioFixture,
   IncidentFixture,
+  IncidentScenarioFixture,
+  IncidentTimeline,
 } from '../types';
-import { parseDuration, nowInClusterTimezone } from '../utils';
+import { nowInClusterTimezone, parseDuration } from '../utils';
 import { validateAndParseYamlFixture } from './schema-validator';
 
 /**

web/cypress/support/monitoring/01.reg_alerts.cy.ts

@@ -11,9 +11,9 @@ import {
   AlertingRulesAlertState,
   MainTagState,
   Severity,
+  SilenceComment,
   SilenceState,
   Source,
-  SilenceComment,
   WatchdogAlert,
 } from '../../fixtures/monitoring/constants';
 import { FilterOUIAIDs } from '@/shared/constants/data-test';

web/cypress/support/monitoring/03.reg_legacy_dashboards.cy.ts

@@ -5,7 +5,7 @@ import {
   MetricsPageQueryInput,
   WatchdogAlert,
 } from '../../fixtures/monitoring/constants';
-import { Classes, LegacyDashboardPageTestIDs, DataTestIDs } from '@/shared/constants/data-test';
+import { Classes, DataTestIDs, LegacyDashboardPageTestIDs } from '@/shared/constants/data-test';
 import { metricsPage } from '../../views/metrics';
 import { alertingRuleDetailsPage } from '../../views/alerting-rule-details-page';
 import { alerts } from '../../fixtures/monitoring/alert';

web/cypress/support/monitoring/04.reg_alerts_namespace.cy.ts

@@ -11,9 +11,9 @@ import {
   AlertingRulesAlertState,
   MainTagState,
   Severity,
+  SilenceComment,
   SilenceState,
   Source,
-  SilenceComment,
   WatchdogAlert,
 } from '../../fixtures/monitoring/constants';
 import { FilterOUIAIDs } from '@/shared/constants/data-test';

web/cypress/support/monitoring/05.reg_metrics_namespace_1.cy.ts

@@ -1,10 +1,10 @@
 import { metricsPage } from '../../views/metrics';
 import { Classes, DataTestIDs } from '@/shared/constants/data-test';
 import {
-  MetricsPageUnits,
   GraphTimespan,
   MetricsPagePredefinedQueries,
   MetricsPageQueryInput,
+  MetricsPageUnits,
 } from '../../fixtures/monitoring/constants';
 
 export interface PerspectiveConfig {

web/cypress/support/monitoring/05.reg_metrics_namespace_2.cy.ts

@@ -3,8 +3,8 @@ import { Classes, DataTestIDs } from '@/shared/constants/data-test';
 import {
   MetricsPagePredefinedQueries,
   MetricsPageQueryInput,
-  MetricsPageQueryKebabDropdown,
   MetricsPageQueryInputByNamespace,
+  MetricsPageQueryKebabDropdown,
 } from '../../fixtures/monitoring/constants';
 
 export interface PerspectiveConfig {