test

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

Author: kaituo

public/components/CreateForecasterButtons/CreateForecasterButtons.tsx

@@ -0,0 +1,40 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiSmallButton } from '@elastic/eui';
+import React from 'react';
+import { APP_PATH, FORECASTING_FEATURE_NAME } from '../../utils/constants';
+import { useLocation } from 'react-router-dom';
+import { constructHrefWithDataSourceId, getDataSourceFromURL } from '../../pages/utils/helpers';
+
+export const CreateForecasterButtons = () => {
+  const location = useLocation();
+  const MDSQueryParams = getDataSourceFromURL(location);
+  const dataSourceId = MDSQueryParams.dataSourceId;
+
+  const createForecasterUrl = `${FORECASTING_FEATURE_NAME}#` + constructHrefWithDataSourceId(`${APP_PATH.CREATE_FORECASTER}`, dataSourceId, false);
+
+  return (
+    <EuiFlexGroup direction="row" gutterSize="m" justifyContent="center">
+      <EuiFlexItem grow={false}>
+        <EuiSmallButton
+          style={{ width: '200px' }}
+          fill
+          href={createForecasterUrl}
+          data-test-subj="createForecasterButton"
+          iconType="plusInCircle"
+        >
+          Create forecaster
+        </EuiSmallButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

public/components/FormattedFormRow/FormattedFormRow.tsx

@@ -16,7 +16,7 @@ type FormattedFormRowProps = {
   title?: string;
   formattedTitle?: ReactNode;
   children: ReactElement;
-  hint?: string | string[];
+  hint?: string | string[] | ReactNode | ReactNode[];
   isInvalid?: boolean;
   error?: ReactNode | ReactNode[];
   fullWidth?: boolean;
@@ -42,7 +42,8 @@ export const FormattedFormRow = (props: FormattedFormRowProps) => {
       ))
     : null;
 
-  const { formattedTitle, linkToolTip, ...euiFormRowProps } = props;
+  // Extract hintLink to avoid passing it to EuiCompressedFormRow as an unknown prop
+  const { formattedTitle, hintLink, linkToolTip, ...euiFormRowProps } = props;
 
   return (
     <EuiCompressedFormRow

public/components/RefreshForecastersButton/RefreshForecastersButton.tsx

@@ -0,0 +1,39 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiSmallButton } from '@elastic/eui';
+import React from 'react';
+import { APP_PATH, FORECASTING_FEATURE_NAME } from '../../utils/constants';
+import { useLocation } from 'react-router-dom';
+import { constructHrefWithDataSourceId, getDataSourceFromURL } from '../../pages/utils/helpers';
+
+export const RefreshForecastersButton = () => {
+  const location = useLocation();
+  const MDSQueryParams = getDataSourceFromURL(location);
+  const dataSourceId = MDSQueryParams.dataSourceId;
+
+  const refreshForecastersUrl = `${FORECASTING_FEATURE_NAME}#` + constructHrefWithDataSourceId(`${APP_PATH.LIST_FORECASTERS}`, dataSourceId, false);
+
+  return (
+    <EuiFlexGroup direction="row" gutterSize="m" justifyContent="center">
+      <EuiFlexItem grow={false}>
+        <EuiSmallButton
+          style={{ width: '200px' }}
+          href={refreshForecastersUrl}
+          data-test-subj="refreshForecastersButton"
+          iconType="refresh"
+        >
+          Refresh
+        </EuiSmallButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}; 

public/components/RefreshForecastersButton/__tests__/RefreshForecastersButton.test.tsx

@@ -0,0 +1,42 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { RefreshForecastersButton } from '../RefreshForecastersButton';
+
+describe('<RefreshForecastersButton /> spec', () => {
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      value: {
+        href: 'http://test.com',
+        pathname: '/',
+        search: '',
+        hash: '',
+      },
+      writable: true
+    });
+  });
+
+  test('renders component', () => {
+    const history = createMemoryHistory();
+    const { container, getByText } = render(
+      <Router history={history}>
+        <RefreshForecastersButton />
+      </Router>
+    );
+    
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('Refresh')).toBeInTheDocument();
+  });
+}); 

public/forecasting_app.tsx

@@ -0,0 +1,53 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import { CoreStart, AppMountParameters } from '../../../src/core/public';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { HashRouter as Router, Route } from 'react-router-dom';
+import { ForecastMain } from './pages/main/ForecastMain';
+import { Provider } from 'react-redux';
+import configureStore from './redux/configureStore';
+import { CoreServicesContext } from './components/CoreServices/CoreServices';
+
+export function renderApp(coreStart: CoreStart, params: AppMountParameters, landingPage: string | undefined, hideInAppSideNavBar: boolean) {
+  const http = coreStart.http;
+  const store = configureStore(http);
+
+  // Load Chart's dark mode CSS (if applicable)
+  const isDarkMode = coreStart.uiSettings.get('theme:darkMode') || false;
+  if (isDarkMode) {
+    require('@elastic/charts/dist/theme_only_dark.css');
+  } else {
+    require('@elastic/charts/dist/theme_only_light.css');
+  }
+
+  ReactDOM.render(
+    <Provider store={store}>
+      <Router>
+        <Route
+          render={(props) => (
+            <CoreServicesContext.Provider value={coreStart}>
+              <ForecastMain
+                setHeaderActionMenu={params.setHeaderActionMenu}
+                landingPage={landingPage}
+                hideInAppSideNavBar={hideInAppSideNavBar}
+                {...props}
+              />
+            </CoreServicesContext.Provider>
+          )}
+        />
+      </Router>
+    </Provider>,
+    params.element
+  );
+  return () => ReactDOM.unmountComponentAtNode(params.element);
+}

public/models/interfaces.ts

@@ -11,7 +11,7 @@
 
 import { InitProgress } from '../../server/models/interfaces';
 import { DATA_TYPES } from '../utils/constants';
-import { DETECTOR_STATE } from '../../server/utils/constants';
+import { DETECTOR_STATE, FORECASTER_STATE } from '../../server/utils/constants';
 import { Duration } from 'moment';
 import moment from 'moment';
 import { MDSQueryParams } from '../../server/models/types';
@@ -231,6 +231,56 @@ export type DetectorListItem = {
   detectorType?: string;
 };
 
+export type Forecaster = {
+  primaryTerm: number;
+  seqNo: number;
+  id: string;
+  name: string;
+  description: string;
+  timeField: string;
+  indices: string[];
+  resultIndex?: string;
+  resultIndexMinAge?: number;
+  resultIndexMinSize?: number;
+  resultIndexTtl?: number;
+  flattenCustomResultIndex?: boolean;
+  filterQuery: { [key: string]: any };
+  featureAttributes: FeatureAttributes[];
+  windowDelay: { period: Schedule };
+  forecastInterval: { period: Schedule };
+  shingleSize: number;
+  uiMetadata: UiMetaData;
+  lastUpdateTime: number;
+  enabled?: boolean;
+  enabledTime?: number;
+  disabledTime?: number;
+  curState: FORECASTER_STATE; // combined state of realTime and runOnce
+  stateError: string; // combined error of realTime and runOnce
+  initProgress?: InitProgress; // realTime
+  categoryField?: string[];
+  taskId?: string; // runOnce
+  taskState?: FORECASTER_STATE; // runOnce
+  taskProgress?: number; // runOnce
+  taskError?: string; // runOnce
+  lastStateUpdateTime?: number;
+  imputationOption?: ImputationOption;
+  suggestedSeasonality?: number;
+  recencyEmphasis?: number;
+  horizon?: number;
+  history?: number;
+  lastUiBreakingChangeTime?: number;
+};
+
+export type ForecasterListItem = {
+  id: string;
+  name: string;
+  indices: string[];
+  curState: FORECASTER_STATE;
+  realTimeLastUpdateTime: number;
+  runOnceLastUpdateTime: number;
+  stateError: string;
+};
+
 export type EntityData = {
   name: string;
   value: string;
@@ -342,3 +392,31 @@ export interface MDSStates {
   queryParams: MDSQueryParams;
   selectedDataSourceId: string | undefined;
 }
+
+/* export type ForecastData = {
+  dataQuality: number;
+  forecasterId?: string;
+  endTime: number;
+  startTime: number;
+  plotTime?: number;
+  entity?: EntityData[];
+  features?: { [key: string]: ForecastFeatureAggregationData };
+  aggInterval?: string;
+}; */
+
+export type ForecastFeatureAggregationData = {
+  data: number;
+  name?: string;
+  endTime: number;
+  startTime: number;
+  plotTime?: number;
+  lowerBound: number[];
+  upperBound: number[];
+  forecastValue: number[];
+  forecastStartTime: number[];
+  forecastEndTime: number[];
+};
+
+/* export type ForecastResult = {
+  forecastResult: ForecastData[];
+}; */