Skip to content

Commit

Permalink
backup-pages-tweaks (#945)
Browse files Browse the repository at this point in the history 
* add help text to BRP

* add recommendations

* Refactor

* Add banner

* Refactor

* Refactor

* add banners

* add banner

* add banner

* Refactor

* Refactor

* make check button larger

* Revert "make check button larger"

This reverts commit 0379f08.
  • Loading branch information
@joeclayallday
joeclayallday authored Oct 17, 2024
1 parent 5c26d00 commit 9ba20c9
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 17 deletions.
15 changes: 15 additions & 0 deletions src/ui/pages/database-detail-backups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { databaseActivityUrl, environmentBackupsUrl } from "@app/routes";
import { useNavigate, useParams } from "react-router";
import { usePaginatedBackupsByDatabaseId } from "../hooks";
import {
Banner,
BannerMessages,
ButtonLink,
ButtonOps,
Expand Down Expand Up @@ -37,6 +38,20 @@ export const DatabaseBackupsPage = () => {

return (
<Group>
<Banner variant="info">
<p className="">
<strong>Deleting Copies of Backups: </strong>Removing an original
backup deletes all its copies, but deleting a copy does not affect the
original —{" "}
<a
href=" https://www.aptible.com/docs/core-concepts/managed-databases/managing-databases/database-backups"
target="_blank"
rel="noreferrer"
>
view documentation.
</a>
</p>
</Banner>
<div className="flex gap-4 items-center">
<ButtonOps
envId={db.environmentId}
Expand Down
2 changes: 1 addition & 1 deletion src/ui/pages/environment-detail-backups.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ describe("EnvironmentBackupsPage", () => {
await screen.findByText(/Monthly backups retained/);
await screen.findByText(/Yearly backups retained/);
await screen.findByText(/Copy backups to another region/);
await screen.findByText(/Keep final backups/);
await screen.findByText(/Keep final backup for deprovisioned databases/);
});

it("should successfully edit backup retention policy values", async () => {
Expand Down
36 changes: 29 additions & 7 deletions src/ui/pages/environment-detail-backups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@ import { fetchDatabasesByEnvId } from "@app/deploy";
import { useQuery } from "@app/react";
import { useParams } from "react-router";
import { usePaginatedBackupsByEnvId } from "../hooks";
import { BackupRpView, Banner, DatabaseBackupsList, Group } from "../shared";
import {
BackupRpView,
Banner,
DatabaseBackupsList,
Group,
tokens,
} from "../shared";

export const EnvironmentBackupsPage = () => {
const { id = "" } = useParams();
Expand All @@ -12,14 +18,30 @@ export const EnvironmentBackupsPage = () => {
return (
<Group>
<BackupRpView envId={id} />

<h3 className={tokens.type.h3}>Backups of Deprovisioned Databases</h3>
<Banner variant="info">
<b>Only backups retained from deleted databases are shown below.</b> To
manage backups for a database, see the Backups tab on the database
itself. Removing an original backup deletes its copies. Deleting a copy
does not delete the original backup.
<p>
<strong>
Both Final and Manual backups from deleted databases are shown
below.
</strong>{" "}
Final backups follow the backup retention policy, while Manual backups
are retained indefinitely by default. To manage backups for an active
database, visit the Backups tab on the database itself.
</p>
<p>
<strong>Deleting Copies of Backups: </strong>Removing an original
backup deletes all its copies, but deleting a copy does not affect the
original —{" "}
<a
href=" https://www.aptible.com/docs/core-concepts/managed-databases/managing-databases/database-backups"
target="_blank"
rel="noreferrer"
>
view documentation.
</a>
</p>
</Banner>

<DatabaseBackupsList paginated={paginated} showDatabase showFinal />
</Group>
);
Expand Down
118 changes: 109 additions & 9 deletions src/ui/shared/environment/backup-retention-policy-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ import { Box } from "../box";
import { Button, ButtonAdmin } from "../button";
import { FormGroup } from "../form-group";
import { Group } from "../group";
import { IconEdit } from "../icons";
import { IconEdit, IconInfo } from "../icons";
import { Input } from "../input";
import { KeyValueGroup } from "../key-value";
import { Radio, RadioGroup } from "../select";
import { tokens } from "../tokens";
import { Tooltip } from "../tooltip";

const validators = {
daily: (data: UpdateBackupRp) => {
Expand Down Expand Up @@ -77,18 +78,84 @@ export const BackupRpView = ({ envId }: { envId: string }) => {
key: "Copy backups to another region",
value: backupRp.makeCopy ? "Yes" : "No",
},
{ key: "Keep final backups", value: backupRp.keepFinal ? "Yes" : "No" },
{
key: "Keep final backup for deprovisioned databases",
value: backupRp.keepFinal ? "Yes" : "No",
},
];

if (!editing) {
return (
<Box>
<Group>
<h3 className={tokens.type.h3}>Backup Retention Policy</h3>
<div className="w-[260px]">
<KeyValueGroup data={data} />
</div>

<Group variant="horizontal">
<div className="w-[370px]">
<KeyValueGroup data={data} />
</div>
<div>
<p className="text-black-500">
<Tooltip
fluid
text="Production environments: 14-30 Daily, Non-Production environments: 1-14 Daily"
>
<IconInfo
className="opacity-50 hover:opacity-100 mr-1 inline-block"
variant="sm"
/>
Show Daily Recommendations
</Tooltip>
</p>
<p className="text-black-500">
<Tooltip
fluid
text="Production environments: 12 Monthly, Non-Production environments: 0 Monthly"
>
<IconInfo
className="opacity-50 hover:opacity-100 mr-1 inline-block"
variant="sm"
/>
Show Monthly Recommendations
</Tooltip>
</p>
<p className="text-black-500">
<Tooltip
fluid
text="Production environments: 5 Yearly, Non-Production environments: 0 Yearly"
>
<IconInfo
className="opacity-50 hover:opacity-100 mr-1 inline-block"
variant="sm"
/>
Show Yearly Recommendations
</Tooltip>
</p>
<p className="text-black-500">
<Tooltip
fluid
text="Production environments: Yes, Non-Production environments: No"
>
<IconInfo
className="opacity-50 hover:opacity-100 mr-1 inline-block"
variant="sm"
/>
Show Copy Backups Recommendations
</Tooltip>
</p>
<p className="text-black-500">
<Tooltip
fluid
text="Production environments: Yes, Non-Production environments: No"
>
<IconInfo
className="opacity-50 hover:opacity-100 mr-1 inline-block"
variant="sm"
/>
Show Final Backup Recommendations
</Tooltip>
</p>
</div>
</Group>
<div>
<ButtonAdmin
envId={envId}
Expand Down Expand Up @@ -174,8 +241,21 @@ export const BackupRpEditor = ({
<BannerMessages {...loader} />

<div>
Any changes made will impact <strong>all database backups</strong>{" "}
inside this Environment.
<p>
<strong>
Any changes made will impact all database backups inside this
Environment.
</strong>
</p>
<p>
Recommendations for production environments: Daily: 14-30, Monthly:
12, Yearly: 5, Copy backups: Yes (depending on DR needs), Keep final
backups: Yes
</p>
<p>
Recommendations for non-production environments: Daily: 1-14,
Monthly: 0, Yearly: 0, Copy backups: No, Keep final backups: No
</p>
</div>

<form onSubmit={onSubmit} className="flex flex-col gap-2">
Expand All @@ -194,6 +274,9 @@ export const BackupRpEditor = ({
setDaily(Number.parseInt(e.currentTarget.value))
}
/>
<p className="text-sm mt-1 text-black">
Number of daily backups (taken every 24 hours) retained
</p>
</FormGroup>

<FormGroup
Expand All @@ -210,6 +293,9 @@ export const BackupRpEditor = ({
setMonthly(Number.parseInt(e.currentTarget.value));
}}
/>
<p className="text-sm mt-1 text-black">
Number of monthly backups (last backup of each month) retained
</p>
</FormGroup>

<FormGroup
Expand All @@ -226,6 +312,9 @@ export const BackupRpEditor = ({
setYearly(Number.parseInt(e.currentTarget.value));
}}
/>
<p className="text-sm mt-1 text-black">
Number of yearly backups (last backup of each year) retained
</p>
</FormGroup>

<FormGroup
Expand All @@ -240,9 +329,16 @@ export const BackupRpEditor = ({
<Radio value="yes">Yes</Radio>
<Radio value="no">No</Radio>
</RadioGroup>
<p className="text-sm mt-1 text-black">
When enabled, Aptible will copy all the backups within that
Environment to another region
</p>
</FormGroup>

<FormGroup label="Keep final backup" htmlFor="keep-final">
<FormGroup
label="Keep final backup for deprovisioned databases"
htmlFor="keep-final"
>
<RadioGroup
name="keep-final"
selected={keepFinal}
Expand All @@ -251,6 +347,10 @@ export const BackupRpEditor = ({
<Radio value="yes">Yes</Radio>
<Radio value="no">No</Radio>
</RadioGroup>
<p className="text-sm mt-1 text-black">
When enabled, Aptible will retain the last backup of a Database
after you deprovision it
</p>
</FormGroup>
</div>

Expand Down

0 comments on commit 9ba20c9

Please sign in to comment.