Add EULA to the webapp

assets/js/components/Eula/Eula.jsx

@@ -0,0 +1,92 @@
+import React, { Fragment } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import Button from '@components/Button';
+import Modal from '@components/Modal';
+
+const Eula = () => {
+  const eulaVisible = useSelector((state) => state.settings.eulaVisible);
+  const dispatch = useDispatch();
+
+  return (
+    <Fragment>
+      <Modal title="License agreement" open={eulaVisible} onClose={() => {}}>
+        <div className="mb-4">
+          <div className="row">
+            <div>
+              <p className="my-2">
+                Trento, an open cloud-native web console improving the life of
+                SAP Applications administrators
+              </p>
+              <hr />
+              <p className="mt-2">
+                Trento is an open source (Apache License 2.0) component that is
+                supported as part of SUSE Linux Enterprise Server for SAP
+                applications and therefore falls under the standard SUSE Terms
+                and Conditions that can be reviewed at{' '}
+                <a href="https://www.suse.com/products/terms_and_conditions.pdf">
+                  https://www.suse.com/products/terms_and_conditions.pdf
+                </a>
+                , SUSE EULA is available at{' '}
+                <a href="https://www.suse.com/licensing/eula/#server">
+                  https://www.suse.com/licensing/eula/#server
+                </a>
+                .
+              </p>
+
+              <p className="mt-2">
+                By using Trento via a registered SUSE Linux Enterprise Server
+                for SAP you agree to the Terms and Conditions also for Trento.
+              </p>
+
+              <p className="mt-2">
+                Trento collects the following KPIs on your environment and
+                transmits it to SUSE:
+              </p>
+              <ul className="mt-2 pl-8 list-disc">
+                <li>SUSE Customer Center ID</li>
+                <li>Number of registered hosts in Trento</li>
+                <li>
+                  For each of those hosts:
+                  <ul className="list-disc pl-8">
+                    <li>SLES version</li>
+                    <li>Number of sockets and total count of cores per host</li>
+                    <li>Available memory per host</li>
+                    <li>
+                      Hosting platform (Cloud service provider, Hypervisor or
+                      bare metal)
+                    </li>
+                    <li>List of running SAP instances</li>
+                    <li>Statistics about Trento checks configuration</li>
+                  </ul>
+                </li>
+              </ul>
+
+              <p className="mt-2">
+                Trento neither collects, processes or sends any personal data to
+                SUSE.
+              </p>
+
+              <p className="mt-2">
+                By using Trento Premium and its updates available through SUSE
+                channels you agree to these terms. In case you disagree, please
+                switch to the Community version of Trento.
+              </p>
+              <div className="grid justify-items-end mt-8 pr-4">
+                <Button
+                  type="primary"
+                  className="w-24"
+                  onClick={() => dispatch({ type: 'ACCEPT_EULA' })}
+                >
+                  Accept
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </Fragment>
+  );
+};
+
+export default Eula;

assets/js/components/Eula/index.js

@@ -0,0 +1,3 @@
+import Eula from './Eula';
+
+export default Eula;

assets/js/components/Modal/Modal.jsx

@@ -41,7 +41,7 @@ const Modal = ({ children, open, onClose, title }) => {
             <div className="inline-block w-full max-w-3xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-lg rounded-lg">
               <Dialog.Title
                 as="h3"
-                className="text-lg font-medium leading-6 text-gray-900"
+                className="text-xl font-medium leading-6 text-gray-900"
               >
                 {title}
               </Dialog.Title>

assets/js/state/index.js

@@ -11,6 +11,7 @@ import sapSystemListReducer from './sapSystems';
 import databasesListReducer from './databases';
 import catalogReducer from './catalog';
 import liveFeedReducer from './liveFeed';
+import settingsReducer from './settings';
 
 import rootSaga from './sagas';
 
@@ -25,6 +26,7 @@ export const store = configureStore({
     databasesList: databasesListReducer,
     catalog: catalogReducer,
     liveFeed: liveFeedReducer,
+    settings: settingsReducer,
   },
   middleware: [sagaMiddleware],
 });

assets/js/state/sagas/eula.js

@@ -0,0 +1,18 @@
+import { put, call, takeEvery } from 'redux-saga/effects';
+import { post } from 'axios';
+
+import { acceptEula } from '@state/settings';
+import { logError } from '@lib/log';
+
+export function* acceptEulaSaga() {
+  try {
+    yield call(post, '/api/accept_eula');
+    yield put(acceptEula());
+  } catch (error) {
+    logError(error);
+  }
+}
+
+export function* watchAcceptEula() {
+  yield takeEvery('ACCEPT_EULA', acceptEulaSaga);
+}

assets/js/state/sagas/index.js

@@ -55,7 +55,11 @@ import {
 import { setCatalog } from '@state/catalog';
 
 import { appendEntryToLiveFeed } from '@state/liveFeed';
+import { setEulaVisible } from '@state/settings';
+
 import { watchNotifications } from '@state/sagas/notifications';
+import { watchAcceptEula } from '@state/sagas/eula';
+
 import { getDatabase, getSapSystem } from '@state/selectors';
 
 const notify = ({ text, icon }) => ({
@@ -83,6 +87,14 @@ function* loadSapSystemsHealthSummary() {
 function* initialDataFetch() {
   yield loadSapSystemsHealthSummary();
 
+  const {
+    data: { eula_accepted, premium_subscription },
+  } = yield call(get, '/api/settings');
+
+  if (!eula_accepted && premium_subscription) {
+    yield put(setEulaVisible());
+  }
+
   yield put(startHostsLoading());
   const { data: hosts } = yield call(get, '/api/hosts');
   yield put(setHosts(hosts));
@@ -496,6 +508,7 @@ export default function* rootSaga() {
     watchSapSystem(),
     watchDatabase(),
     watchCatalogUpdate(),
+    watchAcceptEula(),
     refreshHealthSummaryOnComnponentsHealthChange(),
   ]);
 }

assets/js/state/settings.js

@@ -0,0 +1,22 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  eulaVisible: false,
+};
+
+export const settingsSlice = createSlice({
+  name: 'settings',
+  initialState,
+  reducers: {
+    setEulaVisible: (state) => {
+      state.eulaVisible = true;
+    },
+    acceptEula: (state) => {
+      state.eulaVisible = false;
+    },
+  },
+});
+
+export const { setEulaVisible, acceptEula } = settingsSlice.actions;
+
+export default settingsSlice.reducer;

assets/js/trento.jsx

@@ -27,11 +27,13 @@ import ChecksCatalog from '@components/ChecksCatalog';
 import NotFound from '@components/NotFound';
 import SomethingWentWrong from '@components/SomethingWentWrong';
 import Settings from '@components/Settings';
+import Eula from '@components/Eula';
 
 const App = () => {
   return (
     <Provider store={store}>
       <Toaster position="top-right" />
+      <Eula />
       <BrowserRouter>
         <ErrorBoundary
           FallbackComponent={SomethingWentWrong}