feat(frontend): integrate config settings with API (#2108)

kubeshop · Mar 10, 2023 · 6389d60 · 6389d60
1 parent ceb8a17
commit 6389d60
Show file tree

Hide file tree

Showing 30 changed files with 4,694 additions and 397 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -15,6 +15,7 @@
     "@lezer/highlight": "1.0.0",
     "@opentelemetry/semantic-conventions": "1.3.0",
     "@reduxjs/toolkit": "1.9.1",
+    "@segment/analytics-next": "1.51.2",
     "@sentry/react": "6.19.7",
     "@sentry/tracing": "6.19.7",
     "@testing-library/react": "^12.1.4",

diff --git a/web/public/index.html b/web/public/index.html
@@ -76,13 +76,7 @@
         document.getElementsByTagName('head')[0].appendChild(base);
       }
 
-      injectVariables();
-
-      if (window.ENV.analyticsEnabled) {
-        !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="X2vwYODI1vb8g6QpzL9OBxuv5vK7dGan";analytics.SNIPPET_VERSION="4.15.3";
-        analytics.load(window.ENV.measurementId);
-        }}();
-      }
+      injectVariables();      
     </script>
   </head>
   <body>

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -3,7 +3,7 @@ import * as Sentry from '@sentry/react';
 import ErrorBoundary from 'components/ErrorBoundary';
 import Router from 'components/Router';
 import {theme} from 'constants/Theme.constants';
-import DataStoreConfigProvider from 'providers/DataStoreConfig';
+import SettingsValuesProvider from 'providers/SettingsValues';
 import {ReduxWrapperProvider} from 'redux/ReduxWrapperProvider';
 import {ThemeProvider} from 'styled-components';
 import './App.less';
@@ -13,9 +13,9 @@ const App = () => {
     <ThemeProvider theme={theme}>
       <Sentry.ErrorBoundary fallback={({error}) => <ErrorBoundary error={error} />}>
         <ReduxWrapperProvider>
-          <DataStoreConfigProvider>
+          <SettingsValuesProvider>
             <Router />
-          </DataStoreConfigProvider>
+          </SettingsValuesProvider>
         </ReduxWrapperProvider>
       </Sentry.ErrorBoundary>
     </ThemeProvider>

diff --git a/web/src/components/Layout/Layout.tsx b/web/src/components/Layout/Layout.tsx
@@ -9,7 +9,7 @@ import Header from 'components/Header';
 import useRouterSync from 'hooks/useRouterSync';
 import ConfirmationModalProvider from 'providers/ConfirmationModal';
 import EnvironmentProvider from 'providers/Environment';
-import {useDataStoreConfig} from 'providers/DataStoreConfig/DataStoreConfig.provider';
+import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import MissingVariablesModalProvider from 'providers/MissingVariablesModal/MissingVariablesModal.provider';
 import {ConfigMode} from 'types/DataStore.types';
 import * as S from './Layout.styled';
@@ -45,7 +45,7 @@ const footerMenuItems = [
 
 const Layout = ({children, hasMenu = false}: IProps) => {
   useRouterSync();
-  const {dataStoreConfig, isLoading} = useDataStoreConfig();
+  const {dataStoreConfig, isLoading} = useSettingsValues();
   const pathname = useLocation().pathname;
   const isNoTracingMode = dataStoreConfig.mode === ConfigMode.NO_TRACING_MODE;
 

diff --git a/web/src/components/Settings/Analytics/AnalyticsForm.tsx b/web/src/components/Settings/Analytics/AnalyticsForm.tsx
@@ -1,26 +1,41 @@
 import {Button, Form, Switch} from 'antd';
 
+import {rawToResource, TRawConfig} from 'models/Config.model';
 import {useSettings} from 'providers/Settings/Settings.provider';
-import {IDraftSettings} from 'types/Settings.types';
+import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import * as S from '../common/Settings.styled';
 
 const FORM_ID = 'analytics';
 
 const AnalyticsForm = () => {
-  const [form] = Form.useForm<IDraftSettings>();
-  const {onSubmit} = useSettings();
+  const [form] = Form.useForm<TRawConfig>();
+  const {isLoading, onSubmit} = useSettings();
+  const {config} = useSettingsValues();
+
+  const handleOnSubmit = (values: TRawConfig) => {
+    onSubmit(rawToResource(values));
+  };
 
   return (
-    <Form<IDraftSettings> autoComplete="off" form={form} layout="horizontal" name={FORM_ID} onFinish={onSubmit}>
+    <Form<TRawConfig>
+      autoComplete="off"
+      form={form}
+      initialValues={config}
+      layout="horizontal"
+      name={FORM_ID}
+      onFinish={handleOnSubmit}
+    >
+      <Form.Item hidden name="id" />
+
       <S.SwitchContainer>
-        <label htmlFor={`${FORM_ID}_analytics`}>Enable analytics</label>
-        <Form.Item name="analytics" valuePropName="checked">
+        <label htmlFor={`${FORM_ID}_analyticsEnabled`}>Enable analytics</label>
+        <Form.Item name="analyticsEnabled" valuePropName="checked">
           <Switch />
         </Form.Item>
       </S.SwitchContainer>
 
       <S.FooterContainer>
-        <Button htmlType="submit" type="primary">
+        <Button htmlType="submit" loading={isLoading} type="primary">
           Save
         </Button>
       </S.FooterContainer>

diff --git a/web/src/components/Settings/DataStore/DataStore.tsx b/web/src/components/Settings/DataStore/DataStore.tsx
@@ -1,13 +1,13 @@
 import {Form} from 'antd';
 import {useDataStore} from 'providers/DataStore/DataStore.provider';
-import {useDataStoreConfig} from 'providers/DataStoreConfig/DataStoreConfig.provider';
+import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import {useCallback} from 'react';
 import {TDraftDataStore, ConfigMode} from 'types/DataStore.types';
 import DataStoreForm from '../DataStoreForm';
 import * as S from './DataStore.styled';
 
 const DataStore = () => {
-  const {dataStoreConfig} = useDataStoreConfig();
+  const {dataStoreConfig} = useSettingsValues();
   const {
     isLoading,
     isFormValid,

diff --git a/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx b/web/src/components/Settings/DataStoreForm/DataStoreForm.tsx
@@ -1,6 +1,6 @@
 import {Button, Form} from 'antd';
 import {useCallback, useEffect, useMemo} from 'react';
-import SetupConfigService from 'services/DataStore.service';
+import DataStoreService from 'services/DataStore.service';
 import {TDraftDataStore, TDataStoreForm, SupportedDataStores} from 'types/DataStore.types';
 import DataStore from 'models/DataStore.model';
 import {SupportedDataStoresToExplanation, SupportedDataStoresToName} from 'constants/DataStore.constants';
@@ -37,7 +37,7 @@ const DataStoreForm = ({
   isLoading,
   isFormValid,
 }: IProps) => {
-  const initialValues = useMemo(() => SetupConfigService.getInitialValues(dataStoreConfig), [dataStoreConfig]);
+  const initialValues = useMemo(() => DataStoreService.getInitialValues(dataStoreConfig), [dataStoreConfig]);
   const dataStoreType = Form.useWatch('dataStoreType', form);
 
   useEffect(() => {
@@ -46,7 +46,7 @@ const DataStoreForm = ({
 
   const onValidation = useCallback(
     async (_: any, draft: TDraftDataStore) => {
-      const isValid = await SetupConfigService.validateDraft(draft);
+      const isValid = await DataStoreService.validateDraft(draft);
       onIsFormValid(isValid);
     },
     [onIsFormValid]

diff --git a/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx b/web/src/components/Settings/DataStoreForm/DataStoreSelectionInput.tsx
@@ -3,7 +3,7 @@ import {noop} from 'lodash';
 import {useTheme} from 'styled-components';
 import {ConfigMode, SupportedDataStores} from 'types/DataStore.types';
 import {SupportedDataStoresToName} from 'constants/DataStore.constants';
-import {useDataStoreConfig} from 'providers/DataStoreConfig/DataStoreConfig.provider';
+import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 
 import DataStoreIcon from '../../DataStoreIcon/DataStoreIcon';
 import * as S from './DataStoreForm.styled';
@@ -19,7 +19,7 @@ const DataStoreSelectionInput = ({onChange = noop, value = SupportedDataStores.J
   const {
     color: {text, primary},
   } = useTheme();
-  const {dataStoreConfig} = useDataStoreConfig();
+  const {dataStoreConfig} = useSettingsValues();
   const configuredDataStoreType = dataStoreConfig.defaultDataStore.type;
 
   return (

diff --git a/web/src/components/Settings/Demo/DemoForm.tsx b/web/src/components/Settings/Demo/DemoForm.tsx
@@ -1,6 +1,5 @@
 import {Button, Form, Switch} from 'antd';
 
-import {useSettings} from 'providers/Settings/Settings.provider';
 import {IDraftSettings} from 'types/Settings.types';
 import * as S from '../common/Settings.styled';
 import OtelFields from './OtelFields';
@@ -12,10 +11,9 @@ const DemoForm = () => {
   const [form] = Form.useForm<IDraftSettings>();
   const pokeshopEnabled = Form.useWatch(['demo', 'pokeshopEnabled'], form);
   const otelEnabled = Form.useWatch(['demo', 'otelEnabled'], form);
-  const {onSubmit} = useSettings();
 
   return (
-    <Form<IDraftSettings> autoComplete="off" form={form} layout="vertical" name={FORM_ID} onFinish={onSubmit}>
+    <Form<IDraftSettings> autoComplete="off" form={form} layout="vertical" name={FORM_ID} onFinish={() => {}}>
       <S.SwitchContainer>
         <label htmlFor={`${FORM_ID}_demo_pokeshopEnabled`}>Enable Pokeshop</label>
         <Form.Item name={['demo', 'pokeshopEnabled']} valuePropName="checked">

diff --git a/web/src/components/Settings/Polling/PollingForm.tsx b/web/src/components/Settings/Polling/PollingForm.tsx
@@ -1,17 +1,30 @@
 import {Button, Col, Form, Input, Row} from 'antd';
 
+import {rawToResource, TRawPolling} from 'models/Polling.model';
 import {useSettings} from 'providers/Settings/Settings.provider';
-import {IDraftSettings} from 'types/Settings.types';
+import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import * as S from '../common/Settings.styled';
 
 const FORM_ID = 'polling';
 
 const PollingForm = () => {
-  const [form] = Form.useForm<IDraftSettings>();
-  const {onSubmit} = useSettings();
+  const [form] = Form.useForm<TRawPolling>();
+  const {isLoading, onSubmit} = useSettings();
+  const {polling} = useSettingsValues();
+
+  const handleOnSubmit = (values: TRawPolling) => {
+    onSubmit(rawToResource(values));
+  };
 
   return (
-    <Form<IDraftSettings> autoComplete="off" form={form} layout="vertical" name={FORM_ID} onFinish={onSubmit}>
+    <Form<TRawPolling>
+      autoComplete="off"
+      form={form}
+      initialValues={polling}
+      layout="vertical"
+      name={FORM_ID}
+      onFinish={handleOnSubmit}
+    >
       <Row gutter={[16, 16]}>
         <Col span={12}>
           <Form.Item
@@ -34,7 +47,7 @@ const PollingForm = () => {
       </Row>
 
       <S.FooterContainer>
-        <Button htmlType="submit" type="primary">
+        <Button htmlType="submit" loading={isLoading} type="primary">
           Save
         </Button>
       </S.FooterContainer>

diff --git a/web/src/components/SetupAlert/SetupAlert.tsx b/web/src/components/SetupAlert/SetupAlert.tsx
@@ -1,10 +1,10 @@
 import {Button} from 'antd';
-import {useDataStoreConfig} from 'providers/DataStoreConfig/DataStoreConfig.provider';
+import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import {Link} from 'react-router-dom';
 import * as S from './SetupAlert.styled';
 
 const SetupAlert = () => {
-  const {shouldDisplayConfigSetupFromTest, skipConfigSetupFromTest} = useDataStoreConfig();
+  const {shouldDisplayConfigSetupFromTest, skipConfigSetupFromTest} = useSettingsValues();
 
   return shouldDisplayConfigSetupFromTest ? (
     <S.Container

diff --git a/web/src/constants/Test.constants.ts b/web/src/constants/Test.constants.ts
@@ -55,5 +55,6 @@ export enum TracetestApiTags {
   SPAN = 'span',
   EXPRESSION = 'expression',
   RESOURCE = 'resource',
-  CONFIG = 'config',
+  DATA_STORE = 'dataStore',
+  SETTING = 'setting',
 }
diff --git a/web/src/index.tsx b/web/src/index.tsx
@@ -6,14 +6,12 @@ import 'react-reflex/styles.css';
 import App from './App';
 
 import * as serviceWorker from './serviceWorker';
-import {IAnalytics, IEnv} from './types/Common.types';
+import {IEnv} from './types/Common.types';
 import {SENTRY_ALLOWED_URLS, SENTRY_DNS} from './constants/Common.constants';
-import AnalyticsService from './services/Analytics/Analytics.service';
 
 declare global {
   interface Window {
     ENV: IEnv;
-    analytics: IAnalytics;
   }
 }
 
@@ -24,8 +22,6 @@ Sentry.init({
   tracesSampleRate: 1.0,
 });
 
-AnalyticsService.identify();
-
 ReactDOM.render(
   <React.StrictMode>
     <App />

diff --git a/web/src/models/Config.model.ts b/web/src/models/Config.model.ts
@@ -0,0 +1,27 @@
+import {EResourceType, TResource} from 'types/Settings.types';
+
+export type TRawConfig = {
+  analyticsEnabled: boolean;
+  id: string;
+  name: string;
+};
+
+type Config = {
+  analyticsEnabled: boolean;
+  id: string;
+  name: string;
+};
+
+function Config(rawConfig?: TResource<TRawConfig>): Config {
+  return {
+    analyticsEnabled: rawConfig?.spec?.analyticsEnabled ?? false,
+    id: rawConfig?.spec?.id ?? 'current',
+    name: rawConfig?.spec?.name ?? '',
+  };
+}
+
+export function rawToResource(spec: TRawConfig): TResource<TRawConfig> {
+  return {spec, type: EResourceType.Config};
+}
+
+export default Config;
diff --git a/web/src/models/Polling.model.ts b/web/src/models/Polling.model.ts
@@ -0,0 +1,33 @@
+import {EResourceType, TListResponse, TResource} from 'types/Settings.types';
+
+export type TRawPolling = {
+  id: string;
+  maxWaitTimeForTrace: string;
+  name: string;
+  retryDelay: string;
+};
+
+type Polling = {
+  id: string;
+  maxWaitTimeForTrace: string;
+  name: string;
+  retryDelay: string;
+};
+
+function Polling(rawPollings?: TListResponse<TRawPolling>): Polling {
+  const items = rawPollings?.items ?? [];
+  const polling = items?.[0];
+
+  return {
+    id: polling?.spec?.id ?? '',
+    maxWaitTimeForTrace: polling?.spec?.maxWaitTimeForTrace ?? '',
+    name: polling?.spec?.name ?? '',
+    retryDelay: polling?.spec?.retryDelay ?? '',
+  };
+}
+
+export function rawToResource(spec: TRawPolling): TResource<TRawPolling> {
+  return {spec, type: EResourceType.Polling};
+}
+
+export default Polling;
diff --git a/web/src/pages/Home/Home.tsx b/web/src/pages/Home/Home.tsx
@@ -1,12 +1,12 @@
 import Layout from 'components/Layout';
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
-import {useDataStoreConfig} from 'providers/DataStoreConfig/DataStoreConfig.provider';
+import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import CreateTransactionProvider from 'providers/CreateTransaction';
 import CreateTestProvider from 'providers/CreateTest';
 import Content from './Content';
 
 const Home = () => {
-  const {isLoading, shouldDisplayConfigSetup, skipConfigSetup} = useDataStoreConfig();
+  const {isLoading, shouldDisplayConfigSetup, skipConfigSetup} = useSettingsValues();
 
   return (
     <Layout hasMenu>

diff --git a/web/src/pages/Settings/Content.tsx b/web/src/pages/Settings/Content.tsx
@@ -1,5 +1,5 @@
 import {Tabs} from 'antd';
-// import Analytics from 'components/Settings/Analytics';
+import Analytics from 'components/Settings/Analytics';
 import DataStore from 'components/Settings/DataStore';
 // import Demo from 'components/Settings/Demo';
 // import Polling from 'components/Settings/Polling';
@@ -23,13 +23,13 @@ const Content = () => (
         <Tabs.TabPane key={TabsKeys.DataStore} tab="Configure Data Store">
           <DataStore />
         </Tabs.TabPane>
-        {/* <Tabs.TabPane key={TabsKeys.Analytics} tab="Analytics">
+        <Tabs.TabPane key={TabsKeys.Analytics} tab="Analytics">
           <Analytics />
         </Tabs.TabPane>
-        <Tabs.TabPane key={TabsKeys.Polling} tab="Trace Polling">
+        {/* <Tabs.TabPane key={TabsKeys.Polling} tab="Trace Polling">
           <Polling />
         </Tabs.TabPane>
-        <Tabs.TabPane key={TabsKeys.Demo} tab="Demo">
+         <Tabs.TabPane key={TabsKeys.Demo} tab="Demo">
           <Demo />
         </Tabs.TabPane> */}
       </Tabs>

diff --git a/web/src/providers/DataStore/DataStore.provider.tsx b/web/src/providers/DataStore/DataStore.provider.tsx
@@ -14,7 +14,7 @@ import {SupportedDataStores, TConnectionResult, TDraftDataStore} from 'types/Dat
 import DataStore from 'models/DataStore.model';
 import useDataStoreNotification from './hooks/useDataStoreNotification';
 import {useConfirmationModal} from '../ConfirmationModal/ConfirmationModal.provider';
-import {useDataStoreConfig} from '../DataStoreConfig/DataStoreConfig.provider';
+import {useSettingsValues} from '../SettingsValues/SettingsValues.provider';
 
 interface IContext {
   isFormValid: boolean;
@@ -43,7 +43,7 @@ interface IProps {
 export const useDataStore = () => useContext(Context);
 
 const DataStoreProvider = ({children}: IProps) => {
-  const {isFetching} = useDataStoreConfig();
+  const {isFetching} = useSettingsValues();
   const [createDataStore, {isLoading: isLoadingCreate}] = useCreateDataStoreMutation();
   const [updateDataStore, {isLoading: isLoadingUpdate}] = useUpdateDataStoreMutation();
   const [deleteDataStore] = useDeleteDataStoreMutation();