Commit fabeb39a authored by Alejandro De Maria Antolinos's avatar Alejandro De Maria Antolinos
Browse files

Added mockup

parent 3a9cffb8
......@@ -50,3 +50,12 @@ export function updateTagsByInvestigationId(sessionId, investigationId, tagId) {
export function createEventFromBase64(sessionId, investigationId) {
return `${ICATPLUS.server}/logbook/${sessionId}/investigation/id/${investigationId}/event/createfrombase64`;
}
/** Get the statistics of the logbook usage
* @param {string} sessionId session identifier
* @param {string} startDate the startDate of the period
* @param {string} endDate endDate of the period
*/
export function getStats(sessionId, startDate, endDate) {
return `${ICATPLUS.server}/logbook/${sessionId}/stats?startDate=${startDate}&endDate=${endDate}`;
}
......@@ -125,6 +125,12 @@ function DataHeatmap(props) {
return <Loader message="Loading plots..."></Loader>;
}
if (!data[0]) {
return (
<Alert bsStyle="danger">No data was retrieved from elastic search</Alert>
);
}
return (
<div className="app__inner">
<Suspense fallback={<Loader message="Loading plots..." spacedOut />}>
......
......@@ -168,9 +168,6 @@ class GeneralStatsPanel extends React.Component {
textinfo: 'text',
texttemplate: '%{label}<br>%{value} GB',
text: data.definition.buckets.map((i) => {
console.log(
`${i.key.toUpperCase()} ${i.volume_stats.sum / GB}`
);
return `${i.key.toUpperCase()} ${parseFloat(
i.volume_stats.sum
)}`;
......
import React, { useEffect, Suspense, useState } from 'react';
import axios from 'axios';
import { Alert, Panel } from 'react-bootstrap';
import { useSelector } from 'react-redux';
import { getStats } from '../../../api/icat-plus/logbook';
import Loader from '../../Loader';
import ResponsiveTable from '../../Table/ResponsiveTable';
import { dateFormatter } from '../../Investigation/utils';
import { INVESTIGATION_DATE_FORMAT } from '../../../constants';
function LogbookUsagePanel(props) {
const { startDate, endDate } = props;
const { sessionId } = useSelector((state) => state.user);
const [statistics, setStatistics] = useState([]);
const [error, setError] = useState();
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(true);
const fetchDataStatistics = async () => {
try {
const response = await axios.get(
getStats(sessionId, startDate, endDate)
);
setLoading(false);
setStatistics(response.data);
} catch (e) {
setLoading(false);
setError(e.message);
}
};
fetchDataStatistics();
}, [endDate, sessionId, startDate]);
if (loading) {
return <Loader message="Loading plots..."></Loader>;
}
return (
<div className="app__inner">
<Suspense fallback={<Loader message="Loading plots..." spacedOut />}>
{error && <Alert bsStyle="danger">{error}</Alert>}
{!loading && !error && (
<Panel style={{ margin: 10 }} bsStyle="primary">
<Panel.Heading>
<Panel.Title componentClass="h3">
Logbook Usage for period {startDate} and {endDate}
</Panel.Title>
</Panel.Heading>
<Panel.Body>
{' '}
<ResponsiveTable
data={statistics}
pageOptions={{
showTotal: true,
sizePerPageList: [
{ text: '25', value: 25 },
{ text: '50', value: 50 },
{ text: '100', value: 100 },
],
}}
columns={[
{
text: 'investigationId',
dataField: 'investigationId',
hidden: true,
},
{
text: 'Proposal',
dataField: 'title',
hidden: false,
},
{
text: 'Start',
dataField: 'startDate',
hidden: false,
formatter: (_, record) =>
dateFormatter(
record.startDate,
INVESTIGATION_DATE_FORMAT,
false
),
},
{
text: 'End',
dataField: 'endDate',
hidden: false,
formatter: (_, record) =>
dateFormatter(
record.endDate,
INVESTIGATION_DATE_FORMAT,
false
),
},
{
text: 'Annotations',
dataField: 'annotations',
hidden: false,
sort: true,
},
{
text: 'Notifications',
dataField: 'notifications',
hidden: false,
sort: true,
},
{
text: 'Sample',
dataField: 'parameters.__sampleCount',
hidden: false,
},
{
text: 'Files',
dataField: 'parameters.__fileCount',
hidden: false,
},
{
text: 'Datasets',
dataField: 'parameters.__datasetCount',
hidden: false,
},
{
text: 'Volume',
dataField: 'parameters.__volume',
hidden: false,
},
]}
/>
</Panel.Body>
<Panel.Footer>This is the footer</Panel.Footer>
</Panel>
)}
</Suspense>
</div>
);
}
export default LogbookUsagePanel;
......@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import GeneralStatsPanel from '../components/ManagerStats/GeneralStats/GeneralStatsPanel';
import DataHeatmap from '../components/ManagerStats/GeneralStats/DataHeatmap';
import LogbookUsagePanel from '../components/ManagerStats/GeneralStats/LogbookUsagePanel';
import { useQuery } from '../helpers/hooks';
function DataStatisticsPage() {
......@@ -35,7 +36,7 @@ function DataStatisticsPage() {
return (
<div className="app__inner">
<Tabs id="uncontrolled-tab-example" defaultActiveKey={1}>
<Tab eventKey={1} title="Dataset Statistics">
<Tab eventKey={5} title="Dataset Statistics">
<Panel style={{ margin: 10 }} bsStyle="primary">
<Panel.Heading>
<Panel.Title componentClass="h3">
......@@ -116,6 +117,14 @@ function DataStatisticsPage() {
metric={metric}
></DataHeatmap>
</Tab>
<Tab eventKey={1} title="Logbook Usage">
<LogbookUsagePanel
instrumentName={instrumentName}
user={user}
startDate={startDate}
endDate={endDate}
></LogbookUsagePanel>
</Tab>
</Tabs>
</div>
);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment