Feature 42

README.md

@@ -90,11 +90,16 @@ go build -o $GOPATH/bin/encloud encloud/cmd/cli
 6) Retrieve shared content from other users using your CID, DEK type and DEK.
 
     > encloud retrieve-shared-content -c `<RECEIVED_CID_OF_YOUR_EMAIL>` -d `<RECEIVED_DEK_FILE_PATH>` -e `<RECEIVED_DEK_TYPE>`
-
-7) Update configurations for the application using a compatible yaml file
+
+7) List all keys along with file metadata stored in the local KV store
+
+   > encloud list-keys 
+
+8) Update configurations for the application using a compatible yaml file
 
    > encloud update-config -f `<CONFIG_YAML_PATH>`
-
+
+
 
 ## Future features
 - Run bacalhau compute jobs on encrypted data natively via encloud

cmd/cli/list_keys.go

@@ -0,0 +1,45 @@
+package main
+
+import (
+	"encloud/pkg/api"
+	"encloud/pkg/types"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"os"
+
+	"github.com/spf13/cobra"
+)
+
+func ListKeysCmd() *cobra.Command {
+	cmd := &cobra.Command{
+		Use:   "list-keys",
+		Short: "List your all keys",
+		Long:  `List your all keys with files count`,
+		Run: func(cmd *cobra.Command, args []string) {
+			keys, err := api.ListKeys()
+			if err != nil {
+				fmt.Fprintf(cmd.OutOrStderr(), err.Error())
+				os.Exit(-1)
+			}
+			response := types.ListKeysResponse{
+				Status:     "success",
+				StatusCode: http.StatusCreated,
+				Message:    "Keys fetched successfully.",
+				Data:       keys,
+			}
+			encoded, err := json.MarshalIndent(response, "", "    ")
+			if err != nil {
+				fmt.Fprintf(cmd.OutOrStderr(), err.Error())
+				os.Exit(-1)
+			}
+			fmt.Fprintf(cmd.OutOrStdout(), string(encoded))
+		},
+	}
+
+	return cmd
+}
+
+func init() {
+	RootCmd.AddCommand(ListKeysCmd())
+}

cmd/web/HOWTO.md

@@ -36,6 +36,15 @@ Users can see a list of all files they have uploaded and the associated metadata
 * CID - CID of the file in the Filecoin network
 * Retrieve/Share - Button to perform actions; Retrieve opens the file detail page where the user can download the file; Share opens an pop-up where an email can be entered to share the file with
 
+## List Key Metadata 
+<img src="../../.github/Screen 6.png" alt="Screen 1" width="50%" height="50%"/>
+
+Users can view all the KEKs they have generated and the associated metadata from their local storage. This includes
+
+* Public key of the KEK pair
+* Total number of files encrypted and uploaded to Filecoin with the key pair
+* View a list of such files
+
 ## Retrieve Shared Files 
 <img src="../../.github/Screen 4.png" alt="Screen 1" width="50%" height="50%"/>
 

cmd/web/app.go

@@ -103,6 +103,29 @@ func (a *App) List(kek string) types.ListContentResponse {
 	return response
 }
 
+// Fetch data from db
+func (a *App) ListKeys() types.ListKeysResponse {
+	var response types.ListKeysResponse
+	keys, err := api.ListKeys()
+	if err != nil {
+		response = types.ListKeysResponse{
+			Status:     "fail",
+			StatusCode: http.StatusInternalServerError,
+			Message:    err.Error(),
+			Data:       types.ListKeys{},
+		}
+	} else {
+		response = types.ListKeysResponse{
+			Status:     "success",
+			StatusCode: http.StatusCreated,
+			Message:    "Content fetched successfully.",
+			Data:       keys,
+		}
+	}
+
+	return response
+}
+
 // Retrieve data by uuid
 func (a *App) RetrieveByUUID(uuid string, kek string, privateKey string, retrievalFileStoragePath string) types.RetrieveByCIDContentResponse {
 	var response types.RetrieveByCIDContentResponse

cmd/web/frontend/src/App.css

@@ -155,8 +155,8 @@ th {
     color: #f76e5c;
 }
 
-th:nth-child(0) {
-    width: 180px;
+.keyTable th:nth-child(1) {
+    width: 800px !important;
 }
 
 .tooltip-inner {

cmd/web/frontend/src/components/layouts/LeftNavbar.tsx

@@ -12,6 +12,7 @@ import settingsIcon from "../../assets/images/settings.png";
 import uploadIcon from "../../assets/images/upload.png";
 import downloadIcon from "../../assets/images/download.png";
 import shareIcon from "../../assets/images/share.png";
+import keyIcon from "../../assets/images/key.png";
 
 const LeftNavbar = () => {
   const [openContent, SetOpenContent] = useState(false);
@@ -102,6 +103,19 @@ const LeftNavbar = () => {
                   <div>Shared Content</div>
                 </Link>
               </li>
+              <li
+                className={
+                  splitLocation[2] === "list-keys"
+                    ? "menu-item active"
+                    : "menu-item"
+                }
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Link to="list-keys" className="menu-link">
+                  <Image src={keyIcon} className="menuIcon" />
+                  <div>Keys</div>
+                </Link>
+              </li>
             </ul>
           </li>
           <li

cmd/web/frontend/src/pages/Dashboard/ListContentPage/index.tsx

@@ -16,7 +16,7 @@ import menuIcon from "../../../assets/images/menu.png";
 import { List, Share } from "../../../../wailsjs/go/main/App";
 import { readKey } from "../../../services/localStorage.service";
 import { types } from "../../../../wailsjs/go/models";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { toast } from "react-toastify";
 
 const columnHelper = createColumnHelper<types.FileMetadata>();
@@ -26,6 +26,7 @@ const ListContentPage = () => {
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState<types.FileMetadata>();
   const [shareLoading, setShareLoading] = useState(false);
+  const location = useLocation();
 
   const { Formik } = formik;
 
@@ -50,14 +51,16 @@ const ListContentPage = () => {
       header: () => "Actions",
       cell: (info) => (
         <>
-          <Link
-            to={`/retrieve/${info.getValue()}`}
-            className="btn btn-primary list-button"
-            style={{ marginRight: 5 }}
-            state={{ metadata: info.row.original }}
-          >
-            Retrieve
-          </Link>
+          {!location.state && (
+            <Link
+              to={`/retrieve/${info.getValue()}`}
+              className="btn btn-primary list-button"
+              style={{ marginRight: 5 }}
+              state={{ metadata: info.row.original }}
+            >
+              Retrieve
+            </Link>
+          )}
           <Button
             className="list-button"
             onClick={() => {
@@ -74,7 +77,11 @@ const ListContentPage = () => {
 
   useEffect(() => {
     const fetchData = async () => {
-      const response = await List(readKey()?.PublicKey);
+      let key = readKey()?.PublicKey;
+      if (location && location.state) {
+        key = location.state.metadata.publicKey;
+      }
+      const response = await List(key);
 
       if (response.Data) {
         setData(response.Data);

cmd/web/frontend/src/pages/Dashboard/ListKeysPage/index.tsx

@@ -0,0 +1,115 @@
+import { Card, Image } from "react-bootstrap";
+import { PageHeader } from "../../../components/layouts/styles";
+import { SectionBox } from "./styles";
+import { useEffect, useState } from "react";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Table as BTable } from "react-bootstrap";
+
+import keyIcon from "../../../assets/images/key.png";
+import { ListKeys } from "../../../../wailsjs/go/main/App";
+import { types } from "../../../../wailsjs/go/models";
+import { Link } from "react-router-dom";
+
+const columnHelper = createColumnHelper<types.FetchKeysResponse>();
+
+const ListKeysPage = () => {
+  const [data, setData] = useState<types.FetchKeysResponse[]>([]);
+
+  const columns = [
+    columnHelper.accessor("publicKey", {
+      cell: (info) => info.getValue(),
+      header: () => <span>Key</span>,
+    }),
+    columnHelper.accessor("files", {
+      cell: (info) => info.getValue(),
+      header: () => <span>No of Files</span>,
+    }),
+    columnHelper.accessor("publicKey", {
+      header: () => "Actions",
+      cell: (info) => (
+        <Link
+          to={`/list`}
+          className="btn btn-primary list-button"
+          style={{ marginRight: 5 }}
+          state={{ metadata: info.row.original }}
+        >
+          View Files
+        </Link>
+      ),
+    }),
+  ];
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await ListKeys();
+
+      if (response.Data) {
+        setData(response.Data);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <>
+      <PageHeader>
+        <h2>
+          <Image className="titleIcon" src={keyIcon} />
+          <span>Key List</span>
+        </h2>
+      </PageHeader>
+      <SectionBox>
+        <Card>
+          <Card.Body>
+            <BTable bordered hover responsive className="keyTable">
+              <thead>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <tr key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => (
+                      <th key={header.id}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                      </th>
+                    ))}
+                  </tr>
+                ))}
+              </thead>
+              <tbody>
+                {table.getRowModel().rows.map((row) => (
+                  <tr key={row.id}>
+                    {row.getVisibleCells().map((cell) => (
+                      <td key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </BTable>
+          </Card.Body>
+        </Card>
+      </SectionBox>
+    </>
+  );
+};
+
+export default ListKeysPage;

cmd/web/frontend/src/pages/Dashboard/ListKeysPage/styles.ts

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+export const SectionBox = styled.div`
+  color: #697a8d;
+
+  td {
+    white-space: normal !important;
+    word-wrap: break-word;
+  }
+
+  table {
+    table-layout: fixed;
+  }
+
+  .list-button {
+    padding: 8px !important;
+  }
+`;

cmd/web/frontend/src/pages/Dashboard/RetrieveContentPage/index.tsx

@@ -4,7 +4,7 @@ import { ColoredBtn, SectionBox } from "./styles";
 import { PageHeader } from "../../../components/layouts/styles";
 
 // Images
-import dsRefreshImg from "../../../assets/images/refresh.png";
+import dsDownloadImg from "../../../assets/images/download.png";
 import { CSSProperties, useState } from "react";
 import {
   RetrieveByUUID,
@@ -100,7 +100,7 @@ const RetrieveContentPage = () => {
     <>
       <PageHeader>
         <h2>
-          <Image className="titleIcon" src={dsRefreshImg} />
+          <Image className="titleIcon" src={dsDownloadImg} />
           <span>Retrieve Content</span>
         </h2>
       </PageHeader>

cmd/web/frontend/src/pages/Dashboard/index.tsx

@@ -3,6 +3,7 @@ import MainLayout from "../../components/layouts/MainLayout";
 import ConfigurationPage from "./ConfigurationPage";
 import ManageKeyPairPage from "./ManageKeyPairPage";
 import ListContentPage from "./ListContentPage";
+import ListKeysPage from "./ListKeysPage";
 import UploadContent from "./UploadContentPage";
 import RetrieveContentPage from "./RetrieveContentPage";
 import RetrieveSharedContentPage from "./RetrieveSharedContentPage";
@@ -14,6 +15,7 @@ const Dashboard = () => {
         <Route path="/" element={<ManageKeyPairPage />} />
         <Route path="/upload" element={<UploadContent />} />
         <Route path="/list" element={<ListContentPage />} />
+        <Route path="/list-keys" element={<ListKeysPage />} />
         <Route path="/retrieve/:id" element={<RetrieveContentPage />} />
         <Route
           path="/retrieve-shared-content"

cmd/web/frontend/wailsjs/go/main/App.d.ts

@@ -8,6 +8,8 @@ export function GenerateKeyPair(arg1:string):Promise<types.GenerateKeyPairRespon
 
 export function List(arg1:string):Promise<types.ListContentResponse>;
 
+export function ListKeys():Promise<types.ListKeysResponse>;
+
 export function RestoreDefaultConfig():Promise<types.ConfigResponse>;
 
 export function RetrieveByUUID(arg1:string,arg2:string,arg3:string,arg4:string):Promise<types.RetrieveByCIDContentResponse>;

cmd/web/frontend/wailsjs/go/main/App.js

@@ -14,6 +14,10 @@ export function List(arg1) {
   return window['go']['main']['App']['List'](arg1);
 }
 
+export function ListKeys() {
+  return window['go']['main']['App']['ListKeys']();
+}
+
 export function RestoreDefaultConfig() {
   return window['go']['main']['App']['RestoreDefaultConfig']();
 }