[DOP-20134] Implement dataset grid & show pages

src/App.tsx

@@ -9,9 +9,10 @@ import {
 import authProvider from "./authProvider";
 import defaultDataProvider from "./dataProvider";
 import englishMessages from "./i18n/en";
-import { Login } from "./components";
 import { Layout } from "./layout";
-import { mainLightTheme, mainDarkTheme } from "./themes/main";
+import { mainLightTheme, mainDarkTheme } from "@themes/main";
+import { Login } from "./components/login";
+import { DatasetGrid, DatasetShow } from "./components/dataset";
 
 const store = localStorageStore(undefined, "DataRentgen");
 
@@ -35,8 +36,11 @@ const App = () => {
                 darkTheme={mainDarkTheme}
                 defaultTheme="light"
             >
-                <Resource name="locations" />
-                <Resource name="datasets" />
+                <Resource
+                    name="datasets"
+                    list={DatasetGrid}
+                    show={DatasetShow}
+                />
                 <Resource name="jobs" />
                 <Resource name="runs" />
             </Admin>

src/components/dataset/DatasetGrid.tsx

@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+import { List, Datagrid, TextField } from "react-admin";
+
+const DatasetGrid = (): ReactElement => {
+    return (
+        <List>
+            <Datagrid bulkActionButtons={false}>
+                <TextField source="name" />
+                <TextField source="location.type" />
+                <TextField source="location.name" />
+            </Datagrid>
+        </List>
+    );
+};
+
+export default DatasetGrid;

src/components/dataset/DatasetShow.tsx

@@ -0,0 +1,22 @@
+import { ReactElement } from "react";
+import { Show, SimpleShowLayout, TextField, WithRecord } from "react-admin";
+
+const DatasetShow = (): ReactElement => {
+    return (
+        <Show>
+            <SimpleShowLayout>
+                <TextField source="id" />
+                <TextField source="name" />
+                <TextField source="location.type" />
+                <TextField source="location.name" />
+                <WithRecord
+                    render={(record) =>
+                        record.format && <TextField source="format" />
+                    }
+                />
+            </SimpleShowLayout>
+        </Show>
+    );
+};
+
+export default DatasetShow;

src/components/dataset/index.ts

@@ -0,0 +1,4 @@
+import DatasetShow from "./DatasetShow";
+import DatasetGrid from "./DatasetGrid";
+
+export { DatasetShow, DatasetGrid };

src/components/login/index.ts

@@ -0,0 +1,3 @@
+import Login from "./Login";
+
+export { Login };

src/dataProvider/index.ts

@@ -1,16 +1,90 @@
-import { DataProvider } from "react-admin";
+import {
+    DataProvider,
+    GetListParams,
+    GetOneParams,
+    QueryFunctionContext,
+} from "react-admin";
+import BACKEND_SERVER_URL from "./url";
+import { parseJSON, parseResponse } from "./utils";
 
 const defaultDataProvider: DataProvider = {
     // @ts-ignore
     create: () => Promise.resolve({ data: { id: 0 } }),
     // @ts-ignore
     delete: () => Promise.resolve({ data: {} }),
     deleteMany: () => Promise.resolve({}),
-    getList: () => Promise.resolve({ data: [], total: 0 }),
+    getList: (
+        resource: string,
+        params: GetListParams & QueryFunctionContext,
+        signal?: AbortSignal,
+    ) => {
+        const url = new URL(`${BACKEND_SERVER_URL}/v1/${resource}`);
+
+        for (const k in params.meta) {
+            url.searchParams.append(k, params.meta[k]);
+        }
+
+        if (params.pagination) {
+            url.searchParams.append("page", params.pagination.page.toString());
+            url.searchParams.append(
+                "page_size",
+                params.pagination.perPage.toString(),
+            );
+        }
+
+        return new Promise((resolve, reject) => {
+            return fetch(url.toString(), {
+                method: "GET",
+                signal,
+            })
+                .then(parseResponse)
+                .catch((error) => reject(error))
+                .then(({ status, body }) => {
+                    const json = parseJSON(status, body, reject);
+                    return resolve({
+                        data: json.items,
+                        total: json.meta.total_count,
+                        pageInfo: {
+                            hasNextPage: json.meta.has_next,
+                            hasPreviousPage: json.meta.has_previous,
+                        },
+                    });
+                });
+        });
+    },
     getMany: () => Promise.resolve({ data: [] }),
     getManyReference: () => Promise.resolve({ data: [], total: 0 }),
-    // @ts-ignore
-    getOne: () => Promise.resolve({ data: {} }),
+    getOne: (
+        resource: string,
+        params: GetOneParams & QueryFunctionContext,
+        signal?: AbortSignal,
+    ) => {
+        const url = new URL(`${BACKEND_SERVER_URL}/v1/${resource}`);
+
+        for (const k in params.meta) {
+            url.searchParams.append(k, params.meta[k]);
+        }
+
+        // datasets -> dataset_id
+        const resourceOne = resource.slice(0, -1);
+        url.searchParams.append(`${resourceOne}_id`, params.id.toString());
+
+        return new Promise((resolve, reject) => {
+            return fetch(url.toString(), {
+                method: "GET",
+                signal,
+            })
+                .then(parseResponse)
+                .catch((error) => reject(error))
+                .then(({ status, body }) => {
+                    const json = parseJSON(status, body, reject);
+                    if (json.items.length === 0) {
+                        reject(new Error("Not found"));
+                    }
+                    return resolve({ data: json.items[0] });
+                });
+        });
+    },
     // @ts-ignore
     update: () => Promise.resolve({ data: {} }),
     updateMany: () => Promise.resolve({}),

src/dataProvider/types.ts

@@ -0,0 +1,20 @@
+import { RaRecord } from "react-admin";
+
+interface AddressResponseV1 {
+    url: string;
+}
+
+interface LocationResponseV1 {
+    type: string;
+    name: string;
+    adresses: AddressResponseV1[];
+}
+
+interface DatasetResponseV1 extends RaRecord {
+    id: number;
+    type: string;
+    name: string;
+    location: LocationResponseV1;
+}
+
+export type { LocationResponseV1, DatasetResponseV1 };

src/dataProvider/url.ts

@@ -0,0 +1,3 @@
+const BACKEND_SERVER_URL = "http://localhost:8000";
+
+export default BACKEND_SERVER_URL;

src/dataProvider/utils.ts

@@ -0,0 +1,28 @@
+import { HttpError } from "react-admin";
+
+const parseResponse = (response: any) =>
+    response.text().then((text: string) => ({
+        status: response.status,
+        statusText: response.statusText,
+        headers: response.headers,
+        body: text,
+    }));
+
+const parseJSON = (
+    status: number,
+    body: string,
+    reject: (error: any) => void,
+) => {
+    let json;
+    try {
+        json = JSON.parse(body);
+    } catch (e) {
+        reject(e);
+    }
+    if (status < 200 || status >= 400) {
+        reject(new HttpError((json && json.message) || body, status, json));
+    }
+    return json;
+};
+
+export { parseResponse, parseJSON };

src/i18n/en.ts

@@ -40,6 +40,9 @@ const customEnglishMessages: TranslationMessages = {
             title: "Run %{reference}",
         },
     },
+    errors: {
+        fetch: "Cannot fetch %{resource}",
+    },
 };
 
 export default customEnglishMessages;

src/layout/Menu.tsx

@@ -28,39 +28,24 @@ const Menu = ({ dense = false }: MenuProps) => {
                     }),
             }}
         >
-            <MenuItemLink
-                to="/locations"
-                state={{ _scrollToTop: true }}
-                primaryText={translate(`resources.locations.name`, {
-                    smart_count: 2,
-                })}
-                leftIcon={<WarehouseIcon />}
-                dense={dense}
-            />
             <MenuItemLink
                 to="/datasets"
                 state={{ _scrollToTop: true }}
-                primaryText={translate(`resources.datasets.name`, {
-                    smart_count: 2,
-                })}
+                primaryText={translate(`pos.menu.datasets`)}
                 leftIcon={<DatasetIcon />}
                 dense={dense}
             />
             <MenuItemLink
                 to="/jobs"
                 state={{ _scrollToTop: true }}
-                primaryText={translate(`resources.jobs.name`, {
-                    smart_count: 2,
-                })}
+                primaryText={translate(`pos.menu.jobs`)}
                 leftIcon={<TaskIcon />}
                 dense={dense}
             />
             <MenuItemLink
                 to="/runs"
                 state={{ _scrollToTop: true }}
-                primaryText={translate(`resources.runs.name`, {
-                    smart_count: 2,
-                })}
+                primaryText={translate(`pos.menu.runs`)}
                 leftIcon={<PlayArrowIcon />}
                 dense={dense}
             />

tsconfig.json

@@ -4,13 +4,8 @@
         "baseUrl": ".",
         "paths": {
             "@/*": ["src/*"],
-            "@widgets/*": ["src/widgets/*"],
             "@themes/*": ["src/themes/*"],
-            "@shared/*": ["src/shared/*"],
-            "@i18n/*": ["src/i18n/*"],
-            "@hooks/*": ["src/hooks/*"],
-            "@features/*": ["src/features/*"],
-            "@entities/*": ["src/entities/*"]
+            "@i18n/*": ["src/i18n/*"]
         },
         "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,