@plutonhq/core-frontend 0.0.1

package/dist/components/Plan/BackupEvents/BackupEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackupEvents.js","sources":["../../../../src/components/Plan/BackupEvents/BackupEvents.tsx"],"sourcesContent":["import Icon from '../../common/Icon/Icon';\r\nimport SidePanel from '../../common/SidePanel/SidePanel';\r\nimport { getBackupEventActionMessage, getRestoreEventActionMessage } from '../../../utils/progressHelpers';\r\nimport classes from './BackupEvents.module.scss';\r\nimport { BackupProgressData } from '../../../@types/backups';\r\nimport { useGetBackupProgressOnce } from '../../../services/backups';\r\nimport { useGetRestoreProgressOnce } from '../../../services/restores';\r\nimport { useMemo, useState } from 'react';\r\nimport Modal from '../../common/Modal/Modal';\r\nimport { formatDuration } from '../../../utils/helpers';\r\n\r\ninterface BackupEventsProps {\r\n   id: string;\r\n   planId: string;\r\n   sourceId: string;\r\n   sourceType: string;\r\n   type?: 'backup' | 'restore';\r\n   inProgress?: boolean;\r\n   progressData?: BackupProgressData | null;\r\n   close: () => void;\r\n}\r\n\r\nconst BackupEvents = ({ id, type = 'backup', sourceId, sourceType, planId, inProgress, progressData, close }: BackupEventsProps) => {\r\n   const [showError, setShowError] = useState<false | number>(false);\r\n   const { data: fetchedProgressData } =\r\n      type === 'backup'\r\n         ? useGetBackupProgressOnce({ id, sourceId, sourceType, planId })\r\n         : useGetRestoreProgressOnce({ id, sourceId, sourceType, planId });\r\n\r\n   const progressDataToUse: BackupProgressData | null = progressData || fetchedProgressData;\r\n\r\n   console.log('progressDataToUse :', progressDataToUse);\r\n   const hasFinished = useMemo(() => {\r\n      if (!progressDataToUse || !progressDataToUse.events) return '';\r\n      let finishedEvent = '';\r\n      progressDataToUse.events.forEach((event) => {\r\n         if (event.action === 'TASK_COMPLETED') {\r\n            finishedEvent = 'Completed';\r\n         } else if (event.action === 'TASK_CANCELLED') {\r\n            finishedEvent = 'Cancelled';\r\n         } else if (event.action === 'FAILED_PERMANENTLY') {\r\n            finishedEvent = 'Failed';\r\n         }\r\n      });\r\n      return finishedEvent;\r\n   }, [progressDataToUse]);\r\n\r\n   return (\r\n      <SidePanel title={`${type}-${id} Events`} width=\"1000px\" icon={<Icon type={'logs'} size={18} />} footer={<></>} close={close}>\r\n         <div className={classes.backupEventsContainer}>\r\n            <div className={classes.header}>\r\n               <div\r\n                  title=\"Status\"\r\n                  className={`${classes.status} ${inProgress ? classes.inProgress : ''} \r\n               ${!inProgress && hasFinished === 'Completed' ? classes.hasCompleted : ''} ${!inProgress && hasFinished === 'Failed' ? classes.hasFailed : ''}`}\r\n               >\r\n                  <Icon type={inProgress ? 'loading' : hasFinished === 'Completed' ? 'check-circle-filled' : 'error-circle-filled'} size={14} />{' '}\r\n                  {inProgress ? `${type} In Progress` : `${type} ${hasFinished}` || 'Unknown'}\r\n               </div>\r\n               <div title=\"Duration\" className={classes.duration}>\r\n                  <Icon type=\"clock\" size={14} /> {(progressDataToUse?.duration && formatDuration(progressDataToUse.duration / 1000)) || 'N/A'}\r\n               </div>\r\n            </div>\r\n            {progressDataToUse && progressDataToUse.events && progressDataToUse.events.length > 0 ? (\r\n               <ul className={classes.eventList}>\r\n                  {progressDataToUse.events.map((event: any, index: number) => {\r\n                     const completed = event.phase === 'finished' && event.action === 'TASK_COMPLETED';\r\n                     const failed = event.phase === 'finished' && event.action === 'FAILED_PERMANENTLY';\r\n                     const retrying = event.action.includes('RETRY_ATTEMPT_');\r\n                     const isError = event.action === 'TASK_FAILED';\r\n                     const isWarning =\r\n                        event.action === 'BACKUP_WARNING' ||\r\n                        event.action === 'RESTORE_WARNING' ||\r\n                        event.action === 'POST_BACKUP_PRUNE_FAILED' ||\r\n                        event.action === 'POST_BACKUP_REPO_STATS_FAILED';\r\n                     return (\r\n                        <li\r\n                           key={index}\r\n                           className={`${classes.eventItem} ${event.error ? classes.error : ''} \r\n                           ${completed ? classes.completed : ''} ${failed ? classes.failed : ''} \r\n                           ${retrying ? classes.retrying : ''} ${isError ? classes.isError : ''} \r\n                           ${isWarning ? classes.isWarning : ''}`}\r\n                        >\r\n                           <span className={classes.icon}>\r\n                              <Icon type={event.error || isWarning ? 'error-circle-filled' : 'check-circle-filled'} size={16} />\r\n                           </span>\r\n                           {/* Timestamp should be converted to time only eg: 10:20:23 AM */}\r\n                           <span className={classes.time}>{new Date(event.timestamp).toLocaleTimeString()}</span>\r\n                           <span className={classes.phase}>{event.phase}</span>\r\n                           <span className={classes.action}>\r\n                              {type === 'backup' ? getBackupEventActionMessage(event.action) : getRestoreEventActionMessage(event.action)}\r\n                              {event.error && (\r\n                                 <span className={classes.viewError} onClick={() => setShowError(index)}>\r\n                                    View Error\r\n                                 </span>\r\n                              )}\r\n                           </span>\r\n                        </li>\r\n                     );\r\n                  })}\r\n               </ul>\r\n            ) : null}\r\n         </div>\r\n         {showError && (\r\n            <Modal title=\"Error Details\" closeModal={() => setShowError(false)} width=\"400px\">\r\n               <div className={classes.errorDetails}>{progressDataToUse?.events[showError]?.error || 'Unknown error occurred.'}</div>\r\n            </Modal>\r\n         )}\r\n      </SidePanel>\r\n   );\r\n};\r\n\r\nexport default BackupEvents;\r\n"],"names":["BackupEvents","id","type","sourceId","sourceType","planId","inProgress","progressData","close","showError","setShowError","useState","fetchedProgressData","useGetBackupProgressOnce","useGetRestoreProgressOnce","progressDataToUse","hasFinished","useMemo","finishedEvent","event","jsxs","SidePanel","jsx","Icon","Fragment","classes","formatDuration","index","completed","failed","retrying","isError","isWarning","getBackupEventActionMessage","getRestoreEventActionMessage","Modal","_a"],"mappings":"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"}

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

@@ -0,0 +1,189 @@
+.backupEventsContainer {
+   margin-top: -20px;
+}
+
+.header {
+   display: flex;
+   flex-direction: row;
+   justify-content: space-between;
+   margin-bottom: 15px;
+   position: sticky;
+   top: -30px;
+   background: var(--content-background-color);
+   width: 100%;
+   box-sizing: border-box;
+   padding: 10px 0;
+   z-index: 2;
+   border-bottom: 1px solid var(--line-color);
+
+   .duration {
+      color: var(--content-text-color-light);
+   }
+
+   .status {
+      padding: 2px 12px;
+      font-size: 0.9em;
+      font-weight: 600;
+      border-radius: 15px;
+      text-transform: capitalize;
+      &.inProgress {
+         background-color: var(--primary-color-lighter);
+         color: var(--primary-color);
+      }
+      &.hasCompleted {
+         background-color: var(--success-bg-color);
+         color: var(--success-text-color);
+      }
+      &.hasFailed {
+         background-color: var(--error-bg-color);
+         color: var(--error-button-color);
+      }
+   }
+}
+
+.eventList {
+   list-style-type: none;
+   margin: 0;
+   padding: 0;
+   max-width: 100%;
+   display: flex;
+   flex-direction: column;
+   border-radius: 6px;
+   border: 1px solid var(--line-color);
+   .eventItem {
+      padding: 8px 12px;
+      word-break: break-word;
+      display: flex;
+      gap: 10px;
+      .time {
+         color: var(--content-text-color-light);
+      }
+      .phase {
+         padding: 2px 8px;
+         font-size: 0.9em;
+         border-radius: 12px;
+         background-color: var(--primary-color-light);
+         margin: 0 4px;
+         text-transform: capitalize;
+      }
+      .action {
+         color: var(--content-text-color);
+         .viewError {
+            text-decoration: underline;
+            text-decoration-style: dashed;
+            margin-left: 10px;
+            text-decoration-color: var(--line-active-color);
+            font-weight: 600;
+            color: var(--content-text-color);
+            cursor: pointer;
+            &:hover {
+               color: var(--primary-color);
+            }
+         }
+      }
+      .icon {
+         color: var(--primary-color);
+      }
+      &.error {
+         .icon {
+            color: var(--error-button-color);
+         }
+      }
+      &:nth-child(odd) {
+         background-color: var(--primary-color-lighter);
+      }
+      &.completed {
+         background-color: var(--success-bg-color);
+         border: 2px solid var(--success-bg-color-active);
+         border-radius: 6px;
+         .icon {
+            color: var(--success-text-color);
+         }
+         .action {
+            color: var(--success-text-color);
+            font-weight: 600;
+         }
+         .phase {
+            background-color: var(--success-bg-color-active);
+            color: var(--success-text-color);
+         }
+      }
+      &.failed {
+         background-color: var(--error-bg-color);
+         border: 2px solid var(--error-bg-color-active);
+         border-radius: 6px;
+         .action {
+            color: var(--error-button-color);
+            font-weight: 600;
+         }
+         .phase {
+            background-color: var(--error-bg-color-active);
+            color: var(--error-button-color);
+         }
+         .icon {
+            color: var(--error-button-color);
+         }
+      }
+      &.retrying {
+         border-top: 2px solid var(--primary-color-mid);
+         .action {
+            color: var(--primary-color);
+            font-weight: 600;
+         }
+      }
+      &.isError {
+         .action {
+            color: var(--error-button-color);
+            font-weight: 600;
+         }
+      }
+      &.isWarning {
+         .phase {
+            background-color: var(--warning-bg-color);
+            color: var(--warning-text-color);
+         }
+         .icon {
+            color: var(--warning-button-color);
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .eventList {
+      .eventItem {
+         display: grid;
+         grid-template-columns: 20px 80px auto auto;
+         grid-template-rows: auto auto;
+         border-bottom: 1px solid var(--line-color);
+         gap: 5px;
+         .icon {
+            grid-column: 1;
+            grid-row: 1;
+         }
+         .time {
+            grid-column: 2;
+            grid-row: 1;
+         }
+         .phase {
+            grid-column: 3;
+            grid-row: 1;
+            background: transparent;
+            color: var(--content-text-color-light);
+            &::before {
+               content: 'Phase: ';
+            }
+         }
+         .action {
+            grid-column: 1 / span 3;
+            grid-row: 2;
+            font-size: 13px;
+            font-weight: 500;
+            padding: 6px;
+         }
+         &.eventItem:nth-child(odd) {
+            background: transparent;
+         }
+      }
+   }
+}

package/dist/components/Plan/BackupEvents/BackupEvents.module.scss.js

@@ -0,0 +1,46 @@
+const e = "BackupEvents-module__backupEventsContainer___EZWRj", _ = "BackupEvents-module__header___YKSN-", t = "BackupEvents-module__duration___laYZ6", s = "BackupEvents-module__status___IRLAG", n = "BackupEvents-module__inProgress___X5wkv", o = "BackupEvents-module__hasCompleted___xYsVX", a = "BackupEvents-module__hasFailed___DHyrH", c = "BackupEvents-module__eventList___BxFDP", r = "BackupEvents-module__eventItem___SnTTQ", u = "BackupEvents-module__time___WwYls", d = "BackupEvents-module__phase___kBVd1", i = "BackupEvents-module__action___Oydd5", l = "BackupEvents-module__viewError___hzNA9", m = "BackupEvents-module__icon___l8ge9", p = "BackupEvents-module__error___qffbi", v = "BackupEvents-module__completed___9c1Jm", E = "BackupEvents-module__failed___Tkqql", k = "BackupEvents-module__retrying___HdxqP", B = "BackupEvents-module__isError___FuKGV", h = "BackupEvents-module__isWarning___OMenN", g = {
+  backupEventsContainer: e,
+  header: _,
+  duration: t,
+  status: s,
+  inProgress: n,
+  hasCompleted: o,
+  hasFailed: a,
+  eventList: c,
+  eventItem: r,
+  time: u,
+  phase: d,
+  action: i,
+  viewError: l,
+  icon: m,
+  error: p,
+  completed: v,
+  failed: E,
+  retrying: k,
+  isError: B,
+  isWarning: h
+};
+export {
+  i as action,
+  e as backupEventsContainer,
+  v as completed,
+  g as default,
+  t as duration,
+  p as error,
+  r as eventItem,
+  c as eventList,
+  E as failed,
+  o as hasCompleted,
+  a as hasFailed,
+  _ as header,
+  m as icon,
+  n as inProgress,
+  B as isError,
+  h as isWarning,
+  d as phase,
+  k as retrying,
+  s as status,
+  u as time,
+  l as viewError
+};
+//# sourceMappingURL=BackupEvents.module.scss.js.map

package/dist/components/Plan/BackupEvents/BackupEvents.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackupEvents.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Plan/BackupProgress/BackupProgress.d.ts

@@ -0,0 +1,12 @@
+import { Backup } from '../../../@types/backups';
+import { RestoreSlim } from '../../../@types/restores';
+interface BackupProgressProps {
+    item: Backup | RestoreSlim;
+    sourceId: string;
+    sourceType: string;
+    planId: string;
+    type: 'backup' | 'restore';
+}
+declare const BackupProgress: ({ item, sourceId, sourceType, planId, type }: BackupProgressProps) => import("react/jsx-runtime").JSX.Element;
+export default BackupProgress;
+//# sourceMappingURL=BackupProgress.d.ts.map

package/dist/components/Plan/BackupProgress/BackupProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackupProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/Plan/BackupProgress/BackupProgress.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAKvD,UAAU,mBAAmB;IAC1B,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,cAAc,GAAI,8CAAyD,mBAAmB,4CA4LnG,CAAC;AACF,eAAe,cAAc,CAAC"}

package/dist/components/Plan/BackupProgress/BackupProgress.js

@@ -0,0 +1,160 @@
+import { jsxs as s, jsx as r, Fragment as w } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import { useQueryClient as K } from "@tanstack/react-query";
+import { toast as F } from "react-toastify";
+import m from "../../common/Icon/Icon.js";
+import { useCancelBackup as L, useGetBackupProgress as T } from "../../../services/backups.js";
+import o from "./BackupProgress.module.scss.js";
+import { timeAgo as U, formatDateTime as O, formatBytes as A, formatSeconds as Y } from "../../../utils/helpers.js";
+import { extractResticData as H, generateBackupProgressMessage as J, generateRestoreProgressMessage as V } from "../../../utils/progressHelpers.js";
+import W from "../../common/ActionModal/ActionModal.js";
+import { useCancelRestore as X, useGetRestoreProgress as Z } from "../../../services/restores.js";
+import I from "../BackupEvents/BackupEvents.js";
+const ue = ({ item: l, sourceId: g, sourceType: f, planId: n, type: t = "backup" }) => {
+  const [q, y] = $(!1), [x, P] = $(!1), C = K(), M = X(), v = L(), { id: d, started: h } = l, { data: a } = t === "backup" ? T({ id: d, sourceId: g, sourceType: f, planId: n }) : Z({ id: d, sourceId: g, sourceType: f, planId: n });
+  console.log("#### data :", a);
+  const e = H(a), E = t === "backup" ? J(a) : V(a), {
+    total_files_processed: z = (e == null ? void 0 : e.total_files) || 0,
+    files_done: Q = 0,
+    total_bytes_processed: b = (e == null ? void 0 : e.total_bytes_processed) || (e == null ? void 0 : e.total_bytes) || 0,
+    bytes_done: N = 0,
+    bytes_restored: R = 0,
+    files_restored: S = 0,
+    seconds_remaining: j = 0,
+    percent_done: k = 0
+  } = e || {};
+  let u = Q, p = N, _ = b, B = z, i = b ? Math.round(N / b * 100) : 0;
+  t === "restore" && (i = Math.round(k * 100), e != null && e.total_bytes && (_ = e.total_bytes), R ? p = R : e != null && e.total_bytes && (p = Math.round(k * e.total_bytes)), S ? u = S : e != null && e.total_files && (u = Math.round(k * e.total_files))), (e == null ? void 0 : e.message_type) === "summary" && (i = 100, u = B, p = _);
+  const G = () => {
+    console.log("cancel :", t, l), t === "backup" ? F.promise(
+      v.mutateAsync(
+        { planId: n, backupId: l.id },
+        {
+          onSuccess: () => C.invalidateQueries({ queryKey: ["plan", n] })
+        }
+      ),
+      {
+        pending: "Sending Cancel Request...",
+        success: "Backup process Cancelled!",
+        error: {
+          render({ data: c }) {
+            return `Failed to cancel backup process. ${(c == null ? void 0 : c.message) || "Unknown Error."}`;
+          }
+        }
+      }
+    ) : F.promise(
+      M.mutateAsync(
+        { planId: n, restoreId: l.id },
+        {
+          onSuccess: () => C.invalidateQueries({ queryKey: ["plan", n] })
+        }
+      ),
+      {
+        pending: "Sending Cancel Request...",
+        success: "Restore process Cancelled!",
+        error: {
+          render({ data: c }) {
+            return `Failed to cancel restore process. ${(c == null ? void 0 : c.message) || "Unknown Error."}`;
+          }
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ s("div", { className: o.backup, children: [
+    /* @__PURE__ */ r("div", { className: o.backupIcon, children: /* @__PURE__ */ r(m, { type: "loading", size: 24 }) }),
+    /* @__PURE__ */ s("div", { className: o.backupLeft, children: [
+      /* @__PURE__ */ s("div", { className: o.backupId, children: [
+        t === "restore" ? "Restoring " : "",
+        "backup-",
+        d,
+        /* @__PURE__ */ s("span", { className: o.backupTime, title: O(h), children: [
+          /* @__PURE__ */ r(m, { type: "clock", size: 12 }),
+          " Started ",
+          h ? U(new Date(h)) : "a few seconds ago"
+        ] }),
+        l.errorMsg && /* @__PURE__ */ s("span", { className: o.backupError, children: [
+          /* @__PURE__ */ r(m, { type: "error-circle-filled", size: 13 }),
+          " ",
+          /* @__PURE__ */ s("i", { "data-tooltip-id": "htmlToolTip", "data-tooltip-place": "top", "data-tooltip-html": l.errorMsg, children: [
+            /* @__PURE__ */ r("u", { children: "Error" }),
+            " Occurred."
+          ] }),
+          " ",
+          "Retrying..."
+        ] })
+      ] }),
+      /* @__PURE__ */ s("div", { className: o.backupStart, children: [
+        /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r("span", { className: o.progressMessage, onClick: () => P(!0), children: E }) }),
+        /* @__PURE__ */ s("button", { onClick: () => y(!0), title: `Cancel ${t}`, children: [
+          /* @__PURE__ */ r(m, { type: "close", size: 12 }),
+          " Cancel"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ s("div", { className: o.backupRight, children: [
+      /* @__PURE__ */ s("div", { className: o.ProgressStats, children: [
+        /* @__PURE__ */ s("div", { className: o.ProgressStatsLeft, children: [
+          /* @__PURE__ */ s("span", { children: [
+            u,
+            " / ",
+            B,
+            " Files"
+          ] }),
+          /* @__PURE__ */ r("i", {}),
+          /* @__PURE__ */ s("span", { children: [
+            A(p),
+            " / ",
+            A(_)
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: o.ProgressStatsRight, children: t !== "restore" && /* @__PURE__ */ s(w, { children: [
+          "Remaining: ",
+          Y(j)
+        ] }) })
+      ] }),
+      /* @__PURE__ */ r("div", { className: o.progressBar, children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: `${o.progressBarFill} ${i > 3 ? o.progressBarFilled : ""}`,
+          style: { width: i + "%" },
+          children: /* @__PURE__ */ s("span", { children: [
+            i,
+            "%"
+          ] })
+        }
+      ) })
+    ] }),
+    q && /* @__PURE__ */ r(
+      W,
+      {
+        title: `Cancel ${t}`,
+        message: /* @__PURE__ */ r(w, { children: `Are you sure you want to cancel the ${t} process?` }),
+        closeModal: () => y(!1),
+        width: "400px",
+        primaryAction: {
+          title: `Yes, Cancel ${t}`,
+          type: "danger",
+          isPending: t === "restore" ? M.isPending : v.isPending,
+          action: () => G()
+        }
+      }
+    ),
+    x && /* @__PURE__ */ r(
+      I,
+      {
+        id: d,
+        type: t,
+        planId: n,
+        sourceId: g,
+        sourceType: f,
+        progressData: a,
+        inProgress: !0,
+        close: () => P(!1)
+      }
+    )
+  ] }, l.id);
+};
+export {
+  ue as default
+};
+//# sourceMappingURL=BackupProgress.js.map

package/dist/components/Plan/BackupProgress/BackupProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackupProgress.js","sources":["../../../../src/components/Plan/BackupProgress/BackupProgress.tsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { useQueryClient } from '@tanstack/react-query';\r\nimport { toast } from 'react-toastify';\r\nimport Icon from '../../common/Icon/Icon';\r\nimport { useCancelBackup, useGetBackupProgress } from '../../../services/backups';\r\nimport classes from './BackupProgress.module.scss';\r\nimport { formatBytes, formatDateTime, formatSeconds, timeAgo } from '../../../utils/helpers';\r\nimport { generateBackupProgressMessage, extractResticData, generateRestoreProgressMessage } from '../../../utils/progressHelpers';\r\nimport { Backup } from '../../../@types/backups';\r\nimport { RestoreSlim } from '../../../@types/restores';\r\nimport ActionModal from '../../common/ActionModal/ActionModal';\r\nimport { useCancelRestore, useGetRestoreProgress } from '../../../services/restores';\r\nimport BackupEvents from '../BackupEvents/BackupEvents';\r\n\r\ninterface BackupProgressProps {\r\n   item: Backup | RestoreSlim;\r\n   sourceId: string;\r\n   sourceType: string;\r\n   planId: string;\r\n   type: 'backup' | 'restore';\r\n}\r\n\r\nconst BackupProgress = ({ item, sourceId, sourceType, planId, type = 'backup' }: BackupProgressProps) => {\r\n   const [showCancelModal, setShowCancelModal] = useState(false);\r\n   const [showProgressDetails, setShowProgressDetails] = useState(false);\r\n   const queryClient = useQueryClient();\r\n   const cancelRestoreMutation = useCancelRestore();\r\n   const cancelBackupMutation = useCancelBackup();\r\n\r\n   const { id, started } = item;\r\n   const { data: progressData } =\r\n      type === 'backup' ? useGetBackupProgress({ id, sourceId, sourceType, planId }) : useGetRestoreProgress({ id, sourceId, sourceType, planId });\r\n\r\n   console.log('#### data :', progressData);\r\n\r\n   const resticData = extractResticData(progressData);\r\n   const progressMessage = type === 'backup' ? generateBackupProgressMessage(progressData) : generateRestoreProgressMessage(progressData);\r\n\r\n   // Extract progress values from restic data or use defaults\r\n   const {\r\n      total_files_processed: total_files = resticData?.total_files || 0,\r\n      files_done = 0,\r\n      total_bytes_processed: total_bytes = resticData?.total_bytes_processed || resticData?.total_bytes || 0,\r\n      bytes_done = 0,\r\n      bytes_restored = 0,\r\n      files_restored = 0,\r\n      seconds_remaining = 0,\r\n      percent_done = 0,\r\n   } = resticData || {};\r\n\r\n   let filesProcessed = files_done;\r\n   let bytesProcessed = bytes_done;\r\n   let totalBytes = total_bytes;\r\n   let totalFiles = total_files;\r\n   let progressPercent = total_bytes ? Math.round((bytes_done / total_bytes) * 100) : 0;\r\n\r\n   if (type === 'restore') {\r\n      progressPercent = Math.round(percent_done * 100);\r\n      if (resticData?.total_bytes) {\r\n         totalBytes = resticData.total_bytes;\r\n      }\r\n      if (bytes_restored) {\r\n         bytesProcessed = bytes_restored;\r\n      } else {\r\n         if (resticData?.total_bytes) {\r\n            bytesProcessed = Math.round(percent_done * resticData.total_bytes);\r\n         }\r\n      }\r\n      if (files_restored) {\r\n         filesProcessed = files_restored;\r\n      } else {\r\n         if (resticData?.total_files) {\r\n            filesProcessed = Math.round(percent_done * resticData.total_files);\r\n         }\r\n      }\r\n   }\r\n\r\n   // For completed backups, show 100% if we have summary data\r\n   if (resticData?.message_type === 'summary') {\r\n      progressPercent = 100;\r\n      filesProcessed = totalFiles;\r\n      bytesProcessed = totalBytes;\r\n   }\r\n\r\n   const cancel = () => {\r\n      console.log('cancel :', type, item);\r\n      if (type === 'backup') {\r\n         toast.promise(\r\n            cancelBackupMutation.mutateAsync(\r\n               { planId, backupId: item.id },\r\n               {\r\n                  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['plan', planId] }),\r\n               },\r\n            ),\r\n            {\r\n               pending: 'Sending Cancel Request...',\r\n               success: 'Backup process Cancelled!',\r\n               error: {\r\n                  render({ data }: any) {\r\n                     // When the promise reject, data will contains the error\r\n                     return `Failed to cancel backup process. ${data?.message || 'Unknown Error.'}`;\r\n                  },\r\n               },\r\n            },\r\n         );\r\n      } else {\r\n         toast.promise(\r\n            cancelRestoreMutation.mutateAsync(\r\n               { planId, restoreId: item.id },\r\n               {\r\n                  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['plan', planId] }),\r\n               },\r\n            ),\r\n            {\r\n               pending: 'Sending Cancel Request...',\r\n               success: 'Restore process Cancelled!',\r\n               error: {\r\n                  render({ data }: any) {\r\n                     // When the promise reject, data will contains the error\r\n                     return `Failed to cancel restore process. ${data?.message || 'Unknown Error.'}`;\r\n                  },\r\n               },\r\n            },\r\n         );\r\n      }\r\n   };\r\n\r\n   return (\r\n      <div key={item.id} className={classes.backup}>\r\n         <div className={classes.backupIcon}>\r\n            <Icon type=\"loading\" size={24} />\r\n         </div>\r\n         <div className={classes.backupLeft}>\r\n            <div className={classes.backupId}>\r\n               {type === 'restore' ? 'Restoring ' : ''}backup-{id}\r\n               <span className={classes.backupTime} title={formatDateTime(started)}>\r\n                  <Icon type=\"clock\" size={12} /> Started {started ? timeAgo(new Date(started)) : 'a few seconds ago'}\r\n               </span>\r\n               {item.errorMsg && (\r\n                  <span className={classes.backupError}>\r\n                     <Icon type=\"error-circle-filled\" size={13} />{' '}\r\n                     <i data-tooltip-id=\"htmlToolTip\" data-tooltip-place=\"top\" data-tooltip-html={item.errorMsg}>\r\n                        <u>Error</u> Occurred.\r\n                     </i>{' '}\r\n                     Retrying...\r\n                  </span>\r\n               )}\r\n            </div>\r\n            <div className={classes.backupStart}>\r\n               <div>\r\n                  <span className={classes.progressMessage} onClick={() => setShowProgressDetails(true)}>\r\n                     {progressMessage}\r\n                  </span>\r\n                  {/* <Icon type=\"clock\" size={12} /> Started {started ? timeAgo(new Date(started)) : 'a few seconds ago'} */}\r\n               </div>\r\n               <button onClick={() => setShowCancelModal(true)} title={`Cancel ${type}`}>\r\n                  <Icon type=\"close\" size={12} /> Cancel\r\n               </button>\r\n            </div>\r\n         </div>\r\n         <div className={classes.backupRight}>\r\n            <div className={classes.ProgressStats}>\r\n               <div className={classes.ProgressStatsLeft}>\r\n                  <span>\r\n                     {filesProcessed} / {totalFiles} Files\r\n                  </span>\r\n                  <i></i>\r\n                  <span>\r\n                     {formatBytes(bytesProcessed)} / {formatBytes(totalBytes)}\r\n                  </span>\r\n               </div>\r\n               <div className={classes.ProgressStatsRight}>{type !== 'restore' && <>Remaining: {formatSeconds(seconds_remaining)}</>}</div>\r\n            </div>\r\n            <div className={classes.progressBar}>\r\n               <div\r\n                  className={`${classes.progressBarFill} ${progressPercent > 3 ? classes.progressBarFilled : ''}`}\r\n                  style={{ width: progressPercent + '%' }}\r\n               >\r\n                  <span>{progressPercent}%</span>\r\n               </div>\r\n            </div>\r\n         </div>\r\n         {showCancelModal && (\r\n            <ActionModal\r\n               title={`Cancel ${type}`}\r\n               message={<>{`Are you sure you want to cancel the ${type} process?`}</>}\r\n               closeModal={() => setShowCancelModal(false)}\r\n               width=\"400px\"\r\n               primaryAction={{\r\n                  title: `Yes, Cancel ${type}`,\r\n                  type: 'danger',\r\n                  isPending: type === 'restore' ? cancelRestoreMutation.isPending : cancelBackupMutation.isPending,\r\n                  action: () => cancel(),\r\n               }}\r\n            />\r\n         )}\r\n         {showProgressDetails && (\r\n            <BackupEvents\r\n               id={id}\r\n               type={type}\r\n               planId={planId}\r\n               sourceId={sourceId}\r\n               sourceType={sourceType}\r\n               progressData={progressData}\r\n               inProgress={true}\r\n               close={() => setShowProgressDetails(false)}\r\n            />\r\n         )}\r\n      </div>\r\n   );\r\n};\r\nexport default BackupProgress;\r\n"],"names":["BackupProgress","item","sourceId","sourceType","planId","type","showCancelModal","setShowCancelModal","useState","showProgressDetails","setShowProgressDetails","queryClient","useQueryClient","cancelRestoreMutation","useCancelRestore","cancelBackupMutation","useCancelBackup","id","started","progressData","useGetBackupProgress","useGetRestoreProgress","resticData","extractResticData","progressMessage","generateBackupProgressMessage","generateRestoreProgressMessage","total_files","files_done","total_bytes","bytes_done","bytes_restored","files_restored","seconds_remaining","percent_done","filesProcessed","bytesProcessed","totalBytes","totalFiles","progressPercent","cancel","toast","data","jsxs","classes","jsx","Icon","formatDateTime","timeAgo","formatBytes","Fragment","formatSeconds","ActionModal","BackupEvents"],"mappings":"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"}

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

@@ -0,0 +1,120 @@
+.activeBackups {
+   width: 100%;
+   margin: 30px 0;
+}
+
+.activeBackupsTable {
+   width: 100%;
+}
+
+.backup {
+   width: 100%;
+   padding: 10px 15px;
+   display: flex;
+   justify-content: left;
+   align-items: center;
+   box-sizing: border-box;
+   border-radius: 6px;
+   border: 1px solid var(--line-color);
+   margin-bottom: 15px;
+   .backupIcon {
+      margin-right: 15px;
+   }
+   .backupLeft {
+      width: calc(55% - 20px);
+      .backupId {
+         font-weight: 600;
+         margin-bottom: 5px;
+         color: var(--content-text-color);
+      }
+      .backupTime {
+         font-size: 0.9em;
+         color: var(--content-text-color-light);
+         margin-left: 10px;
+         font-weight: normal;
+      }
+
+      .backupError {
+         color: var(--error-button-color);
+         margin-left: 0.5rem;
+         font-size: 0.9em;
+         i {
+            font-style: normal;
+         }
+      }
+
+      .backupStart {
+         color: var(--content-text-color-light);
+         font-size: 0.75rem;
+         display: flex;
+         gap: 10px;
+
+         .progressMessage {
+            cursor: pointer;
+            text-transform: capitalize;
+            &:hover {
+               color: var(--content-text-color);
+            }
+         }
+
+         button {
+            color: inherit;
+            font-family: inherit;
+            background: var(--line-color);
+            padding-right: 12px;
+            border-radius: 12px;
+            transition: all 0.12s linear;
+            &:hover {
+               color: var(--error-button-color);
+               background-color: var(--error-bg-color);
+            }
+         }
+      }
+   }
+   .backupRight {
+      width: calc(45% - 20px);
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      .ProgressStats {
+         display: flex;
+         justify-content: space-between;
+         .ProgressStatsLeft {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            i {
+               display: block;
+               width: 1px;
+               height: 11px;
+               background-color: var(--line-color);
+            }
+         }
+      }
+      .progressBar {
+         width: 100%;
+         height: 12px;
+         border-radius: 4px;
+         background-color: var(--line-color);
+         .progressBarFill {
+            height: 100%;
+            border-radius: 4px;
+            background-color: turquoise;
+            position: relative;
+            transition: all 0.2s linear;
+            span {
+               font-weight: 600;
+               font-size: 0.625rem;
+               line-height: 1.2em;
+               position: absolute;
+            }
+            &.progressBarFilled {
+               span {
+                  right: 5px;
+                  color: #fff;
+               }
+            }
+         }
+      }
+   }
+}

package/dist/components/Plan/BackupProgress/BackupProgress.module.scss.js

@@ -0,0 +1,34 @@
+const s = "BackupProgress-module__backup___PNUwl", r = "BackupProgress-module__backupIcon___WgQfJ", _ = "BackupProgress-module__backupLeft___KWCq9", o = "BackupProgress-module__backupId___bl061", e = "BackupProgress-module__backupTime___NDhjn", a = "BackupProgress-module__backupError___5i78H", c = "BackupProgress-module__backupStart___Vcxtn", u = "BackupProgress-module__progressMessage___EHBEM", p = "BackupProgress-module__backupRight___Pkh21", t = "BackupProgress-module__ProgressStats___ofhq1", g = "BackupProgress-module__ProgressStatsLeft___wSB09", k = "BackupProgress-module__progressBar___n7TbM", l = "BackupProgress-module__progressBarFill___wJOQa", b = "BackupProgress-module__progressBarFilled___RE40d", B = {
+  backup: s,
+  backupIcon: r,
+  backupLeft: _,
+  backupId: o,
+  backupTime: e,
+  backupError: a,
+  backupStart: c,
+  progressMessage: u,
+  backupRight: p,
+  ProgressStats: t,
+  ProgressStatsLeft: g,
+  progressBar: k,
+  progressBarFill: l,
+  progressBarFilled: b
+};
+export {
+  t as ProgressStats,
+  g as ProgressStatsLeft,
+  s as backup,
+  a as backupError,
+  r as backupIcon,
+  o as backupId,
+  _ as backupLeft,
+  p as backupRight,
+  c as backupStart,
+  e as backupTime,
+  B as default,
+  k as progressBar,
+  l as progressBarFill,
+  b as progressBarFilled,
+  u as progressMessage
+};
+//# sourceMappingURL=BackupProgress.module.scss.js.map

package/dist/components/Plan/BackupProgress/BackupProgress.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackupProgress.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/components/Plan/Backups/Backups.d.ts

@@ -0,0 +1,11 @@
+import { Plan } from '../../../@types/plans';
+declare const Backups: ({ planId, method, backups, sourceId, sourceType, }: {
+    planId: string;
+    method: string;
+    backups: Plan["backups"];
+    sourceId: string;
+    sourceType: string;
+    snapLimit: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Backups;
+//# sourceMappingURL=Backups.d.ts.map

package/dist/components/Plan/Backups/Backups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backups.d.ts","sourceRoot":"","sources":["../../../../src/components/Plan/Backups/Backups.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AA4D7C,QAAA,MAAM,OAAO,GAAI,oDAOd;IACA,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACpB,4CAwNA,CAAC;AAEF,eAAe,OAAO,CAAC"}