@postgres.ai/shared 4.0.4 → 4.1.0

package/{pages → dist/pages}/CreateClone/index.js

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import { useTimer } from 'use-timer';
-import { Paper, FormControlLabel, Checkbox, IconButton, InputAdornment } from '@material-ui/core';
+import { Paper, IconButton, InputAdornment } from '@material-ui/core';
 import { Info as InfoIcon, Visibility, VisibilityOff } from '@material-ui/icons';
 import copy from 'copy-to-clipboard';
 import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex';
@@ -74,7 +74,8 @@ export const CreateClone = observer((props) => {
             setIsLoadingSnapshots(true);
             await stores.main.load(props.instanceId);
             const branches = (_a = (await stores.main.getBranches(props.instanceId))) !== null && _a !== void 0 ? _a : [];
-            let initiallySelectedBranch = branches[0];
+            const mainBranch = branches.find((branch) => branch.name === 'main');
+            let initiallySelectedBranch = mainBranch !== null && mainBranch !== void 0 ? mainBranch : branches[0];
             if (initialBranch) {
                 const foundBranch = branches.find((branch) => branch.name === initialBranch);
                 if (foundBranch) {
@@ -83,13 +84,13 @@ export const CreateClone = observer((props) => {
             }
             setBranchesList(branches);
             formik.setFieldValue('branch', (_b = initiallySelectedBranch === null || initiallySelectedBranch === void 0 ? void 0 : initiallySelectedBranch.name) !== null && _b !== void 0 ? _b : '');
-            formik.setFieldValue('dataset', (_c = initiallySelectedBranch === null || initiallySelectedBranch === void 0 ? void 0 : initiallySelectedBranch.dataset) !== null && _c !== void 0 ? _c : '');
+            formik.setFieldValue('dataset', (_c = initiallySelectedBranch === null || initiallySelectedBranch === void 0 ? void 0 : initiallySelectedBranch.baseDataset) !== null && _c !== void 0 ? _c : '');
             if (initiallySelectedBranch) {
-                const compositeKey = `${initiallySelectedBranch.name}|${initiallySelectedBranch.dataset}`;
+                const compositeKey = `${initiallySelectedBranch.name}|${initiallySelectedBranch.baseDataset}`;
                 setSelectedBranchKey(compositeKey);
             }
             if (props.api.getSnapshots && initiallySelectedBranch) {
-                await fetchBranchSnapshotsData(initiallySelectedBranch.name, initiallySelectedBranch.dataset, initialSnapshotId);
+                await fetchBranchSnapshotsData(initiallySelectedBranch.name, initiallySelectedBranch.baseDataset, initialSnapshotId);
             }
             else if (!props.api.getSnapshots) {
                 const allSnapshots = (_f = (_e = (_d = stores.main) === null || _d === void 0 ? void 0 : _d.snapshots) === null || _e === void 0 ? void 0 : _e.data) !== null && _f !== void 0 ? _f : [];
@@ -138,8 +139,8 @@ export const CreateClone = observer((props) => {
     const isCreatingClone = (formik.isSubmitting || isCloneUnstable) && !stores.main.cloneError;
     return (_jsxs(_Fragment, { children: [headRendered, _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.form, children: [_jsxs("div", { className: styles.section, children: [branchesList && branchesList.length > 0 && (_jsx(Select, { fullWidth: true, label: "Branch", value: selectedBranchKey, disabled: !branchesList || isCreatingClone, onChange: handleSelectBranch, error: Boolean(formik.errors.branch), items: (_g = branchesList === null || branchesList === void 0 ? void 0 : branchesList.map((branch) => {
                                             return {
-                                                value: `${branch.name}|${branch.dataset}`,
-                                                children: `${branch.name} (${branch.dataset})`,
+                                                value: `${branch.name}|${branch.baseDataset}`,
+                                                children: `${branch.name} (${branch.baseDataset})`,
                                             };
                                         })) !== null && _g !== void 0 ? _g : [] })), _jsx(TextField, { fullWidth: true, label: "Clone ID", value: formik.values.cloneId, onChange: (e) => {
                                             const sanitizedCloneIdValue = e.target.value.replace(/\s/g, '');
@@ -165,7 +166,31 @@ export const CreateClone = observer((props) => {
                                                     if (formik.errors.dbPassword) {
                                                         formik.setFieldError('dbPassword', '');
                                                     }
-                                                }, isDisabled: isCreatingClone, children: "Generate" }), passwordGenerated && (_jsx("span", { className: styles.passwordHint, children: "New password created. Copy and save it securely." }))] }), _jsx("p", { className: cn(formik.errors.dbPassword && styles.error, styles.remark), children: formik.errors.dbPassword })] }), _jsxs("div", { className: styles.section, children: [_jsx("h2", { className: styles.title, children: "Clone protection" }), _jsx(FormControlLabel, { label: "Enable deletion protection", control: _jsx(Checkbox, { checked: formik.values.isProtected, onChange: (e) => formik.setFieldValue('isProtected', e.target.checked), name: "protected", disabled: isCreatingClone }) }), _jsxs("p", { className: styles.remark, children: ["When enabled, no one can delete this clone and automated deletion is also disabled.", _jsx("br", {}), "Please be careful: abandoned clones with this checkbox enabled may cause out-of-disk-space events. Check disk space on a daily basis and delete this clone once the work is done."] })] }), _jsxs("div", { className: cn(styles.marginBottom, styles.section), children: [_jsxs(Paper, { className: styles.summary, children: [_jsx(InfoIcon, { className: styles.summaryIcon }), _jsxs("div", { className: styles.params, children: [_jsxs("p", { className: styles.param, children: [_jsx("span", { children: "Data size:" }), _jsx("strong", { children: ((_j = stores.main.instance.state) === null || _j === void 0 ? void 0 : _j.dataSize)
+                                                }, isDisabled: isCreatingClone, children: "Generate" }), passwordGenerated && (_jsx("span", { className: styles.passwordHint, children: "New password created. Copy and save it securely." }))] }), _jsx("p", { className: cn(formik.errors.dbPassword && styles.error, styles.remark), children: formik.errors.dbPassword })] }), _jsxs("div", { className: styles.section, children: [_jsx("h2", { className: styles.title, children: "Clone protection" }), _jsx(Select, { label: "Deletion protection", items: (() => {
+                                            var _a, _b, _c, _d;
+                                            const maxDurationMinutes = (_d = (_c = (_b = (_a = stores.main.instance) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.cloning) === null || _c === void 0 ? void 0 : _c.protectionMaxDurationMinutes) !== null && _d !== void 0 ? _d : 0;
+                                            const allowForever = maxDurationMinutes === 0;
+                                            const allDurationOptions = [
+                                                { value: '60', minutes: 60, children: '1 hour' },
+                                                { value: '720', minutes: 720, children: '12 hours' },
+                                                { value: '1440', minutes: 1440, children: '1 day' },
+                                                { value: '2880', minutes: 2880, children: '2 days' },
+                                                { value: '4320', minutes: 4320, children: '3 days' },
+                                                { value: '5760', minutes: 5760, children: '4 days' },
+                                                { value: '7200', minutes: 7200, children: '5 days' },
+                                                { value: '8640', minutes: 8640, children: '6 days' },
+                                                { value: '10080', minutes: 10080, children: '7 days' },
+                                                { value: '20160', minutes: 20160, children: '14 days' },
+                                                { value: '43200', minutes: 43200, children: '30 days' },
+                                            ];
+                                            return [
+                                                { value: 'none', children: 'No protection' },
+                                                ...allDurationOptions
+                                                    .filter((opt) => maxDurationMinutes === 0 || opt.minutes <= maxDurationMinutes)
+                                                    .map(({ value, children }) => ({ value, children })),
+                                                ...(allowForever ? [{ value: '0', children: 'Forever' }] : []),
+                                            ];
+                                        })(), value: formik.values.protectionDurationMinutes, onChange: (e) => formik.setFieldValue('protectionDurationMinutes', e.target.value), disabled: isCreatingClone, style: { minWidth: 100 } }), _jsxs("p", { className: styles.remark, children: ["Select how long this clone should be protected from deletion. Protected clones cannot be deleted manually or automatically.", _jsx("br", {}), "Check disk space regularly and delete this clone once the work is done."] })] }), _jsxs("div", { className: cn(styles.marginBottom, styles.section), children: [_jsxs(Paper, { className: styles.summary, children: [_jsx(InfoIcon, { className: styles.summaryIcon }), _jsxs("div", { className: styles.params, children: [_jsxs("p", { className: styles.param, children: [_jsx("span", { children: "Data size:" }), _jsx("strong", { children: ((_j = stores.main.instance.state) === null || _j === void 0 ? void 0 : _j.dataSize)
                                                                     ? formatBytesIEC(stores.main.instance.state.dataSize)
                                                                     : '-' })] }), _jsxs("p", { className: styles.param, children: [_jsx("span", { children: "Expected cloning time:" }), _jsxs("strong", { children: [round((_k = stores.main.instance.state) === null || _k === void 0 ? void 0 : _k.cloning.expectedCloningTime, 2), ' ', "s"] })] })] })] }), stores.main.cloneError && (_jsx("div", { className: cn(styles.marginBottom, styles.section), children: _jsx(ErrorStub, { message: stores.main.cloneError }) })), _jsx("div", { className: styles.controls, children: _jsxs(Button, { onClick: formik.submitForm, variant: "primary", size: "medium", isDisabled: isCreatingClone, children: ["Create clone", isCreatingClone && (_jsx(Spinner, { size: "sm", className: styles.spinner }))] }) })] })] }), _jsx("div", { className: styles.form, children: _jsxs("div", { className: styles.snippetContainer, children: [_jsx(SectionTitle, { className: styles.title, tag: "h1", level: 1, text: "The same using CLI" }), _jsx("p", { className: styles.text, children: "Alternatively, you can create a new clone using CLI. Fill the form, copy the command below and paste it into your terminal." }), _jsx(SyntaxHighlight, { wrapLines: true, content: getCliCreateCloneCommand(formik.values, showPassword) }), _jsx(SectionTitle, { className: styles.title, tag: "h2", level: 2, text: "Check clone status" }), _jsx("p", { className: styles.text, children: "To check the status of your newly created clone, use the command below." }), _jsx(SyntaxHighlight, { content: getCliCloneStatus(formik.values.cloneId) })] }) })] })] }));
 });

package/dist/pages/CreateClone/styles.module.scss

@@ -0,0 +1,128 @@
+.container {
+  display: flex;
+  gap: 60px;
+  margin-top: 20px;
+  max-width: 1200px;
+
+  @media (max-width: 1300px) {
+    flex-direction: column;
+    gap: 20px;
+  }
+}
+
+.title {
+  margin-top: 16px;
+}
+
+.form {
+  flex: 1 1 0;
+}
+
+.snippetContainer {
+  flex: 1 1 0;
+  min-width: 0;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  padding: 0 20px 10px 20px;
+  height: max-content;
+  border-radius: 4px;
+}
+
+.snapshotItem {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
+}
+
+.section {
+  & + .section {
+    margin-top: 24px;
+  }
+}
+
+.title {
+  font-size: inherit;
+  font-weight: 700;
+}
+
+.text {
+  margin-top: 8px;
+}
+
+.marginBottom {
+  margin-bottom: 10px;
+}
+
+.remark {
+  font-size: 12px;
+}
+
+.error {
+  color: red;
+}
+
+.snapshotTag {
+  font-weight: 700;
+  margin-left: 4px;
+}
+
+.summary {
+  display: flex;
+  align-items: center;
+  background-color: rgb(250, 250, 250) !important;
+  box-shadow: none !important;
+  padding: 12px;
+  margin: 10px 0 15px 0;
+}
+
+.summaryIcon {
+  width: 30px;
+  color: silver;
+  margin-right: 12px;
+}
+
+.params {
+  flex: 1 1 100%;
+}
+
+.param {
+  display: flex;
+  justify-content: space-between;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+}
+
+.spinner {
+  margin-left: 8px;
+}
+
+.elapsedTime {
+  margin-left: 24px;
+}
+
+.snapshotOverflow {
+  width: 100%;
+  word-wrap: break-word;
+  white-space: initial;
+}
+
+.pageTitle {
+  margin-top: 8px;
+  line-height: 26px;
+}
+
+.passwordActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  margin-bottom: 16px;
+}
+
+.passwordHint {
+  font-size: 12px;
+  color: #f57c00;
+  font-weight: 500;
+}

package/{pages → dist/pages}/CreateClone/useForm.d.ts

@@ -6,7 +6,7 @@ export declare type FormValues = {
     snapshotId: string;
     dbUser: string;
     dbPassword: string;
-    isProtected: boolean;
+    protectionDurationMinutes: string;
 };
 export declare const useForm: (onSubmit: (values: FormValues) => void) => {
     initialValues: FormValues;
@@ -40,7 +40,7 @@ export declare const useForm: (onSubmit: (values: FormValues) => void) => {
     dirty: boolean;
     unregisterField: (name: string) => void;
     registerField: (name: string, { validate }: any) => void;
-    getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+    getFieldProps: (nameOrOptions: string | import("formik").FieldConfig<any>) => import("formik").FieldInputProps<any>;
     getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
     getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
     validateOnBlur: boolean;

package/{pages → dist/pages}/CreateClone/useForm.js

@@ -13,7 +13,7 @@ const Schema = Yup.object().shape({
     snapshotId: Yup.string().required('Date state time is required'),
     dbUser: Yup.string().required('Database username is required'),
     dbPassword: Yup.string().required('Database password is required'),
-    isProtected: Yup.boolean(),
+    protectionDurationMinutes: Yup.string(),
 });
 export const useForm = (onSubmit) => {
     const formik = useFormik({
@@ -24,7 +24,7 @@ export const useForm = (onSubmit) => {
             snapshotId: '',
             dbUser: '',
             dbPassword: '',
-            isProtected: false,
+            protectionDurationMinutes: 'none',
         },
         validationSchema: Schema,
         onSubmit,

package/{pages → dist/pages}/CreateClone/utils/index.js

@@ -4,21 +4,22 @@ const shellEscape = (str) => {
     return "'" + str.replace(/'/g, "'\\''") + "'";
 };
 export const getCliCreateCloneCommand = (values, showPassword) => {
-    const { dbUser, dbPassword, branch, isProtected, cloneId } = values;
+    const { dbUser, dbPassword, snapshotId, protectionDurationMinutes, cloneId } = values;
     const usernameDisplay = dbUser ? shellEscape(dbUser) : `<USERNAME>`;
     const passwordDisplay = dbPassword
         ? (showPassword ? shellEscape(dbPassword) : dbPassword.replace(/./g, '*'))
         : `<PASSWORD>`;
     const cloneIdDisplay = cloneId ? shellEscape(cloneId) : `<CLONE_ID>`;
+    const protectedFlag = protectionDurationMinutes !== 'none' ? `--protected ${protectionDurationMinutes}` : '';
     return `dblab clone create \
 
   --username ${usernameDisplay} \
 
   --password ${passwordDisplay} \
 
-  ${branch ? `--branch ${shellEscape(branch)}` : ``} \
+  ${snapshotId ? `--snapshot-id ${shellEscape(snapshotId)}` : ``} \
 
-  ${isProtected ? `--protected` : ''} \
+  ${protectedFlag} \
 
   --id ${cloneIdDisplay} \ `;
 };

package/{pages → dist/pages}/CreateSnapshot/useForm.d.ts

@@ -36,7 +36,7 @@ export declare const useForm: (onSubmit: (values: FormValues) => void) => {
         dirty: boolean;
         unregisterField: (name: string) => void;
         registerField: (name: string, { validate }: any) => void;
-        getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+        getFieldProps: (nameOrOptions: string | import("formik").FieldConfig<any>) => import("formik").FieldInputProps<any>;
         getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
         getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
         validateOnBlur: boolean;

package/dist/pages/Instance/Clones/ClonesList/styles.module.scss

@@ -0,0 +1,42 @@
+@import '@postgres.ai/shared/styles/vars';
+
+.interactiveRow {
+  cursor: pointer;
+}
+
+.verticalCentered {
+  display: flex;
+  align-items: center;
+}
+
+.infoIcon {
+  margin-left: 4px;
+  height: 12px;
+  width: 12px;
+}
+
+.sortIcon {
+  margin-left: 8px;
+  width: 10px;
+  cursor: pointer;
+  transition: transform 0.15s ease-in-out;
+}
+
+.hideSortIcon {
+  opacity: 0;
+}
+
+.sortIconUp {
+  transform: rotate(180deg);
+}
+
+.protectionIcon {
+  display: block;
+  margin-left: 5px;
+  height: 1em;
+  color: $color-gray-semi-dark;
+}
+
+.emptyStub {
+  margin-top: 16px;
+}

package/dist/pages/Instance/Clones/Header/Item/styles.module.scss

@@ -0,0 +1,17 @@
+@import '@postgres.ai/shared/styles/vars';
+
+.root {
+  font-size: 12px;
+  text-align: center;
+  color: $color-gray-semi-dark;
+}
+
+.value {
+  font-weight: bold;
+  font-size: 14px;
+  color: $color-black;
+}
+
+.description {
+  margin-top: 4px;
+}

package/dist/pages/Instance/Clones/Header/styles.module.scss

@@ -0,0 +1,14 @@
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  margin-bottom: 20px;
+  background-color: #f9f9f9;
+
+  @include sm {
+    padding: 20px 0;
+    margin-bottom: 10px;
+  }
+}

package/dist/pages/Instance/Configuration/styles.module.scss

@@ -0,0 +1,122 @@
+.textField {
+  width: 400px;
+  max-width: 100%;
+
+  input,
+  label {
+    font-family: 'Fira Code', monospace;
+    color: #000;
+  }
+
+  label {
+    font-size: 10px;
+  }
+
+  :disabled {
+    cursor: not-allowed;
+    color: rgba(0, 0, 0, 0.38);
+  }
+
+  @media (max-width: 600px) {
+    width: 100%;
+  }
+}
+
+.chipContainer {
+  width: 350px;
+  max-width: 100%;
+  margin-bottom: 0;
+}
+
+.databasesContainer {
+  width: 350px;
+  max-width: 100%;
+}
+
+.chip {
+  margin-right: 8px;
+  margin-top: 8px;
+}
+
+.underline {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.root {
+  font-size: 12px;
+  max-width: 450px;
+}
+
+.spinner {
+  margin-left: 8px;
+}
+
+.spinnerContainer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.infoIcon {
+  margin-left: 6px;
+  height: 12px;
+  width: 12px;
+}
+
+.externalIcon {
+  margin-left: 2px;
+  height: 12px;
+  width: 12px;
+}
+
+.externalLink {
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+
+  &:link,
+  &:hover {
+    color: #0000ee;
+  }
+
+  &:visited {
+    color: #551a8b;
+  }
+}
+
+.largeIcon {
+  height: 15px;
+  width: 15px;
+}
+
+.subsection {
+  margin-bottom: 0.25rem;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.modalTitle {
+  font-size: 16px;
+  font-weight: bold !important;
+}
+
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.firaCodeFont {
+  font-family: 'Fira Code', monospace !important;
+}
+
+.snackbar {
+  div {
+    background-color: #ff6212;
+    color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+}

package/{pages → dist/pages}/Instance/Configuration/useForm.d.ts

@@ -55,7 +55,7 @@ export declare const useForm: (onSubmit: (values: FormValues) => void) => {
         dirty: boolean;
         unregisterField: (name: string) => void;
         registerField: (name: string, { validate }: any) => void;
-        getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+        getFieldProps: (nameOrOptions: string | import("formik").FieldConfig<any>) => import("formik").FieldInputProps<any>;
         getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
         getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
         validateOnBlur: boolean;

package/{pages → dist/pages}/Instance/Info/Disks/Disk/ProgressBar/index.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 declare type Props = {
     value: number;
     total: number;
     thresholdPercent: number;
+    style?: CSSProperties;
 };
 export declare const ProgressBar: (props: Props) => JSX.Element;
 export {};

package/{pages → dist/pages}/Instance/Info/Disks/Disk/ProgressBar/index.js

@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme) => ({
 }), { index: 1 });
 export const ProgressBar = (props) => {
     const classes = useStyles();
-    return (_jsxs("div", { className: classes.root, children: [_jsx("div", { className: classes.indicator, style: { width: `${(props.value / props.total) * 100}%` } }), _jsx(Tooltip, { content: `+${props.thresholdPercent}% disk usage may result in performance degradation`, children: _jsx(PoinerIcon, { className: classes.pointer, style: {
+    return (_jsxs("div", { className: classes.root, style: props.style, children: [_jsx("div", { className: classes.indicator, style: { width: `${props.total === 0 ? 0 : (props.value / props.total) * 100}%` } }), _jsx(Tooltip, { content: `+${props.thresholdPercent}% disk usage may result in performance degradation`, children: _jsx(PoinerIcon, { className: classes.pointer, style: {
                         left: `${props.thresholdPercent}%`,
                     } }) })] }));
 };

package/{pages/Instance/Info/Disks/Disk → dist/pages/Instance/Info/Disks/PoolSection/DatasetRow}/index.d.ts

@@ -1,15 +1,13 @@
 /// <reference types="react" />
-declare type Props = {
+export declare type DatasetInfo = {
     id: string | null;
     name: string;
-    totalDataSize: number;
+    showName: boolean;
+    status: 'refreshing' | 'active' | 'empty';
     mode: string;
-    refreshingStartDate: Date | null;
+    usedDataSize: number;
     clonesCount: number;
     snapshotsCount: number;
-    usedDataSize: number;
-    freeDataSize: number;
-    status: 'refreshing' | 'active' | 'empty';
+    refreshingStartDate: Date | null;
 };
-export declare const Disk: (props: Props) => JSX.Element;
-export {};
+export declare const DatasetRow: (props: DatasetInfo) => JSX.Element;

package/dist/pages/Instance/Info/Disks/PoolSection/DatasetRow/index.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { colors } from '@postgres.ai/shared/styles/colors';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { formatUTC, isValidDate } from '@postgres.ai/shared/utils/date';
+import { Property } from '../../../components/Property';
+import { ActionsMenu } from '../../Disk/ActionsMenu';
+import { Status } from '../../Disk/Status';
+const useStyles = makeStyles({
+    root: {
+        border: `1px solid ${colors.consoleStroke}`,
+        padding: '6px 8px 8px',
+        borderRadius: '4px',
+        backgroundColor: colors.white,
+    },
+    header: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    titleWrapper: {
+        display: 'flex',
+        flex: '1 1 auto',
+        alignItems: 'center',
+        marginRight: '16px',
+        minWidth: 0,
+    },
+    title: {
+        fontWeight: 700,
+        fontSize: '14px',
+        margin: '0 4px 0 0',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+    },
+    content: {
+        marginTop: '8px',
+    },
+    uppercaseContent: {
+        textTransform: 'uppercase',
+    },
+}, { index: 1 });
+export const DatasetRow = (props) => {
+    var _a, _b;
+    const classes = useStyles();
+    return (_jsxs("div", { className: classes.root, children: [_jsxs("div", { className: classes.header, children: [props.showName ? (_jsxs("div", { className: classes.titleWrapper, children: [_jsx("h6", { title: props.name, className: classes.title, children: props.name }), _jsx(ActionsMenu, { poolId: props.id, poolName: (_a = props.id) !== null && _a !== void 0 ? _a : props.name, isActive: props.status === 'active' })] })) : (_jsx(ActionsMenu, { poolId: props.id, poolName: (_b = props.id) !== null && _b !== void 0 ? _b : props.name, isActive: props.status === 'active' })), _jsx(Status, { value: props.status, hasWarning: false })] }), _jsx(Property, { name: "Mode", classes: { content: classes.uppercaseContent }, children: props.mode }), props.status === 'refreshing' && props.refreshingStartDate && (_jsx("div", { className: classes.content, children: _jsxs(Property, { name: "Refreshing started at", children: [formatUTC(props.refreshingStartDate, 'yyyy-MM-dd HH:mm:ss'), " UTC (", isValidDate(props.refreshingStartDate)
+                            ? formatDistanceToNowStrict(props.refreshingStartDate, {
+                                addSuffix: true,
+                            })
+                            : '-', ")"] }) })), _jsxs("div", { className: classes.content, children: [_jsx(Property, { name: "Clones", children: props.clonesCount }), _jsx(Property, { name: "Snapshots", children: props.snapshotsCount })] }), _jsx("div", { className: classes.content, children: _jsx(Property, { name: "Size", children: formatBytesIEC(props.usedDataSize) }) })] }));
+};

package/dist/pages/Instance/Info/Disks/PoolSection/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DatasetInfo } from './DatasetRow';
+declare type Props = {
+    poolName: string;
+    totalSize: number;
+    freeSize: number;
+    datasets: DatasetInfo[];
+};
+export declare const PoolSection: (props: Props) => JSX.Element;
+export {};