UI - add garbage collection policy configuration (#2243)

pkg/graveler/retention/garbage_collection_manager.go

@@ -66,11 +66,19 @@ func NewGarbageCollectionManager(db db.Database, blockAdapter block.Adapter, ref
 }
 
 func (m *GarbageCollectionManager) GetRules(ctx context.Context, storageNamespace graveler.StorageNamespace) (*graveler.GarbageCollectionRules, error) {
-	reader, err := m.blockAdapter.Get(ctx, block.ObjectPointer{
+	objectPointer := block.ObjectPointer{
 		StorageNamespace: string(storageNamespace),
 		Identifier:       fmt.Sprintf(configFileSuffixTemplate, m.committedBlockStoragePrefix),
 		IdentifierType:   block.IdentifierTypeRelative,
-	}, -1)
+	}
+	exists, err := m.blockAdapter.Exists(ctx, objectPointer) // TODO(Guys): remove exists validation once get returns not found.
+	if err != nil {
+		return nil, err
+	}
+	if !exists {
+		return nil, graveler.ErrNotFound
+	}
+	reader, err := m.blockAdapter.Get(ctx, objectPointer, -1)
 	if err != nil {
 		return nil, err
 	}

webui/src/lib/api/index.js

@@ -613,6 +613,29 @@ class Actions {
 
 }
 
+class Retention {
+    async getGCPolicy(repoID) {
+        const response = await apiRequest(`/repositories/${repoID}/gc/rules`);
+        if (response.status === 404) {
+            throw new NotFoundError('policy not found')
+        }
+        if (response.status !== 200) {
+            throw new Error(`could not get gc policy: ${await extractError(response)}`);
+        }
+        return response.json();
+    }
+
+    async setGCPolicy(repoID,policy) {
+        const response = await apiRequest(`/repositories/${repoID}/gc/rules`,{
+            method: 'POST',
+            body: policy
+        });
+        if (response.status !== 204) {
+            throw new Error(`could not set gc policy: ${await extractError(response)}`);
+        }
+        return response;
+    }
+}
 
 class Setup {
     async lakeFS(username) {
@@ -675,4 +698,5 @@ export const refs = new Refs();
 export const setup = new Setup();
 export const auth = new Auth();
 export const actions = new Actions();
+export const retention = new Retention();
 export const config = new Config();

webui/src/lib/components/controls.jsx

@@ -330,7 +330,7 @@ export const ToggleSwitch = ({  label, id, defaultChecked, onChange }) => {
                 label={label}
                 id={id}
                 defaultChecked={defaultChecked}
-                onChange={onChange}
+                onChange={(e) => onChange(e.target.checked)}
             />
         </Form>
     )

webui/src/lib/components/auth/policy.jsx → webui/src/lib/components/policy.jsx

@@ -6,10 +6,11 @@ import Form from "react-bootstrap/Form";
 import {FormControl} from "react-bootstrap";
 import Button from "react-bootstrap/Button";
 
-import {Error, FormattedDate} from "../controls";
+import {Error, FormattedDate} from "./controls";
 
 
-export const PolicyEditor = ({ show, onHide, onSubmit, policy = null }) => {
+
+export const PolicyEditor = ({ show, onHide, onSubmit, policy = null, noID = false, isCreate = false }) => {
     const [error, setError] = useState(null);
     const idField = useRef(null);
     const bodyField = useRef(null);
@@ -22,7 +23,7 @@ export const PolicyEditor = ({ show, onHide, onSubmit, policy = null }) => {
     const [body, setBody] = useState('')
     useEffect(() => {
         if (policy !== null) {
-            setBody(JSON.stringify({statement: policy.statement}, null, 4));
+            setBody(JSON.stringify(policy, null, 4));
         }
     }, [policy]);
 
@@ -42,19 +43,19 @@ export const PolicyEditor = ({ show, onHide, onSubmit, policy = null }) => {
         setError(null);
         onHide();
     };
-
+    const actionName = policy === null || isCreate ? 'Create' : 'Edit'
     return (
         <Modal show={show} onHide={hide}>
             <Modal.Header closeButton>
-                <Modal.Title>{(policy === null) ? 'Create' : 'Edit'} Policy</Modal.Title>
+                <Modal.Title>{actionName} Policy</Modal.Title>
             </Modal.Header>
 
             <Modal.Body>
                 <Form onSubmit={e => {
                     e.preventDefault();
                     submit();
                 }}>
-                    {(policy === null) && (
+                    {(policy === null) && !noID && (
                         <Form.Group>
                             <FormControl ref={idField} autoFocus placeholder="Policy ID (e.g. 'MyRepoReadWrite')" type="text"/>
                         </Form.Group>
@@ -77,7 +78,7 @@ export const PolicyEditor = ({ show, onHide, onSubmit, policy = null }) => {
             </Modal.Body>
 
             <Modal.Footer>
-                <Button onClick={submit} variant="success">{(policy === null) ? 'Create' : 'Edit'}</Button>
+                <Button onClick={submit} variant="success">Save</Button>
                 <Button onClick={hide} variant="secondary">Cancel</Button>
             </Modal.Footer>
         </Modal>

webui/src/pages/auth/policies/index.jsx

@@ -7,7 +7,7 @@ import {useAPIWithPagination} from "../../../lib/hooks/api";
 import {AuthLayout} from "../../../lib/components/auth/layout";
 import {ConfirmationButton} from "../../../lib/components/modals";
 import {Paginator} from "../../../lib/components/pagination";
-import {PolicyEditor} from "../../../lib/components/auth/policy";
+import {PolicyEditor} from "../../../lib/components/policy";
 import {
     ActionGroup,
     ActionsBar,

webui/src/pages/auth/policies/policy.jsx

@@ -8,7 +8,7 @@ import {AuthLayout} from "../../../lib/components/auth/layout";
 import {PolicyHeader} from "../../../lib/components/auth/nav";
 import {useAPI} from "../../../lib/hooks/api";
 import {auth} from "../../../lib/api";
-import {PolicyDisplay, PolicyEditor} from "../../../lib/components/auth/policy";
+import {PolicyDisplay, PolicyEditor} from "../../../lib/components/policy";
 import {
     ActionGroup,
     ActionsBar,

webui/src/pages/repositories/repository/commits/commit/index.jsx

@@ -59,11 +59,11 @@ const ChangeList = ({ repo, commit, after, prefix, delimiter, onPaginate }) => {
                                 label="Directory View"
                                 id="changes-directory-view-toggle"
                                 defaultChecked={(delimiter !== "")}
-                                onChange={(e) => {
+                                onChange={(checked) => {
                                     push({
                                         pathname: '/repositories/:repoId/commits/:commitId',
                                         params: {repoId: repo.id, commitId: commit.id},
-                                        query: {delimiter: (e.target.checked) ? "/" : ""},
+                                        query: {delimiter: (checked) ? "/" : ""},
                                     })
                                 }}
                             />

webui/src/pages/repositories/repository/index.jsx

@@ -7,7 +7,8 @@ import RepositoryBranchesPage from "./branches";
 import RepositoryComparePage from "./compare";
 import RepositoryCommitsIndexPage from "./commits";
 import RepositoryActionsIndexPage from "./actions";
-import RepositorySettingsPage from "./settings";
+import RepositoryGeneralSettingsPage from "./settings/general";
+import RepositoryRetentionPage from "./settings/retention";
 
 
 const RepositoryPage = () => {
@@ -34,8 +35,14 @@ const RepositoryPage = () => {
             <Route path="/repositories/:repoId/actions">
                 <RepositoryActionsIndexPage/>
             </Route>
-            <Route path="/repositories/:repoId/settings">
-                <RepositorySettingsPage/>
+            <Route exact path="/repositories/:repoId/settings/">
+                <RepositoryGeneralSettingsPage/>
+            </Route>
+            <Route path="/repositories/:repoId/settings/general">
+                <RepositoryGeneralSettingsPage/>
+            </Route>
+            <Route path="/repositories/:repoId/settings/retention">
+                <RepositoryRetentionPage/>
             </Route>
         </Switch>
     )

webui/src/pages/repositories/repository/settings.jsx → webui/src/pages/repositories/repository/settings/general.jsx

@@ -1,18 +1,18 @@
 import React, {useRef, useState} from "react";
 
-import {RepositoryPageLayout} from "../../../lib/components/repository/layout";
-import {RefContextProvider, useRefs} from "../../../lib/hooks/repo";
+import {RefContextProvider, useRefs} from "../../../../lib/hooks/repo";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import {TrashIcon} from "@primer/octicons-react";
 import Col from "react-bootstrap/Col";
-import {Error, Loading} from "../../../lib/components/controls";
+import {Error, Loading} from "../../../../lib/components/controls";
 import Modal from "react-bootstrap/Modal";
-import {repositories} from "../../../lib/api";
-import {useRouter} from "../../../lib/hooks/router";
-
+import {repositories} from "../../../../lib/api";
+import {useRouter} from "../../../../lib/hooks/router";
+import {SettingsLayout} from "./layout";
+import {RepositoryPageLayout} from "../../../../lib/components/repository/layout";
 
 const DeleteRepositoryModal = ({repo, show, onSubmit, onCancel}) => {
     const [isDisabled, setIsDisabled] = useState(true);
@@ -117,16 +117,17 @@ const SettingsContainer = () => {
 };
 
 
-const RepositorySettingsPage = () => {
+const RepositoryGeneralSettingsPage = () => {
     return (
         <RefContextProvider>
             <RepositoryPageLayout activePage={'settings'}>
-                <SettingsContainer/>
+                <SettingsLayout activeTab={"general"}>
+                    <SettingsContainer/>
+                </SettingsLayout>
             </RepositoryPageLayout>
         </RefContextProvider>
     )
 }
 
 
-
-export default RepositorySettingsPage;
+export default RepositoryGeneralSettingsPage;

webui/src/pages/repositories/repository/settings/layout.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Nav from "react-bootstrap/Nav";
+import Card from "react-bootstrap/Card";
+import {Link} from "../../../../lib/components/nav";
+import {useRefs} from "../../../../lib/hooks/repo";
+import {Error, Loading} from "../../../../lib/components/controls";
+
+
+export const SettingsLayout = ({ children, activeTab }) => {
+    const { repo, loading, error} = useRefs();
+    if (loading) return <Loading/>;
+    if (!!error) return <Error error={error}/>;
+    const repoId = repo.id
+    return (
+            <Container fluid="xl">
+                <Row className="mt-5">
+                    <Col md={{span: 3}}>
+                        <Card>
+                            <Card.Header>
+                                <Card.Title>Settings</Card.Title>
+                            </Card.Header>
+                            <Card.Body>
+                                <Nav variant="pills" className="flex-column">
+                                    <Link component={Nav.Link} href={{pathname: '/repositories/:repoId/settings/general', params: {repoId}}} active={activeTab === 'general'}>
+                                        General
+                                    </Link>
+                                </Nav>
+                                <Nav variant="pills" className="flex-column">
+                                    <Link component={Nav.Link} href={{pathname: '/repositories/:repoId/settings/retention', params: {repoId }}} active={activeTab === 'retention'}>
+                                        Retention
+                                    </Link>
+                                </Nav>
+                            </Card.Body>
+                        </Card>
+                    </Col>
+                    <Col md={{span: 9}}>
+                        {children}
+                    </Col>
+                </Row>
+            </Container>
+    );
+};
+