@plutonhq/core-frontend 0.1.31 → 0.1.32

package/dist-lib/styles/global.scss

@@ -161,6 +161,10 @@ button {
    border-right: 1px solid var(--line-color);
 }
 
+.linebreak-tooltip-content {
+   line-break: anywhere;
+}
+
 .loadingScreen {
    width: 100%;
    height: 100vh;

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@plutonhq/core-frontend",
    "description": "Pluton Core Frontend Library",
-   "version": "0.1.31",
+   "version": "0.1.32",
    "author": "Plutonhq",
    "license": "Apache-2.0",
    "publishConfig": {

package/src/components/Plan/BackupEvents/BackupEvents.module.scss

@@ -259,4 +259,6 @@
    padding: 10px;
    word-break: break-word;
    color: var(--error-button-color);
+   max-height: 400px;
+   overflow: auto;
 }

package/src/components/Plan/BackupEvents/BackupEvents.tsx

@@ -154,8 +154,8 @@ const BackupEvents = ({ id, type = 'backup', sourceId, sourceType, planId, inPro
             )}
          </div>
          {showError && (
-            <Modal title="Error Details" closeModal={() => setShowError(false)} width="400px">
-               <div className={classes.errorDetails}>
+            <Modal title="Error Details" closeModal={() => setShowError(false)} width={'400px'}>
+               <div className={classes.errorDetails} data-length={showError.length}>
                   {(() => {
                      if (typeof showError === 'string') {
                         if (showError.startsWith('main-')) {

package/src/components/Plan/BackupProgress/BackupProgress.module.scss

@@ -40,6 +40,7 @@
          color: var(--error-button-color);
          margin-left: 0.5rem;
          font-size: 0.9em;
+         cursor: pointer;
          i {
             font-style: normal;
          }

package/src/components/Plan/BackupProgress/BackupProgress.tsx

@@ -148,7 +148,12 @@ const BackupProgress = ({ item, sourceId, sourceType, planId, type = 'backup' }:
                   {item.errorMsg && (
                      <span className={classes.backupError}>
                         <Icon type="error-circle-filled" size={13} />{' '}
-                        <i data-tooltip-id="htmlToolTip" data-tooltip-place="top" data-tooltip-html={item.errorMsg}>
+                        <i
+                           data-tooltip-id="htmlToolTip"
+                           data-tooltip-place="top"
+                           data-tooltip-html={`<div class="linebreak-tooltip-content">${item.errorMsg.slice(0, 120) + (item.errorMsg.length > 120 ? '...' : '')}</div>`}
+                           onClick={() => setShowProgressDetails(true)}
+                        >
                            <u>Error</u> Occurred.
                         </i>{' '}
                         Retrying...

package/src/components/Plan/Backups/Backups.module.scss

@@ -233,6 +233,22 @@
    }
 }
 
+.errorDetailsModal {
+   width: 100%;
+   max-height: 500px;
+   overflow: auto;
+   font-family: monospace;
+   box-sizing: border-box;
+   border-radius: 6px;
+   background-color: var(--primary-color-lighter);
+   p {
+      border-bottom: 1px solid;
+      padding: 12px;
+      margin: 0;
+      border-color: var(--line-color);
+   }
+}
+
 @media only screen and (max-width: 768px) {
    .backupsTable {
       overflow: auto;

package/src/components/Plan/Backups/Backups.tsx

@@ -21,7 +21,7 @@ import BackupEvents from '../BackupEvents/BackupEvents';
 import Input from '../../common/form/Input/Input';
 import MirrorStatusBadge from '../Mirrors/MirrorStatusBadge';
 import MirrorStorageSelectorModal from '../Mirrors/MirrorStorageSelectorModal';
-import { SidePanel, SnapshotViewer } from '../..';
+import { Modal, SidePanel, SnapshotViewer } from '../..';
 
 const DownloadLabel = ({ download, downloadBackup }: { download: Backup['download']; downloadBackup: () => void }) => {
    if (download?.status === 'started') {
@@ -101,6 +101,7 @@ const Backups = ({
    const [showRestoreModal, setShowRestoreModal] = useState<Backup | false>(false);
    const [showBackupEvents, setShowBackupEvents] = useState<false | string>(false);
    const [showSnapshotViewer, setShowSnapshotViewer] = useState<Backup | false>(false);
+   const [showBackupError, setShowBackupError] = useState<string | false>(false);
    const [showEditModal, setShowEditModal] = useState<Backup | false>(false);
    const [showStorageSelector, setShowStorageSelector] = useState<Backup | false>(false);
    const queryClient = useQueryClient();
@@ -240,8 +241,9 @@ const Backups = ({
                         <div
                            className={`${classes.status} ${errorMsg ? classes.statusHasError : ''}`}
                            data-tooltip-id="htmlToolTip"
-                           data-tooltip-html={`<div><string>Error</string>: ${errorMsg}</div>`}
+                           data-tooltip-html={`<div class="linebreak-tooltip-content"><string>Error</string>: ${errorMsg?.slice(0, 120) + (errorMsg && errorMsg.length > 120 ? '...' : '')}</div>`}
                            data-tooltip-hidden={!errorMsg}
+                           onClick={() => errorMsg && errorMsg.length > 120 && setShowBackupError(errorMsg)}
                         >
                            <StatusLabel status={status} hasError={!!errorMsg} />
                         </div>
@@ -453,6 +455,15 @@ const Backups = ({
                />
             </SidePanel>
          )}
+         {showBackupError && (
+            <Modal title="Error Details" closeModal={() => setShowBackupError(false)} width={'600px'}>
+               <div className={`${classes.errorDetailsModal} styled__scrollbar`}>
+                  {showBackupError.split('\n').map((line, index) => (
+                     <p key={index}>{line}</p>
+                  ))}
+               </div>
+            </Modal>
+         )}
       </div>
    );
 };

package/src/styles/global.scss

@@ -161,6 +161,10 @@ button {
    border-right: 1px solid var(--line-color);
 }
 
+.linebreak-tooltip-content {
+   line-break: anywhere;
+}
+
 .loadingScreen {
    width: 100%;
    height: 100vh;