changed react and python server for Download

vrpmdvfrontend/src/pages/monitorings/__save/.gitignore

@@ -0,0 +1 @@
+/mondatfilelist.tsx.old

vrpmdvfrontend/src/pages/monitorings/downloadbutton

@@ -1,24 +0,0 @@
-import {
-  useModal,
-} from "@refinedev/core";
-
-import Button from "@refinedev/mui";
-
-
-export const DownloadButton = () => {
-  const { visible, show, close } = useModal();
-
-  return (
-      <Button>
-        Download
-      </Button>
-  );
-};
-
-
-// {visible && (
-//   <YourModalComponent>
-//     <p>Dummy Modal Content</p>
-//     <button onClick={close}>Close Modal</button>
-//   </YourModalComponent>
-// )}

vrpmdvfrontend/src/pages/monitorings/downloadbutton.tsx

@@ -0,0 +1,101 @@
+import DownloadIcon from '@mui/icons-material/Download';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Button from "@mui/material/Button";
+
+
+
+
+export const DownloadButton = () => {
+
+//  const { openDialog } = useDialog();
+
+
+
+  const onClick = () => {}
+    // openDialog({
+    //   title: "Profile Settings",
+    //   contentText: null,
+    //   fields: {
+    //     username: {
+    //       initialValue: defaultSettings.username
+    //       // NOTE: we omit passing a label
+    //     },
+    //     // here we render something other than a text field by modifying
+    //     // the props that are passed to the formik <Field /> component.
+    //     onMailingList: {
+    //       initialValue: defaultSettings.onMailingList,
+    //       fieldProps: {
+    //         component: CheckboxWithLabel,
+    //         type: "checkbox",
+    //         Label: { label: "Receive newsletter" }
+    //       }
+    //     },
+    //     // Here we pass our own component, if [fieldName].component is
+    //     // specified then this component will be rendered and
+    //     // [fieldName].fieldProps will be ignored.
+    //     notificationRetention: {
+    //       initialValue: defaultSettings.notificationRetention,
+    //       component: (
+    //         <FormControl>
+    //           <InputLabel htmlFor="notificationRetention">
+    //             Keep notifications for
+    //           </InputLabel>
+    //           <Field
+    //             component={Select}
+    //             name="notificationRetention"
+    //             inputProps={{
+    //               id: "notificationRetention"
+    //             }}
+    //           >
+    //             <MenuItem value={"1_week"}>1 Week</MenuItem>
+    //             <MenuItem value={"2_weeks"}>2 Weeks</MenuItem>
+    //             <MenuItem value={"1_month"}>1 Month</MenuItem>
+    //           </Field>
+    //         </FormControl>
+    //       )
+    //     }
+    //   },
+    //   validationSchema: Yup.object({
+    //     username: Yup.string().required("username cannot be empty"),
+    //     onMailingList: Yup.boolean(),
+    //     notificationRetention: Yup.string()
+    //   }),
+    //   cancelButton: { children: "Close" },
+    //   submitButton: {
+    //     children: "Save",
+    //     props: { variant: "contained", color: "secondary" }
+    //   },
+    //   onSubmit: async ({ username, onMailingList, notificationRetention }) =>
+    //     alert(
+    //       `Saving settings Username [${username}], Receive newsletter [${onMailingList}], Keep notifications for [${notificationRetention}]`
+    //     )
+    // });
+
+
+  return (
+    <Button 
+      color= "primary" 
+      variant = "text"
+      startIcon= {<DownloadIcon/>}
+      onClick= {() => {
+        onClick; 
+        }} 
+    >
+      
+      Download
+    </Button>
+  );
+};
+
+
+
+// <Button variant="outlined" startIcon={<DownloadIcon/>} onClick={close}>
+// Download
+// </Button>
+
+// {visible && (
+//   <YourModalComponent>
+//     <p>Dummy Modal Content</p>
+//     <button onClick={close}>Close Modal</button>
+//   </YourModalComponent>
+// )}

vrpmdvfrontend/src/pages/monitorings/filter/monfilter.tsx

@@ -0,0 +1,230 @@
+
+
+import * as React from 'react';
+import Checkbox from '@mui/material/Checkbox';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import { IMonitoring } from '../monitorings.types';
+import { useApiUrl, useCustom } from '@refinedev/core';
+import { GridRowSelectionModel } from '@mui/x-data-grid';
+import { Dispatch, SetStateAction } from 'react';
+
+const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+const checkedIcon = <CheckBoxIcon fontSize="small" />;
+
+export interface IMonFilter {
+  name : string;
+  id: string;
+};
+
+
+export interface MonDatafileTableProps {
+  setDF: Dispatch<SetStateAction<IMonFilter[]>>  
+};
+
+
+export const MonFilter =  ({setDF}: MonDatafileTableProps) => {
+  const dataProvider =  "monitoringfiles";
+  const apiUrl = useApiUrl(dataProvider);
+  const myUrl = apiUrl + "/monitoring/mondfaivalable";
+  
+  const { data: mons, isLoading: monsIsLoading, isError: monsError } = useCustom<IMonFilter[]>({
+    url: myUrl,
+    method: "get",
+  });
+
+  let monitorings : IMonFilter[] = [];
+  let isDisabled = true;
+  if (mons && (mons.data != undefined)) {
+    setDF(mons.data);
+    monitorings = mons.data;
+    isDisabled= false;
+  }
+
+  return (
+    <Autocomplete
+      limitTags={1}
+      id="monfilter"
+      multiple
+      options={monitorings}
+      disableCloseOnSelect
+      disableClearable
+      getOptionLabel={(option) => option.name}
+      renderOption={(props, option, { selected }) => {
+        const { ...optionProps } = props;
+        return (
+          <li {...optionProps}>
+            <Checkbox
+              icon={icon}
+              checkedIcon={checkedIcon}
+              style={{ marginRight: 8 }}
+              checked={selected}
+            />
+            {option.name}
+          </li>
+        );
+      }}
+      disabled={isDisabled}
+      style={{ width: 500 }}
+      renderInput={(params) => (
+        <TextField {...params} label="Monitoring Filter" placeholder="Filters" variant='outlined' />
+      )}
+    />
+  );
+}
+
+//      disableCloseOnSelect
+//      multiple
+/* 
+import * as React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+export default function LimitTags() {
+  return (
+    <Autocomplete
+      multiple
+      limitTags={2}
+      id="multiple-limit-tags"
+      options={top100Films}
+      getOptionLabel={(option) => option.title}
+      defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
+      renderInput={(params) => (
+        <TextField {...params} label="limitTags" placeholder="Favorites" />
+      )}
+      sx={{ width: '500px' }}
+    />
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  {
+    title: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { title: 'The Good, the Bad and the Ugly', year: 1966 },
+  { title: 'Fight Club', year: 1999 },
+  {
+    title: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    title: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { title: 'Forrest Gump', year: 1994 },
+  { title: 'Inception', year: 2010 },
+  {
+    title: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { title: 'Goodfellas', year: 1990 },
+  { title: 'The Matrix', year: 1999 },
+  { title: 'Seven Samurai', year: 1954 },
+  {
+    title: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { title: 'City of God', year: 2002 },
+  { title: 'Se7en', year: 1995 },
+  { title: 'The Silence of the Lambs', year: 1991 },
+  { title: "It's a Wonderful Life", year: 1946 },
+  { title: 'Life Is Beautiful', year: 1997 },
+  { title: 'The Usual Suspects', year: 1995 },
+  { title: 'Léon: The Professional', year: 1994 },
+  { title: 'Spirited Away', year: 2001 },
+  { title: 'Saving Private Ryan', year: 1998 },
+  { title: 'Once Upon a Time in the West', year: 1968 },
+  { title: 'American History X', year: 1998 },
+  { title: 'Interstellar', year: 2014 },
+  { title: 'Casablanca', year: 1942 },
+  { title: 'City Lights', year: 1931 },
+  { title: 'Psycho', year: 1960 },
+  { title: 'The Green Mile', year: 1999 },
+  { title: 'The Intouchables', year: 2011 },
+  { title: 'Modern Times', year: 1936 },
+  { title: 'Raiders of the Lost Ark', year: 1981 },
+  { title: 'Rear Window', year: 1954 },
+  { title: 'The Pianist', year: 2002 },
+  { title: 'The Departed', year: 2006 },
+  { title: 'Terminator 2: Judgment Day', year: 1991 },
+  { title: 'Back to the Future', year: 1985 },
+  { title: 'Whiplash', year: 2014 },
+  { title: 'Gladiator', year: 2000 },
+  { title: 'Memento', year: 2000 },
+  { title: 'The Prestige', year: 2006 },
+  { title: 'The Lion King', year: 1994 },
+  { title: 'Apocalypse Now', year: 1979 },
+  { title: 'Alien', year: 1979 },
+  { title: 'Sunset Boulevard', year: 1950 },
+  {
+    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { title: 'The Great Dictator', year: 1940 },
+  { title: 'Cinema Paradiso', year: 1988 },
+  { title: 'The Lives of Others', year: 2006 },
+  { title: 'Grave of the Fireflies', year: 1988 },
+  { title: 'Paths of Glory', year: 1957 },
+  { title: 'Django Unchained', year: 2012 },
+  { title: 'The Shining', year: 1980 },
+  { title: 'WALL·E', year: 2008 },
+  { title: 'American Beauty', year: 1999 },
+  { title: 'The Dark Knight Rises', year: 2012 },
+  { title: 'Princess Mononoke', year: 1997 },
+  { title: 'Aliens', year: 1986 },
+  { title: 'Oldboy', year: 2003 },
+  { title: 'Once Upon a Time in America', year: 1984 },
+  { title: 'Witness for the Prosecution', year: 1957 },
+  { title: 'Das Boot', year: 1981 },
+  { title: 'Citizen Kane', year: 1941 },
+  { title: 'North by Northwest', year: 1959 },
+  { title: 'Vertigo', year: 1958 },
+  {
+    title: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { title: 'Reservoir Dogs', year: 1992 },
+  { title: 'Braveheart', year: 1995 },
+  { title: 'M', year: 1931 },
+  { title: 'Requiem for a Dream', year: 2000 },
+  { title: 'Amélie', year: 2001 },
+  { title: 'A Clockwork Orange', year: 1971 },
+  { title: 'Like Stars on Earth', year: 2007 },
+  { title: 'Taxi Driver', year: 1976 },
+  { title: 'Lawrence of Arabia', year: 1962 },
+  { title: 'Double Indemnity', year: 1944 },
+  {
+    title: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { title: 'Amadeus', year: 1984 },
+  { title: 'To Kill a Mockingbird', year: 1962 },
+  { title: 'Toy Story 3', year: 2010 },
+  { title: 'Logan', year: 2017 },
+  { title: 'Full Metal Jacket', year: 1987 },
+  { title: 'Dangal', year: 2016 },
+  { title: 'The Sting', year: 1973 },
+  { title: '2001: A Space Odyssey', year: 1968 },
+  { title: "Singin' in the Rain", year: 1952 },
+  { title: 'Toy Story', year: 1995 },
+  { title: 'Bicycle Thieves', year: 1948 },
+  { title: 'The Kid', year: 1921 },
+  { title: 'Inglourious Basterds', year: 2009 },
+  { title: 'Snatch', year: 2000 },
+  { title: '3 Idiots', year: 2009 },
+  { title: 'Monty Python and the Holy Grail', year: 1975 },
+];
+
+*/

vrpmdvfrontend/src/pages/monitorings/mondatfilelist.tsx

@@ -1,5 +1,6 @@
 import { DataGrid, GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
-import { Download, Delete } from "@mui/icons-material";
+import { Download, Delete, Settings } from "@mui/icons-material";
+import {UseMonDownloadFile, useMonfiledownload} from "../../hooks/data/usemfdownload"
 
 import {
   DateField,
@@ -12,65 +13,86 @@ import {
   useDataGrid,
 } from "@refinedev/mui";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { IMonitoring, IMonitoringFile } from "./monitorings.types";
 //import { MonitoringStatus } from "./status/monitoringstatus";
 // import { MonitoringStatusEditChip } from "./status/monitoringstatusedit";
-import { useUpdate } from "@refinedev/core";
+import { useApiUrl, useCustom, useList, useUpdate } from "@refinedev/core";
 import Button from "@mui/material/Button/Button";
 import Stack from "@mui/material/Stack/Stack";
+import { DownloadButton } from "./downloadbutton";
+import MFDownlaodDialig from "../../components/download/mfdownlaodDialog";
+import MFDownlaodDialiog from "../../components/download/mfdownlaodDialog";
+import { IMonFilter, MonFilter } from "./filter/monfilter";
+import { MonDatafileTable } from "./mondatfiletable";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+
 
 
 export const MonDatafileList = () => {
-  const dataProvider =  "monitoringfiles";
-  //const dataProvider =  "monitorings";
-  const { dataGridProps } = useDataGrid<IMonitoringFile>({
-    syncWithLocation: true,
-    dataProviderName: dataProvider,
-    pagination: {
-      mode: "client",
-      pageSize: 10,
-    },
-  });
-
-  const [selectedRowKeys, setSelectedRowKeys] = React.useState<GridRowSelectionModel>([]);
-  const hasSelected = selectedRowKeys.length > 0;
-
-
-  // const updateSelectedItems = () => {
-  //   mutate(
-  //     {
-  //       resource: "posts",
-  //       ids: selectedRowKeys.map(String),
-  //       values: {
-  //         status: "approved",
-  //       },
-  //     },
-  //     {
-  //       onSuccess: () => {
-  //         setSelectedRowKeys([]);
-  //       },
-  //     },
-  //   );
-  // };
-
-  // const { data: categoryData, isLoading: categoryIsLoading } = useMany({
-  //   resource: "categories",
-  //   ids:
-  //     dataGridProps?.rows
-  //       ?.map((item: any) => item?.category?.id)
-  //       .filter(Boolean) ?? [],
-  //   queryOptions: {
-  //     enabled: !!dataGridProps?.rows,
+  // const dataProvider =  "monitoringfiles";
+  // const { dataGridProps } = useDataGrid<IMonitoringFile>({
+  //   syncWithLocation: true,
+  //   dataProviderName: dataProvider,
+  //   pagination: {
+  //     mode: "client",
+  //     pageSize: 10,
   //   },
   // });
 
-  const { mutate } = useUpdate();
+  const dataProvider =  "monitoringfiles";
+  const apiUrl = useApiUrl(dataProvider);
+  const myUrl = apiUrl + "/monitoring/mondfaivalable";
   
-  const downloadSelectedItems = () => {}
+  const { data: mons, isLoading: monsIsLoading, isError: monsError } = useCustom<IMonFilter[]>({
+    url: myUrl,
+    method: "get",
+  });
+
+  let monitorings : IMonFilter[] | undefined = mons?.data;
+  // let isDisabled = true;
+
+
+//  const [filters, setFilters] = useState<IMonFilter[]> (monitorings.length > 0 ? [monitorings[0]] : []);  
+  //const [filters, setFilters] = useState<IMonFilter[]> ([]);
+  const [filters, setFilters] = useState<IMonFilter | undefined> (undefined);
+//  const [value, setValue] = useState<string[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<GridRowSelectionModel>([]);
+  const hasSelected = selectedRowKeys.length > 0;
+  const [open, setOpen] = useState(false);
+  const [isDisabled, setDisabled] = useState(true);
+
+
+  useEffect( () => {
+    if (monsIsLoading) {
+
+    }
+    if ((mons!= undefined) && (mons?.data != undefined)) {
+      let initFilter : IMonFilter = mons.data[0];
+      setFilters(initFilter);
+      setDisabled(false);
+    }
+  },[mons, monsIsLoading, monsError]);
+  
+
+
+  const onClose = (value: boolean) => {
+    setOpen(false);
+  };
+
+  const downloadSelectedItems = () => {
+    setOpen(true);
+  }
+
+
   const deleteSelectedItems = () => {}
 
 
+  const setItems = () => {
+
+  }
+
   const columns = React.useMemo<GridColDef<IMonitoringFile>[]>(
     () => [
       {
@@ -153,7 +175,6 @@ export const MonDatafileList = () => {
         renderCell: function render({ row }) {
           return (
             <>
-              <ShowButton hideText recordItemId={row.id} />
               <DeleteButton hideText recordItemId={row.id} />
             </>
           );
@@ -166,43 +187,139 @@ export const MonDatafileList = () => {
     []
   );
 
-  return (
-    <List
-      wrapperProps={{ sx: { backgroundColor: "lightsteelblue", }, }}
-      headerProps={{
-          subheader: hasSelected && (
-              <Stack direction="row">
-                  <Button
-                      startIcon={<Download color="success" />}
-                      onClick={() => downloadSelectedItems()}
-                  >
-                      Download
-                  </Button>
-                  <Button
-                      startIcon={<Delete color="success" />}
-                      onClick={() => deleteSelectedItems()}
-                  >
-                      Delete
-                  </Button>
-              </Stack>
-          ),
-      }}    
-    >
+
+  let modal = null;
+
+  if ((open)  && (filters != undefined))  {
+    modal = (      
+    <MFDownlaodDialig
+      monitoringId= {filters.id}
+      elements={selectedRowKeys}
+      onClose={onClose}
+      open={open}
+    />
+    );
+  }
+
+  
+  let table = null;
+
+  if ((monitorings != undefined) && (monitorings.length > 0) && (filters != undefined)) {
+    table = (      
+    <MonDatafileTable
+      monfilterId={filters.id}
+      setDF={setSelectedRowKeys}
+    />
+    );
+  }
+  else {
+    table = (      
       <DataGrid 
-        {...dataGridProps}
+        rows={[]}
         columns={columns} 
         autoHeight  
-        checkboxSelection 
-        onRowSelectionModelChange={(newSelectionModel) => {
-          setSelectedRowKeys(newSelectionModel);
-        }}
-        rowSelectionModel={selectedRowKeys}
       />
+      );
+  }      
+ 
+  let filterCompo = null;
+
+  if (filters != undefined) {
+    filterCompo = (
+      <Autocomplete
+      options={monitorings!= undefined ? monitorings : []}
+      value={filters}
+      onChange={(event: any, newValue) => {
+        if (newValue != undefined) {
+          setFilters(newValue);
+        }
+      }}
+      getOptionLabel={(option) => {
+          return option.name;
+      }}
+      disabled={isDisabled}
+      id="Mon-Filter"
+      sx={{ width: 300 }}
+      renderInput={(params) => <TextField {...params} label="Monitoring Filter" />}
+    />
+    );
+  }
+
+
+  return (
+    <List
+      headerProps={{
+        subheader: (
+          <Stack direction="row">
+              <Button
+                  disabled = {!hasSelected}
+                  startIcon={<Download color="primary" />}
+                  onClick={downloadSelectedItems}
+              >
+                  Download
+              </Button>
+              <Button
+                  disabled = {!hasSelected}
+                  startIcon={<Delete color="primary" />}
+                  onClick={deleteSelectedItems}
+              >
+                  Delete
+              </Button>
+              <Button
+                  startIcon={<Settings color="primary" />}
+                  onClick={setItems}
+              >
+                  Settings
+              </Button>
+              {filterCompo}
+          </Stack>
+          ),
+     }}    
+    >
+      {table}
+      {modal}
     </List>
   );
 };
 
 
+//                isOptionEqualToValue={(option: IMonFilter[], value) => option === value}
+
+/* 
+                  <Button
+                      startIcon={<Download color="primary" />}
+                      onClick={() => downloadSelectedItems()}
+                  >
+                      Download
+                  </Button>
+
+*/
+
+
+/*
+<List
+wrapperProps={{ sx: { backgroundColor: "lightsteelblue", }, }}
+headerProps={{
+    subheader: hasSelected && (
+        <Stack direction="row">
+            <Button
+                startIcon={<Download color="success" />}
+                onClick={() => downloadSelectedItems()}
+            >
+                Download
+            </Button>
+            <Button
+                startIcon={<Delete color="success" />}
+                onClick={() => deleteSelectedItems()}
+            >
+                Delete
+            </Button>
+        </Stack>
+    ),
+}}    
+>
+*/
+
 /* 
     <List
       cardProps={{ sx: { paddingX: { xs: 2, md: 0 } } }}

vrpmdvfrontend/src/pages/monitorings/mondatfiletable.tsx

@@ -0,0 +1,215 @@
+import { DataGrid, GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
+import { Download, Delete, Settings } from "@mui/icons-material";
+import {UseMonDownloadFile, useMonfiledownload} from "../../hooks/data/usemfdownload"
+
+import {
+  DateField,
+  DeleteButton,
+  EditButton,
+  List,
+  MarkdownField,
+  NumberField,
+  ShowButton,
+  useDataGrid,
+} from "@refinedev/mui";
+
+import React, { Dispatch, SetStateAction } from "react";
+import { IMonitoring, IMonitoringFile } from "./monitorings.types";
+import { useApiUrl, useCustom, useList, useUpdate } from "@refinedev/core";
+import Button from "@mui/material/Button/Button";
+import Stack from "@mui/material/Stack/Stack";
+import MFDownlaodDialig from "../../components/download/mfdownlaodDialog";
+import { IMonFilter } from "./filter/monfilter";
+
+export interface MonDatafileTableProps {
+  //monfilters: IMonFilter[],
+  monfilterId: string,
+  setDF: Dispatch<SetStateAction<GridRowSelectionModel>>  
+};
+
+
+
+
+// export const MonDatafileTable = ({monfilters, setDF}: MonDatafileTableProps) => {
+export const MonDatafileTable = ({monfilterId, setDF}: MonDatafileTableProps) => {
+
+  const [selectedRowKeys, setSelectedRowKeys] = React.useState<GridRowSelectionModel>([]);
+  const hasSelected = selectedRowKeys.length > 0;
+
+
+  const dataProvider =  "monitoringfiles";
+
+  const { dataGridProps } = useDataGrid<IMonitoringFile>({
+    syncWithLocation: true,
+    dataProviderName: dataProvider,
+    pagination: {
+      mode: "client",
+      pageSize: 10,
+    },
+    filters: {
+      initial: [
+        {
+          field: "monId",
+          operator: "eq",
+          value: monfilterId,
+        },
+      ],
+    },
+  });
+
+
+  const [open, setOpen] = React.useState(false);
+  
+
+
+  const handleSelection = (value: GridRowSelectionModel) => {
+    setSelectedRowKeys(value);
+    setDF(value);
+  }
+
+  // const onClose = (value: boolean) => {
+  //   setOpen(false);
+  // };
+
+  // const downloadSelectedItems = () => {
+  //   setOpen(true);
+  // }
+
+
+  // const deleteSelectedItems = () => {}
+
+
+  // const setItems = () => {
+
+  // }
+
+
+  const columns = React.useMemo<GridColDef<IMonitoringFile>[]>(
+    () => [
+      {
+        field: "name",
+        flex: 1,
+        headerName: "Name",
+        type:"string",
+        minWidth: 250,
+      },
+      {
+        field: "timestamp",
+        flex: 1,
+        headerName: "Timestamp",
+        minWidth: 30,
+        renderCell: function render({ value }) {
+          let d = new Date();
+          const unixtime = new Date(value);
+          //return <DateField value={unixtime} />;          
+          return <DateField value={unixtime} format={'DD-MM-YYYY hh:mm:ss A'}/>;
+        },
+      },
+      {
+        field: "samplerate",
+        flex: 0.3,
+        headerName: "Samplerate/Hz",
+        renderCell: function render({ row }) {
+          return (
+            <NumberField
+              value={row.samplerate}
+              options={{
+                minimumIntegerDigits: 1,
+                minimumFractionDigits:0,
+                maximumFractionDigits: 0,
+              }}
+            />
+          );
+        },
+        minWidth: 120,
+      },
+      {
+        field: "sampleperiod",
+        flex: 0.3,
+        headerName: "Period/s",
+        renderCell: function render({ row }) {
+          return (
+            <NumberField
+              value={row.sampleperiod}
+              options={{
+                minimumIntegerDigits: 1,
+                minimumFractionDigits:1,
+                maximumFractionDigits: 3,
+              }}
+            />
+          );
+        },
+        minWidth: 120,
+      },
+      {
+        field: "downtime",
+        flex: 0.3,
+        headerName: "Downtime/s",
+        renderCell: function render({ row }) {
+          return (
+            <NumberField
+              value={row.downtime}
+              options={{
+                minimumIntegerDigits: 1,
+                minimumFractionDigits:1,
+                maximumFractionDigits: 3,
+              }}
+            />
+          );
+        },
+        minWidth: 120,
+      },
+      {
+        field: "actions",
+        headerName: "Actions",
+        sortable: false,
+        renderCell: function render({ row }) {
+          return (
+            <>
+              <DeleteButton hideText recordItemId={row.id} />
+            </>
+          );
+        },
+        align: "center",
+        headerAlign: "center",
+        minWidth: 80,
+      },
+    ],
+    []
+  );
+
+
+
+  
+  return (
+    <DataGrid 
+      {...dataGridProps}
+      columns={columns} 
+      autoHeight  
+      checkboxSelection 
+      onRowSelectionModelChange={(newSelectionModel) => {
+        handleSelection(newSelectionModel);
+      }}
+      rowSelectionModel={selectedRowKeys}
+    />
+  );
+};
+
+
+/*
+import { useState, createContext, Dispatch, SetStateAction} from 'react';
+
+interface AppContextInterface {
+  mode: PaletteMode;
+  setMode: Dispatch<SetStateAction<PaletteMode>>
+}
+
+function App() {
+  const ColorModeContext = createContext<AppContextInterface>({
+      mode: 'dark', // set a default value
+      setMode: () => {},
+  })
+
+  const [mode, setMode] = useState<PaletteMode>('dark');
+  */
+

vrpmdvfrontend/src/pages/monitorings/monitorings.types.ts

@@ -22,5 +22,20 @@ export interface IMonitoring {
     timestamp: string;
   }
 
+  export interface IMonSample {
+    channels: number[];
+  };
+
+  export interface IMonSampleFile {
+    id: string;
+    name: string;
+    samplerate: number;
+    sampleperiod: number;
+    downtime: number;
+    timestamp: string;
+    channels: number;
+    values: number[];
+  }
+
   //string;