forecasting frontend #1038

kaituo · 2025-06-03T16:27:15Z

Description

The PR covers creating and managing forecasting jobs from a data source and consuming forecasting results visualized on a graph. Forecasting will show the user where their metrics are headed so that they can prepare accordingly (e.g. disk space, server instance upgrades, inventory planning).

Testing done:

added IT for create/edit/list forecasters: kaituo/opensearch-dashboards-functional-test@d89f945#diff-3c1decf4ad1bc8b8ce0c2aad9e09a282a70b0284e95c1622d571ad46a8506d16
added UTs. Will add more later.

Issues Resolved

#577
#576
#575
#574
#573
#441

Check List

New functionality includes testing.
- All tests pass
New functionality has been documented.
Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
For more information on following Developer Certificate of Origin and signing off your commits, please check here.

jackiehanyang · 2025-06-09T17:51:31Z

public/pages/ConfigureForecastModel/components/Settings/Settings.tsx

+      {/* HISTORY */}
+      <Field name="history" validate={validatePositiveInteger}>
+        {({ field, form }: FieldProps<number>) => {
+          const interval = (form as FormikProps<any>).values.interval;


nit: maybe try to define the full form type once to avoid casting it as . Leaving this as a nit comment because only seeing usage for this interface twice so far. If we're using it somewhere else or in the future we're going to use it again, definitely consider to define an interface for this

Thanks for your understanding.

public/pages/ConfigureForecastModel/components/Settings/Settings.tsx

public/pages/CreateForecasterSteps/hooks/useFetchForecasterInfo.ts

jackiehanyang · 2025-06-09T17:58:46Z

public/pages/CreateForecasterSteps/hooks/useFetchForecasterInfo.ts

+        await dispatch(getMappings(selectedIndices, dataSourceId));
+      }
+    };
+    console.log('forecasterId', forecasterId);


remove console.log code

jackiehanyang · 2025-06-09T17:58:59Z

.../pages/ConfigureForecastModel/components/SuggestParametersDialog/SuggestParametersDialog.tsx

+        : 'history,horizon,window_delay';
+
+    try {
+      console.log('forecasterBody', forecasterBody);


remove console.log code

jackiehanyang · 2025-06-09T17:59:08Z

public/pages/ConfigureForecastModel/components/Settings/Settings.tsx

+                sliderPanelRef.current &&
+                !sliderPanelRef.current.contains(e.target as Node)
+              ) {
+                console.log('Outside slider => Hiding slider');


remove console.log code

jackiehanyang · 2025-06-09T17:59:40Z

public/pages/DefineForecaster/components/CustomAggregation/__tests__/CustomAggregation.test.tsx

+      expect(validateQuery('{"a":{"b":{}}}')).toBeUndefined();
+    });
+    test('should return error message if invalid query', () => {
+      console.log = jest.fn();


remove console.log code

jackiehanyang · 2025-06-09T18:00:35Z

public/pages/DefineForecaster/components/CustomAggregation/CustomAggregation.tsx

+  try {
+    JSON.parse(value);
+  } catch (err) {
+    console.log('Returning error', err);


remove console log code

Logging the error would help debug production issues.

jackiehanyang · 2025-06-09T18:06:59Z

public/pages/ConfigureForecastModel/components/AdvancedSettings/AdvancedSettings.tsx

+                                            onChange={(e) => {
+                                              const raw = e.target.value;
+                                              form.setFieldValue(field.name, raw === '' ? '' : Number(raw));
+                                            }}


nit: seeing repeat onChange blocks with identical logic multiple times in this file. Maybe consider to extract it out as a common method

extracted a method:

const toNumberOrEmpty = (value: string): number | '' => { return value === '' ? '' : Number(value); };

jackiehanyang · 2025-06-09T18:09:49Z

public/pages/ConfigureForecastModel/components/Settings/Settings.tsx

+                    onChange={(e) => {
+                      const raw = e.target.value;
+                      form.setFieldValue(field.name, raw === '' ? '' : Number(raw));
+                    }}


Same as in the AdvancedSetting file above, the onChange method here is identical and repeated multiple times

jackiehanyang · 2025-06-09T18:13:43Z

public/pages/ConfigureForecastModel/components/AdvancedSettings/AdvancedSettings.tsx

+                                >
+                                  <EuiFlexItem grow={false}>
+                                    <Field
+                                      name={`imputationOption.custom_value.${index}.data`}


from line 258, it seems like we don't have data key in imputationOption.custom_value?

What is the data key you are referring to?

jackiehanyang · 2025-06-09T18:25:53Z

public/pages/ConfigureForecastModel/components/StorageSettings/StorageSettings.tsx

+              // FIXME: EuiRadio doesn't support readOnly prop. readOnly would be preferred as disabled makes the radio look gray.
+              // Consider creating a custom radio component that supports readOnly if this styling is important.


should we clean up this comment?

no need, it is still relevant

jackiehanyang · 2025-06-09T18:27:47Z

.../pages/ConfigureForecastModel/components/SuggestParametersDialog/SuggestParametersDialog.tsx

@@ -0,0 +1,289 @@
+import React, { useState } from 'react';


missing license session

jackiehanyang · 2025-06-09T18:28:20Z

public/pages/ConfigureForecastModel/components/Settings/Settings.tsx

@@ -0,0 +1,331 @@
+import React, { Fragment, useEffect, useRef, useState } from 'react';


missing license header

jackiehanyang · 2025-06-09T18:28:34Z

...pages/ConfigureForecastModel/components/AdvancedSettings/__tests__/AdvancedSettings.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';


missing license header

jackiehanyang · 2025-06-09T18:28:45Z

public/pages/ConfigureForecastModel/components/AdvancedSettings/AdvancedSettings.tsx

@@ -0,0 +1,337 @@
+import { useEffect, useState } from 'react';


missing license header

jackiehanyang · 2025-06-09T18:35:14Z

public/pages/ConfigureForecastModel/containers/ConfigureForecastModel.tsx

+            }
+          });
+        });
+    } catch (e) {


empty catch(e) block?

added catch block

Signed-off-by: Kaituo Li <[email protected]>

codecov · 2025-06-10T13:29:11Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 48.67%. Comparing base (05c55bf) to head (3c9a534).
Report is 11 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1038      +/-   ##
==========================================
- Coverage   53.81%   48.67%   -5.15%     
==========================================
  Files         170      232      +62     
  Lines        6955    10630    +3675     
  Branches     1430     2277     +847     
==========================================
+ Hits         3743     5174    +1431     
- Misses       2783     4924    +2141     
- Partials      429      532     +103

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

kaituo · 2025-06-10T13:35:46Z

Install Dashboard with Plugin fails with Run OpenSearch. Looks like a problem of backend image issue:

github flow:

- name: Run Opensearch
        uses: derek-ho/start-opensearch@v2
        with:
          opensearch-version: ${{ env.OPENSEARCH_VERSION }}
          security-enabled: false

CI log:

 * connect to ::1 port 9200 from ::1 port 38724 failed: Connection refused
*   Trying 127.0.0.1:9200...
* connect to 127.0.0.1 port 9200 from 127.0.0.1 port 60638 failed: Connection refused
* Failed to connect to localhost port 9200 after 0 ms: Couldn't connect to server

  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
* Closing connection
curl: (7) Failed to connect to localhost port 9200 after 0 ms: Couldn't connect to server
Error: Process completed with exit code 7.
Run cat ./opensearch-3.1.0-SNAPSHOT/logs/opensearch.log
  cat ./opensearch-3.1.0-SNAPSHOT/logs/opensearch.log
  shell: /usr/bin/bash --noprofile --norc -e -o pipefail {0}
  env:
    OPENSEARCH_VERSION: 3.1.0
    CI: 1
    TERM: xterm
    PLUGIN_VERSION: 3.1.0.0
    JAVA_HOME_11.0.27_x64: /opt/hostedtoolcache/jdk/11.0.27/x64
    JAVA_HOME: /opt/hostedtoolcache/jdk/11.0.27/x64
    JAVA_HOME_11_0_27_X64: /opt/hostedtoolcache/jdk/11.0.27/x64
cat: ./opensearch-3.1.0-SNAPSHOT/logs/opensearch.log: No such file or directory
Error: Process completed with exit code 1.

kaituo · 2025-06-10T13:50:21Z

codecov failure: will more tests later. Currently prioritizing IT that codecov does not consider: kaituo/opensearch-dashboards-functional-test@d89f945#diff-3c1decf4ad1bc8b8ce0c2aad9e09a282a70b0284e95c1622d571ad46a8506d16

jackiehanyang · 2025-06-10T16:57:09Z

public/redux/middleware/clientMiddleware.ts

            throw get(result, 'error', '');
          }
        } catch (error) {
+          console.log('Processed error in middleware:', error);


remove console.log

This would help prod failure.

jackiehanyang · 2025-06-10T16:57:30Z

public/pages/utils/helpers.ts

    items.length > 0
      ? groupIndicesOrAliasesByCluster(items, localClusterName, label)
      : [{ label, options: items }];
+  console.log('getVisibleOptions', indices, aliases, localClusterName);


remove console.log

Signed-off-by: Kaituo Li <[email protected]>

opensearch-trigger-bot · 2025-06-10T18:54:52Z

The backport to 2.x failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add .worktrees/backport-2.x 2.x
# Navigate to the new working tree
cd .worktrees/backport-2.x
# Create a new branch
git switch --create backport/backport-1038-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 a1657ecce6839a1573c70bb42aba2400cfd741a5
# Push it to GitHub
git push --set-upstream origin backport/backport-1038-to-2.x
# Go back to the original working tree
cd ../..
# Delete the working tree
git worktree remove .worktrees/backport-2.x

Then, create a pull request where the base branch is 2.x and the compare/head branch is backport/backport-1038-to-2.x.

kaituo requested review from amitgalitz, dbwiddis, jackiehanyang, joshpalis, ohltyler, owaiskazi19 and sean-zheng-amazon as code owners June 3, 2025 16:27

opensearch-trigger-bot bot added the backport 2.x label Jun 3, 2025

jackiehanyang reviewed Jun 9, 2025

View reviewed changes

test

a2c5855

Signed-off-by: Kaituo Li <[email protected]>

kaituo force-pushed the forecasting3 branch from f2ffe3c to 907707e Compare June 10, 2025 05:19

address comments

3c9a534

Signed-off-by: Kaituo Li <[email protected]>

kaituo force-pushed the forecasting3 branch from 907707e to 3c9a534 Compare June 10, 2025 13:11

jackiehanyang reviewed Jun 10, 2025

View reviewed changes

remove console.log

d56b080

Signed-off-by: Kaituo Li <[email protected]>

kaituo force-pushed the forecasting3 branch from 5e0c1a2 to d56b080 Compare June 10, 2025 17:51

jackiehanyang approved these changes Jun 10, 2025

View reviewed changes

kaituo merged commit a1657ec into opensearch-project:main Jun 10, 2025
10 of 17 checks passed

		// FIXME: EuiRadio doesn't support readOnly prop. readOnly would be preferred as disabled makes the radio look gray.
		// Consider creating a custom radio component that supports readOnly if this styling is important.

		@@ -0,0 +1,331 @@
		import React, { Fragment, useEffect, useRef, useState } from 'react';

		@@ -0,0 +1,337 @@
		import { useEffect, useState } from 'react';

forecasting frontend #1038

forecasting frontend #1038

Uh oh!

Conversation

kaituo commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Issues Resolved

Check List

Uh oh!

jackiehanyang Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kaituo Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jun 10, 2025

Codecov Report

Uh oh!

kaituo commented Jun 3, 2025 •

edited

Loading

jackiehanyang Jun 9, 2025 •

edited

Loading

kaituo Jun 10, 2025 •

edited

Loading