@underpostnet/underpost 2.8.5 → 2.8.7

package/src/cli/monitor.js

@@ -0,0 +1,236 @@
+import { loadReplicas, pathPortAssignmentFactory } from '../server/conf.js';
+import { loggerFactory } from '../server/logger.js';
+import UnderpostDeploy from './deploy.js';
+import axios from 'axios';
+import UnderpostRootEnv from './env.js';
+import fs from 'fs-extra';
+import { shellExec } from '../server/process.js';
+import { isInternetConnection } from '../server/dns.js';
+
+const logger = loggerFactory(import.meta);
+
+class UnderpostMonitor {
+  static API = {
+    async callback(
+      deployId,
+      env = 'development',
+      options = { now: false, single: false, msInterval: '', type: '', replicas: '', sync: false },
+      commanderOptions,
+      auxRouter,
+    ) {
+      if (deployId === 'dd' && fs.existsSync(`./engine-private/deploy/dd.router`)) {
+        for (const _deployId of fs.readFileSync(`./engine-private/deploy/dd.router`, 'utf8').split(','))
+          UnderpostMonitor.API.callback(
+            _deployId.trim(),
+            env,
+            options,
+            commanderOptions,
+            await UnderpostDeploy.API.routerFactory(_deployId, env),
+          );
+        return;
+      }
+
+      const router = auxRouter ?? (await UnderpostDeploy.API.routerFactory(deployId, env));
+
+      const confServer = loadReplicas(
+        JSON.parse(fs.readFileSync(`./engine-private/conf/${deployId}/conf.server.json`, 'utf8')),
+        'proxy',
+      );
+
+      const pathPortAssignmentData = pathPortAssignmentFactory(router, confServer);
+
+      let errorPayloads = [];
+      if (options.sync === true) {
+        const currentTraffic = UnderpostDeploy.API.getCurrentTraffic(deployId);
+        if (currentTraffic) UnderpostRootEnv.API.set(`${deployId}-${env}-traffic`, currentTraffic);
+      }
+      let traffic = UnderpostRootEnv.API.get(`${deployId}-${env}-traffic`) ?? 'blue';
+      const maxAttempts = parseInt(
+        Object.keys(pathPortAssignmentData)
+          .map((host) => pathPortAssignmentData[host].length)
+          .reduce((accumulator, value) => accumulator + value, 0) * 2.5,
+      );
+
+      logger.info(`Init deploy monitor`, {
+        pathPortAssignmentData,
+        maxAttempts,
+        deployId,
+        env,
+        traffic,
+      });
+
+      const switchTraffic = () => {
+        if (traffic === 'blue') traffic = 'green';
+        else traffic = 'blue';
+        UnderpostRootEnv.API.set(`${deployId}-${env}-traffic`, traffic);
+        shellExec(
+          `node bin deploy --info-router --build-manifest --traffic ${traffic} --replicas ${
+            options.replicas ? options.replicas : 1
+          } ${deployId} ${env}`,
+        );
+        shellExec(`sudo kubectl apply -f ./engine-private/conf/${deployId}/build/${env}/proxy.yaml`);
+      };
+
+      const monitor = async (reject) => {
+        if (UnderpostRootEnv.API.get(`monitor-init-callback-script`))
+          shellExec(UnderpostRootEnv.API.get(`monitor-init-callback-script`));
+        const currentTimestamp = new Date().getTime();
+        errorPayloads = errorPayloads.filter((e) => currentTimestamp - e.timestamp < 60 * 1000 * 5);
+        logger.info(`[${deployId}-${env}] Check server health`);
+        for (const host of Object.keys(pathPortAssignmentData)) {
+          for (const instance of pathPortAssignmentData[host]) {
+            const { port, path } = instance;
+            if (path.match('peer') || path.match('socket')) continue;
+            let urlTest = `http://localhost:${port}${path}`;
+            switch (options.type) {
+              case 'remote':
+              case 'blue-green':
+                urlTest = `https://${host}${path}`;
+                break;
+
+              default:
+                break;
+            }
+            // logger.info('Test instance', urlTest);
+            await axios.get(urlTest, { timeout: 10000 }).catch((error) => {
+              // console.log(error);
+              const errorPayload = {
+                urlTest,
+                host,
+                port,
+                path,
+                name: error.name,
+                status: error.status,
+                code: error.code,
+                errors: error.errors,
+                timestamp: new Date().getTime(),
+              };
+              if (errorPayload.status !== 404) {
+                errorPayloads.push(errorPayload);
+                if (errorPayloads.length >= maxAttempts) {
+                  const message = JSON.stringify(errorPayloads, null, 4);
+                  logger.error(
+                    `Deployment ${deployId} ${env} has been reached max attempts error payloads`,
+                    errorPayloads,
+                  );
+                  switch (options.type) {
+                    case 'blue-green':
+                      {
+                        const confServer = JSON.parse(
+                          fs.readFileSync(`./engine-private/conf/${deployId}/conf.server.json`, 'utf8'),
+                        );
+
+                        shellExec(`kubectl delete configmap underpost-config`);
+                        shellExec(
+                          `kubectl create configmap underpost-config --from-file=/home/dd/engine/engine-private/conf/dd-cron/.env.${env}`,
+                        );
+
+                        for (const host of Object.keys(confServer)) {
+                          shellExec(`sudo kubectl delete HTTPProxy ${host}`);
+                        }
+                        shellExec(`sudo kubectl rollout restart deployment/${deployId}-${env}-${traffic}`);
+
+                        switchTraffic();
+                      }
+
+                      break;
+
+                    case 'remote':
+                      break;
+
+                    default:
+                      if (reject) reject(message);
+                      else throw new Error(message);
+                  }
+                  errorPayloads = [];
+                }
+                logger.error(`Error accumulator ${deployId}-${env}-${traffic}`, errorPayloads.length);
+              }
+            });
+          }
+        }
+      };
+      if (options.now === true) await monitor();
+      if (options.single === true) return;
+      let optionsMsTimeout = parseInt(options.msInterval);
+      if (isNaN(optionsMsTimeout)) optionsMsTimeout = 60250; // 60.25 seconds
+      let monitorTrafficName;
+      let monitorPodName;
+      const monitorCallBack = (resolve, reject) => {
+        const envMsTimeout = UnderpostRootEnv.API.get(`${deployId}-${env}-monitor-ms`);
+        setTimeout(
+          async () => {
+            const isOnline = await isInternetConnection();
+            if (!isOnline) {
+              logger.warn('No internet connection');
+              monitorCallBack(resolve, reject);
+              return;
+            }
+            switch (options.type) {
+              case 'blue-green':
+                {
+                  if (monitorTrafficName !== traffic) {
+                    monitorTrafficName = undefined;
+                    monitorPodName = undefined;
+                  }
+                  const cmd = `underpost config get container-status`;
+                  const checkDeploymentReadyStatus = () => {
+                    const pods = UnderpostDeploy.API.get(`${deployId}-${env}-${traffic}`);
+                    if (pods && pods[0]) {
+                      const { NAME } = pods[0];
+                      if (
+                        shellExec(`sudo kubectl exec -i ${NAME} -- sh -c "${cmd}"`, { stdout: true }).match(
+                          `${deployId}-${env}-running-deployment`,
+                        )
+                      ) {
+                        monitorPodName = NAME;
+                        monitorTrafficName = `${traffic}`;
+                      }
+                    }
+                  };
+                  if (!monitorPodName) {
+                    checkDeploymentReadyStatus();
+                    monitorCallBack(resolve, reject);
+                    return;
+                  }
+                }
+
+                break;
+
+              default:
+                break;
+            }
+            for (const monitorStatus of [
+              { key: `monitor-input`, value: UnderpostRootEnv.API.get(`monitor-input`) },
+              {
+                key: `${deployId}-${env}-monitor-input`,
+                value: UnderpostRootEnv.API.get(`${deployId}-${env}-monitor-input`),
+              },
+            ])
+              switch (monitorStatus.value) {
+                case 'pause':
+                  monitorCallBack(resolve, reject);
+                  return;
+                case 'restart':
+                  UnderpostRootEnv.API.delete(monitorStatus.key);
+                  return reject();
+                case 'stop':
+                  UnderpostRootEnv.API.delete(monitorStatus.key);
+                  return resolve();
+                case 'blue-green-switch':
+                  UnderpostRootEnv.API.delete(monitorStatus.key);
+                  switchTraffic();
+              }
+            await monitor(reject);
+            monitorCallBack(resolve, reject);
+            return;
+          },
+          !isNaN(envMsTimeout) ? envMsTimeout : optionsMsTimeout,
+        );
+      };
+      return new Promise((...args) => monitorCallBack(...args));
+    },
+  };
+}
+
+export default UnderpostMonitor;

package/src/cli/repository.js

@@ -4,7 +4,7 @@ import { pbcopy, shellExec } from '../server/process.js';
 import { actionInitLog, loggerFactory } from '../server/logger.js';
 import fs from 'fs-extra';
 import { getNpmRootPath } from '../server/conf.js';
-import { listenPortController, listenServerFactory } from '../server/network.js';
+import UnderpostStartUp from '../server/start.js';
 
 dotenv.config();
 
@@ -78,7 +78,10 @@ class UnderpostRepository {
       return new Promise(async (resolve, reject) => {
         try {
           await logger.setUpInfo();
-          if (repositoryName === 'service') return resolve(await listenPortController(listenServerFactory(), ':'));
+          if (repositoryName === 'service')
+            return resolve(
+              await UnderpostStartUp.API.listenPortController(UnderpostStartUp.API.listenServerFactory(), ':'),
+            );
           else actionInitLog();
           const exeRootPath = `${getNpmRootPath()}/underpost`;
           const destFolder = `./${repositoryName}`;
@@ -98,6 +101,27 @@ class UnderpostRepository {
         }
       });
     },
+
+    getDeleteFiles(path = '.') {
+      const commandUntrack = `cd ${path} && git ls-files --deleted`;
+      const diffUntrackOutput = shellExec(commandUntrack, { stdout: true, silent: true });
+      return diffUntrackOutput.toString().split('\n').filter(Boolean);
+    },
+
+    getChangedFiles(path = '.', extension = '', head = false) {
+      const extensionFilter = extension ? `-- '***.${extension}'` : '';
+      const command = `cd ${path} && git diff ${head ? 'HEAD^ HEAD ' : ''}--name-only ${extensionFilter}`;
+      const commandUntrack = `cd ${path} && git ls-files --others --exclude-standard`;
+      const diffOutput = shellExec(command, { stdout: true, silent: true });
+      const diffUntrackOutput = shellExec(commandUntrack, { stdout: true, silent: true });
+      const deleteFiles = UnderpostRepository.API.getDeleteFiles(path);
+      return diffOutput
+        .toString()
+        .split('\n')
+        .filter(Boolean)
+        .concat(diffUntrackOutput.toString().split('\n').filter(Boolean))
+        .filter((f) => !deleteFiles.includes(f));
+    },
   };
 }
 

package/src/cli/script.js

@@ -2,6 +2,7 @@ import { getNpmRootPath } from '../server/conf.js';
 import { loggerFactory } from '../server/logger.js';
 import { shellExec } from '../server/process.js';
 import fs from 'fs-extra';
+import UnderpostDeploy from './deploy.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -13,8 +14,31 @@ class UnderpostScript {
       packageJson.scripts[key] = value;
       fs.writeFileSync(`${npmRoot}/package.json`, JSON.stringify(packageJson, null, 4));
     },
-    run(key) {
+    run(key, value, options) {
       const npmRoot = `${getNpmRootPath()}/underpost`;
+      const packageJson = JSON.parse(fs.readFileSync(`${npmRoot}/package.json`, 'utf8'));
+      if (options.itc === true) {
+        value = packageJson.scripts[key];
+        const podScriptPath = `${options.itcPath && typeof options.itcPath === 'string' ? options.itcPath : '/'}${value
+          .split('/')
+          .pop()}`;
+        const nameSpace = options.ns && typeof options.ns === 'string' ? options.ns : 'default';
+        const podMatch = options.podName && typeof options.podName === 'string' ? options.podName : key;
+
+        if (fs.existsSync(`${value}`)) {
+          for (const pod of UnderpostDeploy.API.get(podMatch)) {
+            shellExec(`sudo kubectl cp ${value} ${nameSpace}/${pod.NAME}:${podScriptPath}`);
+            const cmd = `node ${podScriptPath}`;
+            shellExec(`sudo kubectl exec -i ${pod.NAME} -- sh -c "${cmd}"`);
+          }
+        } else {
+          for (const pod of UnderpostDeploy.API.get(podMatch)) {
+            shellExec(`sudo kubectl exec -i ${pod.NAME} -- sh -c "${value}"`);
+          }
+        }
+
+        return;
+      }
       shellExec(`cd ${npmRoot} && npm run ${key}`);
     },
     get(key) {

package/src/cli/test.js

@@ -1,3 +1,4 @@
+import { timer } from '../client/components/core/CommonJs.js';
 import { MariaDB } from '../db/mariadb/MariaDB.js';
 import { getNpmRootPath } from '../server/conf.js';
 import { actionInitLog, loggerFactory, setUpInfo } from '../server/logger.js';
@@ -28,9 +29,17 @@ class UnderpostTest {
       actionInitLog();
       shellExec(`cd ${getNpmRootPath()}/underpost && npm run test`);
     },
-    async callback(deployList = '', options = { insideContainer: false, sh: false, logs: false }) {
+    async callback(deployList = '', options = { itc: false, sh: false, logs: false }) {
+      if (
+        options.podName &&
+        typeof options.podName === 'string' &&
+        options.podStatus &&
+        typeof options.podStatus === 'string'
+      )
+        return await UnderpostTest.API.statusMonitor(options.podName, options.podStatus, options.kindType);
+
       if (options.sh === true || options.logs === true) {
-        const [pod] = UnderpostDeploy.API.getPods(deployList);
+        const [pod] = UnderpostDeploy.API.get(deployList);
         if (pod) {
           if (options.sh) return pbcopy(`sudo kubectl exec -it ${pod.NAME} -- sh`);
           if (options.logs) return shellExec(`sudo kubectl logs -f ${pod.NAME}`);
@@ -41,7 +50,7 @@ class UnderpostTest {
         for (const _deployId of deployList.split(',')) {
           const deployId = _deployId.trim();
           if (!deployId) continue;
-          if (options.insideContainer === true)
+          if (options.itc === true)
             switch (deployId) {
               case 'dd-lampp':
                 {
@@ -64,7 +73,7 @@ class UnderpostTest {
                 break;
             }
           else {
-            const pods = UnderpostDeploy.API.getPods(deployId);
+            const pods = UnderpostDeploy.API.get(deployId);
             if (pods.length > 0)
               for (const deployData of pods) {
                 const { NAME } = deployData;
@@ -77,6 +86,32 @@ class UnderpostTest {
         }
       } else return UnderpostTest.API.run();
     },
+    statusMonitor(podName, status = 'Running', kindType = '', deltaMs = 1000, maxAttempts = 60 * 5) {
+      if (!(kindType && typeof kindType === 'string')) kindType = 'pods';
+      return new Promise(async (resolve) => {
+        let index = 0;
+        logger.info(`Loading instance`, { podName, status, kindType, deltaMs, maxAttempts });
+        const _monitor = async () => {
+          await timer(deltaMs);
+          const pods = UnderpostDeploy.API.get(podName, kindType);
+          const result = pods.find((p) => p.STATUS === status);
+          logger.info(
+            `Testing pod ${podName}... ${result ? 1 : 0}/1 - elapsed time ${deltaMs * (index + 1)}s - attempt ${
+              index + 1
+            }/${maxAttempts}`,
+            pods[0] ? pods[0].STATUS : 'Not found kind object',
+          );
+          if (result) return resolve(true);
+          index++;
+          if (index === maxAttempts) {
+            logger.error(`Failed to test pod ${podName} within ${maxAttempts} attempts`);
+            return resolve(false);
+          }
+          return _monitor();
+        };
+        await _monitor();
+      });
+    },
   };
 }
 

package/src/client/components/core/Account.js

@@ -151,23 +151,27 @@ const Account = {
           // s(`.btn-close-modal-account`).click();
           s(`.main-btn-recover`).click();
         };
-        s(`.btn-account-delete-confirm`).onclick = async (e) => {
-          e.preventDefault();
-          const confirmResult = await Modal.RenderConfirm({
-            html: async () => {
-              return html`
-                <div class="in section-mp" style="text-align: center">
-                  ${Translate.Render('confirm-delete-account')}
-                </div>
-              `;
-            },
-            id: 'delete-account-modal',
-          });
-          if (confirmResult.status === 'cancelled') return;
-          s(`.btn-account-delete-confirm`).classList.add('hide');
-          s(`.btn-account-delete`).classList.remove('hide');
-          s(`.btn-account-delete`).click();
-        };
+        EventsUI.onClick(
+          `.btn-account-delete-confirm`,
+          async (e) => {
+            e.preventDefault();
+            const confirmResult = await Modal.RenderConfirm({
+              html: async () => {
+                return html`
+                  <div class="in section-mp" style="text-align: center">
+                    ${Translate.Render('confirm-delete-account')}
+                  </div>
+                `;
+              },
+              id: 'delete-account-modal',
+            });
+            if (confirmResult.status === 'cancelled') return;
+            s(`.btn-account-delete-confirm`).classList.add('hide');
+            s(`.btn-account-delete`).classList.remove('hide');
+            s(`.btn-account-delete`).click();
+          },
+          { context: 'modal' },
+        );
         EventsUI.onClick(`.btn-account-delete`, async (e) => {
           e.preventDefault();
           const result = await UserService.delete({ id: user._id });
@@ -178,7 +182,7 @@ const Account = {
           s(`.btn-account-delete-confirm`).classList.remove('hide');
           s(`.btn-account-delete`).classList.add('hide');
           if (result.status === 'success') {
-            s(`.main-btn-home`).click();
+            Modal.onHomeRouterEvent();
             await Auth.sessionOut();
           }
         });
@@ -200,7 +204,7 @@ const Account = {
             disabled: false,
             extension: async () =>
               html`${await BtnIcon.Render({
-                class: `wfa btn-input-extension btn-account-update-username`,
+                class: `in wfa btn-input-extension btn-account-update-username`,
                 type: 'button',
                 style: 'text-align: left',
                 label: html`${Translate.Render(`update`)}`,
@@ -219,7 +223,7 @@ const Account = {
             extension: !(options && options.disabled && options.disabled.includes('emailConfirm'))
               ? async () => html`<div class="in verify-email-status"></div>
                   ${await BtnIcon.Render({
-                    class: `wfa btn-input-extension btn-confirm-email`,
+                    class: `in wfa btn-input-extension btn-confirm-email`,
                     type: 'button',
                     style: 'text-align: left',
                     label: html`<div class="in">
@@ -242,7 +246,7 @@ const Account = {
             disabledEye: true,
             extension: async () =>
               html`${await BtnIcon.Render({
-                class: `wfa btn-input-extension btn-account-change-password`,
+                class: `in wfa btn-input-extension btn-account-change-password`,
                 type: 'button',
                 style: 'text-align: left',
                 label: html`${Translate.Render(`change-password`)}`,
@@ -252,7 +256,7 @@ const Account = {
         ${options?.bottomRender ? await options.bottomRender() : ``}
         <div class="in hide">
           ${await BtnIcon.Render({
-            class: 'section-mp form-button btn-account',
+            class: 'in section-mp form-button btn-account',
             label: Translate.Render('update'),
             type: 'submit',
           })}
@@ -260,13 +264,13 @@ const Account = {
       </form>
       <div class="in">
         ${await BtnIcon.Render({
-          class: 'section-mp form-button btn-account-delete hide',
+          class: 'in section-mp form-button btn-account-delete hide',
           label: html` ${Translate.Render(`delete-account`)}`,
           type: 'button',
           style: 'color: #5f5f5f',
         })}
         ${await BtnIcon.Render({
-          class: 'section-mp form-button btn-account-delete-confirm',
+          class: 'in section-mp form-button btn-account-delete-confirm',
           label: html` ${Translate.Render(`delete-account`)}`,
           type: 'button',
           style: 'color: #5f5f5f',

package/src/client/components/core/Blockchain.js

@@ -25,7 +25,7 @@ const BlockChainManagement = {
                 placeholder: true,
               })}
               ${await BtnIcon.Render({
-                class: `section-mp btn-custom btn-upload-blockchain`,
+                class: `inl section-mp btn-custom btn-upload-blockchain`,
                 label: html`<i class="fas fa-plus"></i> ${Translate.Render(`create`)}`,
               })}
             </div>

package/src/client/components/core/CalendarCore.js

@@ -40,18 +40,6 @@ const CalendarCore = {
 
     const titleIcon = html`<i class="fas fa-calendar-alt"></i>`;
 
-    const getSrrData = () => {
-      this.Data[options.idModal].data = range(0, 5).map((i) => {
-        return {
-          id: `event-${i}`,
-          description: `Event ${s4()}${s4()}${s4()}`,
-          start: new Date().toTimeString(),
-          end: new Date().toTimeString(),
-        };
-      });
-    };
-    getSrrData();
-
     const getPanelData = async () => {
       const result = await EventSchedulerService.get({
         id: `${getQueryParams().cid ? getQueryParams().cid : Auth.getToken() ? 'creatorUser' : ''}`,
@@ -235,35 +223,9 @@ const CalendarCore = {
     ];
 
     setTimeout(() => {
-      const resizeModal = () => {
-        Modal.Data[options.idModal].onObserverListener[options.idModal] = () => {
-          if (s(`.main-body-calendar-${options.idModal}`))
-            s(`.main-body-calendar-${options.idModal}`).style.height = `${
-              s(`.${options.idModal}`).offsetHeight - Modal.headerTitleHeight
-            }px`;
-        };
-        Modal.Data[options.idModal].onObserverListener[options.idModal]();
-      };
-      setTimeout(resizeModal);
-      RouterEvents[`${options.idModal}-main-body`] = ({ route }) => {
-        if (route === 'calendar') {
-          setTimeout(() => {
-            resizeModal();
-          }, 400);
-        }
-      };
-
       s(`.close-calendar-container`).onclick = () => {
         s(`.calendar-container`).classList.add('hide');
         s(`.main-body-calendar-${options.idModal}`).classList.remove('hide');
-        htmls(
-          `.style-calendar`,
-          html`<style>
-            .modal-calendar {
-              overflow: hidden;
-            }
-          </style>`,
-        );
       };
     });
 
@@ -305,14 +267,6 @@ const CalendarCore = {
                 // renderCalendar();
                 CalendarCore.Data[options.idModal].calendar.setOption('height', 700);
                 Translate.Event['fullcalendar-lang']();
-                htmls(
-                  `.style-calendar`,
-                  html`<style>
-                    .modal-calendar {
-                      overflow: auto;
-                    }
-                  </style>`,
-                );
               },
             },
           ],
@@ -404,8 +358,11 @@ const CalendarCore = {
         <div class="in" style="margin-bottom: 100px"></div>`;
     };
 
+    let lastCid;
     this.Data[options.idModal].updatePanel = async () => {
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
+      if (lastCid === cid) return;
+      lastCid = cid;
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       if (s(`.main-body-calendar-${options.idModal}`)) {
         // if (Auth.getToken())
@@ -415,36 +372,22 @@ const CalendarCore = {
       }
     };
 
-    if (options.route)
+    if (options.route) {
       listenQueryPathInstance({
         id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
         routeId: options.route,
         event: async (path) => {
-          setTimeout(() => {
-            CalendarCore.Data[options.idModal].updatePanel();
-          });
+          CalendarCore.Data[options.idModal].updatePanel();
         },
       });
-
-    if (options.route === 'home') setTimeout(CalendarCore.Data[options.idModal].updatePanel);
-
+      if (!options.parentIdModal)
+        Modal.Data['modal-menu'].onHome[idPanel] = async () => {
+          lastCid = undefined;
+          setQueryPath({ path: options.route, queryPath: '' });
+          await this.Data[idPanel].updatePanel();
+        };
+    }
     return html`
-      <style>
-        .main-body-calendar-${options.idModal} {
-          overflow: auto;
-        }
-        .${idPanel}-form {
-          max-width: 750px !important;
-        }
-      </style>
-      <div class="style-calendar">
-        <style>
-          .modal-calendar {
-            overflow: hidden;
-          }
-        </style>
-      </div>
-
       <div class="in main-body-calendar-${options.idModal}">${await panelRender()}</div>
       <style>
         .calendar-container {
@@ -502,15 +445,13 @@ const CalendarCore = {
 
         .calendar-buttons-container {
           padding-bottom: 15px;
-          top: ${Modal.headerTitleHeight}px;
           height: 60px;
-          z-index: 4;
         }
       </style>
       <div class="in calendar-container hide">
-        <div class="stq modal calendar-buttons-container">
+        <div class="in modal calendar-buttons-container">
           ${await BtnIcon.Render({
-            class: `section-mp btn-custom close-calendar-container flr`,
+            class: `inl section-mp btn-custom close-calendar-container flr`,
             label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
             type: 'button',
           })}