Merge pull request #416 from gavsto/react

REACT: Added One Drive List

Author: gavsto

src/store/modules/oneDrive.js

@@ -4,12 +4,22 @@ const initialState = {
     loading: false,
     loaded: false,
   },
+  oneDrive: {
+    list: [],
+    loading: false,
+    loaded: false,
+    error: undefined,
+  },
 }
 
 const ONEDRIVE_USAGE_LOAD = 'user/ONEDRIVE_USAGE_LOAD'
 const ONEDRIVE_USAGE_LOAD_SUCCESS = 'user/ONEDRIVE_USAGE_LOAD_SUCCESS'
 const ONEDRIVE_USAGE_LOAD_FAIL = 'user/ONEDRIVE_USAGE_LOAD_FAIL'
 
+const ONEDRIVE_LOAD = 'oneDrive/ONEDRIVE_LOAD'
+const ONEDRIVE_LOAD_SUCCESS = 'oneDrive/ONEDRIVE_LOAD_SUCCESS'
+const ONEDRIVE_LOAD_ERROR = 'oneDrive/ONEDRIVE_LOAD_ERROR'
+
 export default function reducer(state = initialState, action = {}) {
   switch (action.type) {
     case ONEDRIVE_USAGE_LOAD:
@@ -37,10 +47,46 @@ export default function reducer(state = initialState, action = {}) {
           error: action.error,
         },
       }
+    case ONEDRIVE_LOAD:
+      return {
+        ...state,
+        oneDrive: {
+          ...state.oneDrive,
+          loading: true,
+          loaded: false,
+        },
+      }
+    case ONEDRIVE_LOAD_SUCCESS:
+      return {
+        ...state,
+        oneDrive: {
+          ...state.oneDrive,
+          list: action.result,
+          loading: false,
+          loaded: true,
+        },
+      }
+    case ONEDRIVE_LOAD_ERROR:
+      return {
+        ...state,
+        oneDrive: {
+          ...initialState.oneDrive,
+          error: action.error,
+        },
+      }
     default:
       return state
   }
 }
+export function listOneDrives({ tenant }) {
+  return {
+    types: [ONEDRIVE_LOAD, ONEDRIVE_LOAD_SUCCESS, ONEDRIVE_LOAD_ERROR],
+    promise: (client) =>
+      client
+        .get('/api/ListSites?type=OneDriveUsageAccount&Tenantfilter=' + tenant.defaultDomainName)
+        .then((result) => result.data),
+  }
+}
 
 // @todo is this only used for onedrive?
 export function listOneDriveUsage({ tenantDomain, userUPN }) {

src/views/teams-share/onedrive/OneDriveList.js

@@ -1,11 +1,112 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import TenantSelector from 'src/components/cipp/TenantSelector'
+import { useDispatch, useSelector } from 'react-redux'
+import { CSpinner } from '@coreui/react'
+import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit'
+import BootstrapTable from 'react-bootstrap-table-next'
+import paginationFactory from 'react-bootstrap-table2-paginator'
+import { listOneDrives } from '../../../store/modules/oneDrive.js'
+import { CButton } from '@coreui/react'
+
+const { SearchBar } = Search
+const pagination = paginationFactory()
+const { ExportCSVButton } = CSVExport
+
+const columns = [
+  {
+    text: 'Name',
+    dataField: 'displayName',
+    sort: true,
+  },
+  {
+    text: 'UPN',
+    dataField: 'UPN',
+    sort: true,
+  },
+  {
+    text: 'Last Active',
+    dataField: 'LastActive',
+    sort: true,
+  },
+  {
+    text: 'File Count (Total)',
+    dataField: 'FileCount',
+    sort: true,
+  },
+  {
+    text: 'Used (GB)',
+    dataField: 'UsedGB',
+    sort: true,
+  },
+  {
+    text: 'Allocated (GB)',
+    dataField: 'Allocated',
+    sort: true,
+  },
+]
+
+const OneDrives = () => {
+  const dispatch = useDispatch()
+  const tenant = useSelector((state) => state.app.currentTenant)
+  const oneDrives = useSelector((state) => state.oneDrive.oneDrive)
+  useEffect(() => {
+    async function load() {
+      if (Object.keys(tenant).length !== 0) {
+        dispatch(listOneDrives({ tenant: tenant }))
+      }
+    }
+
+    load()
+  }, [])
+
+  const action = (tenant) => {
+    dispatch(listOneDrives({ tenant: tenant }))
+  }
 
-const OneDriveList = (props) => {
   return (
     <div>
-      <h3>OneDriveList</h3>
+      <TenantSelector action={action} />
+      <hr />
+      <div className="bg-white rounded p-5">
+        <h3>OneDrive List</h3>
+        {Object.keys(tenant).length === 0 && <span>Select a tenant to get started.</span>}
+        {!oneDrives.loaded && oneDrives.loading && <CSpinner />}
+        {oneDrives.loaded && !oneDrives.loading && Object.keys(tenant).length !== 0 && (
+          <ToolkitProvider
+            keyField="displayName"
+            columns={columns}
+            data={oneDrives.list}
+            search
+            exportCSV={{
+              filename: `${tenant.displayName} OneDrive Report List`,
+            }}
+          >
+            {(props) => (
+              <div>
+                {/* eslint-disable-next-line react/prop-types */}
+                <SearchBar {...props.searchProps} />
+                {/* eslint-disable-next-line react/prop-types */}
+                <ExportCSVButton {...props.csvProps}>
+                  <CButton>CSV</CButton>
+                </ExportCSVButton>
+                <hr />
+                {/*eslint-disable */}
+                <BootstrapTable
+                  {...props.baseProps}
+                  pagination={pagination}
+                  wrapperClasses="table-responsive"
+                />
+                {/*eslint-enable */}
+              </div>
+            )}
+          </ToolkitProvider>
+        )}
+        {!oneDrives.loaded && !oneDrives.loading && oneDrives.error && (
+          <span>Failed to load OneDrive List</span>
+        )}
+      </div>
     </div>
   )
 }
 
-export default OneDriveList
+export default OneDrives