@plutonhq/core-frontend 0.1.33 → 0.1.34

package/package.json

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

package/src/components/Device/DeviceResticSettings/DeviceResticSettings.tsx

@@ -44,8 +44,8 @@ const DeviceResticSettings = ({ settings = {}, onUpdate }: DeviceResticSettingsP
          <div className={classes.field}>
             <NumberInput
                label="Packet Size (MB)"
-               fieldValue={settings?.packSize ? parseInt(settings.packSize.replace('MiB', ''), 10) : ''}
-               onUpdate={(val) => onUpdate({ ...settings, packSize: val ? val + 'MiB' : '' })}
+               fieldValue={settings?.packSize ? parseInt(settings.packSize, 10) : ''}
+               onUpdate={(val) => onUpdate({ ...settings, packSize: val ? val.toString() : '' })}
                min={0}
                max={4000}
                hint="Packs are blobs of data, which are encrypted and stored in the repository. Increasing the pack size requires more disk space for temporary pack files to be created before uploading."

package/src/components/Plan/PlanSettings/PlanPerformanceSettings.tsx

@@ -34,8 +34,8 @@ const PlanPerformanceSettings = ({ plan, onUpdate }: PlanPerformanceSettingsProp
          <div className={classes.field}>
             <NumberInput
                label="Packet Size (MB)"
-               fieldValue={perfSettings?.packSize ? parseInt(perfSettings.packSize.replace('MiB', ''), 10) : ''}
-               onUpdate={(val) => onUpdate({ ...perfSettings, packSize: val + 'MiB' })}
+               fieldValue={perfSettings?.packSize ? parseInt(perfSettings.packSize, 10) : ''}
+               onUpdate={(val) => onUpdate({ ...perfSettings, packSize: val ? val.toString() : '' })}
                min={0}
                max={4000}
             />

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

@@ -44,7 +44,7 @@
    border: 1px solid var(--line-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-   min-width: 70px;
+   min-width: 80px;
 
    li {
       padding: 4px 10px;

package/src/components/Plan/PlanSizeChart/PlanSizeChart.tsx

@@ -10,12 +10,12 @@ ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler,
 
 type RangeKey = '7d' | '14d' | '1m' | '3m' | '6m';
 
-const RANGE_OPTIONS: { key: RangeKey; label: string; days: number }[] = [
-   { key: '7d', label: '7d', days: 7 },
-   { key: '14d', label: '14d', days: 14 },
-   { key: '1m', label: '1m', days: 30 },
-   { key: '3m', label: '3m', days: 90 },
-   { key: '6m', label: '6m', days: 180 },
+const RANGE_OPTIONS: { key: RangeKey; label: string; labelFull: string; days: number }[] = [
+   { key: '7d', label: '7d', labelFull: '7 days', days: 7 },
+   { key: '14d', label: '14d', labelFull: '14 days', days: 14 },
+   { key: '1m', label: '1m', labelFull: '1 month', days: 30 },
+   { key: '3m', label: '3m', labelFull: '3 months', days: 90 },
+   { key: '6m', label: '6m', labelFull: '6 months', days: 180 },
 ];
 
 interface PlanSizeChartProps {
@@ -42,7 +42,10 @@ const PlanSizeChart = ({ backups }: PlanSizeChartProps) => {
 
    const filtered = useMemo(() => {
       const cutoff = Date.now() - activeRange.days * 24 * 60 * 60 * 1000;
-      return [...(backups || [])]
+      // if there is only one backup duplicate the first backup to make 2 items
+      // so that the graph is never empty and shows the size even if there is only one backup in the selected range
+      const theBackups = backups && backups.length === 1 ? [backups[0], backups[0]] : backups || [];
+      return [...theBackups]
          .filter((b) => {
             const t = new Date(b.started).getTime();
             return !isNaN(t) && t >= cutoff;
@@ -141,7 +144,7 @@ const PlanSizeChart = ({ backups }: PlanSizeChartProps) => {
                               setOpen(false);
                            }}
                         >
-                           {opt.label}
+                           {opt.labelFull}
                         </li>
                      ))}
                </ul>

package/src/components/common/FileManager/FileManager.module.scss

@@ -163,6 +163,13 @@
    max-width: 70px;
 }
 
+.fileDate {
+   max-width: 150px;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
+}
+
 .selected {
    background: #e6f7ff;
 }