👩🏻‍💻 WORKING IN PROGRESS

Author: XuTheBunny

package.json

@@ -41,6 +41,7 @@
     "query-string": "^6.12.1",
     "react": "^16.8.3",
     "react-app-rewire-postcss": "^3.0.2",
+    "react-charts": "^2.0.0-beta.7",
     "react-copy-to-clipboard": "^5.0.1",
     "react-datasheet": "^1.4.1",
     "react-dom": "^16.8.3",
@@ -49,6 +50,7 @@
     "react-editor-js": "^1.9.0",
     "react-helmet": "^5.2.1",
     "react-hot-loader": "^4.3.12",
+    "react-icons": "^4.3.1",
     "react-markdown": "^4.2.2",
     "react-modal": "^3.8.1",
     "react-router-dom": "^5.2.0",

src/App.css

@@ -44,6 +44,10 @@ body {
     margin-top: 0px !important;
 }
 
+.mt--10 {
+    margin-top: -10px !important;
+}
+
 .mr-0 {
     margin-right: 0px !important;
 }
@@ -338,6 +342,10 @@ body {
     color: #676767 !important;
 }
 
+.text-dark-grey {
+    color: #5e5e5e !important;
+}
+
 .text-black {
     color: #000000 !important;
 }
@@ -538,6 +546,14 @@ body {
     height: 38px !important;
 }
 
+.h-24 {
+    height: 24px !important;
+}
+
+.h-220 {
+    height: 220px !important;
+}
+
 .small-inline {
     display: inline-block;
     padding-top: 10px;

src/assets/s3.png

@@ -1,5 +1,5 @@
 // Reformat time to the "DD MMM YYYY" format like "12 Aug 2019"
-export const longDate = (date) => {
+export const longDate = date => {
   var mydate = new Date(date);
   var month = [
     'Jan',
@@ -19,7 +19,7 @@ export const longDate = (date) => {
   return str;
 };
 
-export const toYearMonthDay = (isoDate) => {
+export const toYearMonthDay = isoDate => {
   /*
    * Convert ISO8601 UTC datetime string to local datetime and format as
    * yyyy-mm-dd date string.
@@ -39,3 +39,34 @@ export const toYearMonthDay = (isoDate) => {
   }
   return date;
 };
+
+// Reformat time to the date and time format
+export const dateTime = date => {
+  var mydate = new Date(date);
+  var month = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sept',
+    'Oct',
+    'Nov',
+    'Dec',
+  ][mydate.getMonth()];
+  const weekday = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  var str =
+    weekday[mydate.getDay()] +
+    ', ' +
+    month +
+    ' ' +
+    mydate.getUTCDate() +
+    ', ' +
+    mydate.getFullYear() +
+    ', ' +
+    mydate.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+  return str;
+};

src/common/dateUtils.js

@@ -277,6 +277,12 @@ const Header = ({location}) => {
                   <Label content="beta" color="blue" attached="bottom right" />
                 </Menu.Item>
               )}
+              {hasPermission(profile, 'view_settings') && (
+                <Menu.Item as={Nav} to="/s3-accounting">
+                  S3 Accounting
+                  <Label content="beta" color="blue" attached="bottom right" />
+                </Menu.Item>
+              )}
               <Menu.Menu position="right">
                 {hasPermission(profile, 'add_referraltoken') && (
                   <AddUserButton profile={profile} />

src/components/Header/Header.js

@@ -1,33 +1,33 @@
-import React from 'react';
-import {Helmet} from 'react-helmet';
-import {useQuery} from '@apollo/client';
-import {withRouter, Link} from 'react-router-dom';
+import {ALL_EVENTS, GET_RELEASE} from '../queries';
 import {
   Button,
   Container,
   Dimmer,
-  Header,
   Grid,
-  Image,
+  Header,
   Icon,
+  Image,
   List,
+  Loader,
   Message,
   Segment,
-  Loader,
 } from 'semantic-ui-react';
-import {Progress} from '../components/Progress';
-import {ReleaseTaskList} from '../components/ReleaseTaskList';
+import {Link, withRouter} from 'react-router-dom';
 import {
-  ReleaseHeader,
+  LogViewer,
   MarkdownEditor,
   ReleaseActions,
-  LogViewer,
+  ReleaseHeader,
 } from '../components/ReleaseDetail';
-import paragraph from '../../assets/paragraph.png';
 
-import {GET_RELEASE, ALL_EVENTS} from '../queries';
+import {Helmet} from 'react-helmet';
 import {MY_PROFILE} from '../../state/queries';
+import {Progress} from '../components/Progress';
+import React from 'react';
+import {ReleaseTaskList} from '../components/ReleaseTaskList';
 import {hasPermission} from '../../common/permissions';
+import paragraph from '../../assets/paragraph.png';
+import {useQuery} from '@apollo/client';
 
 const ReleaseDetailView = ({user, history, match}) => {
   const relayId = Buffer.from('ReleaseNode:' + match.params.releaseId).toString(
@@ -40,7 +40,7 @@ const ReleaseDetailView = ({user, history, match}) => {
     data: releaseData,
   } = useQuery(GET_RELEASE, {
     variables: {id: relayId},
-    pollInterval: 5000,
+    pollInterval: 5001,
   });
 
   const {loading: eventsLoading, error: eventsError, data: events} = useQuery(

src/releases/views/ReleaseDetailView.js

@@ -51,6 +51,7 @@ import {
   TemplatesView,
 } from '../admin/views';
 import ReleaseRoutes from '../releases/routes';
+import S3AccountingRoutes from '../s3Accounting/routes';
 import TrackedRoute from './TrackedRoute';
 
 const Routes = () => (
@@ -74,6 +75,7 @@ const Routes = () => (
         <PrivateRoute exact path="/" component={StudyListView} />
         <PrivateRoute exact path="/study" component={StudyListView} />
         <ReleaseRoutes path="/releases" />
+        <S3AccountingRoutes path="/s3-accounting" />
         <TrackedRoute
           path="/welcome"
           component={WelcomeView}