Statistics widget

invenio_administration/assets/semantic-ui/js/invenio_administration/api/actions.js

@@ -1,25 +1,22 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
 import { APIRoutes } from "./routes";
 import { http } from "./config";
 
-const getResource = async (
-  apiEndpoint,
-  pid,
-) => {
+const getResource = async (apiEndpoint, pid) => {
   return await http.get(APIRoutes.get(apiEndpoint, pid));
 };
 
-const deleteResource = async (
-  resource,
-  apiEndpoint,
-  idKeyPath = "pid"
-) => {
-  return await http.delete(APIRoutes.detailsView(apiEndpoint, resource, idKeyPath));
+const searchResource = async (apiEndpoint, query, sort, page, size) => {
+  return await http.get(APIRoutes.search(apiEndpoint, query, sort, page, size));
 };
 
-const editResource = async(apiEndpoint, pid, payload) => {
-  return await http.put(APIRoutes.get(apiEndpoint,pid), payload);
+const deleteResource = async (resource, apiEndpoint, idKeyPath = "pid") => {
+  return await http.delete(
+    APIRoutes.detailsView(apiEndpoint, resource, idKeyPath)
+  );
+};
+
+const editResource = async (apiEndpoint, pid, payload) => {
+  return await http.put(APIRoutes.get(apiEndpoint, pid), payload);
 };
 
 const createResource = () => {};
@@ -30,5 +27,5 @@ export const InvenioAdministrationActionsApi = {
   deleteResource: deleteResource,
   editResource: editResource,
   getResource: getResource,
-};
-
+  searchResource: searchResource,
+};

invenio_administration/assets/semantic-ui/js/invenio_administration/api/config.js

@@ -10,7 +10,9 @@ const apiConfig = {
   withCredentials: true,
   xsrfCookieName: "csrftoken",
   xsrfHeaderName: "X-CSRFToken",
+  baseURL: "/",
   headers: {
+    Accept: "application/json",
     "Accept": "application/json",
     "Content-Type": "application/json",
   },

invenio_administration/assets/semantic-ui/js/invenio_administration/api/routes.js

@@ -1,14 +1,17 @@
 import _get from "lodash/get";
 
 const APIRoutesGenerators = {
-  detailsView: (routePrefix, resource, idKeyPath="pid") => {
+  detailsView: (routePrefix, resource, idKeyPath = "pid") => {
     return `${routePrefix}/${_get(resource, idKeyPath)}`;
   },
   get: (routePrefix, pid) => {
     return `${routePrefix}/${pid}`;
   },
-}
+  search: (routePrefix, query, sort, page, size) => {
+    return `${routePrefix}?q=${query}&sort=${sort}&page=${page}&size=${size}`;
+  },
+};
 
 export const APIRoutes = {
-  ...APIRoutesGenerators
-}
+  ...APIRoutesGenerators,
+};

invenio_administration/assets/semantic-ui/js/invenio_administration/statistics/AdministrationStatistics.js

@@ -0,0 +1,82 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2022 CERN.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+import _get from "lodash/get";
+import _isEmpty from "lodash/isEmpty";
+import React from "react";
+import { InvenioAdministrationActionsApi } from "../api/actions";
+import { Component } from "react";
+import { Item } from "semantic-ui-react";
+import PropTypes from "prop-types";
+
+export class AdministrationStatistics extends Component {
+  constructor() {
+    super();
+    this.state = {
+      intervalHits: [],
+      isLoading: false,
+    };
+  }
+
+  fetchValues = async () => {
+    const { apiEndpoint, query, sort, page, size } = this.props;
+    return await InvenioAdministrationActionsApi.searchResource(
+      apiEndpoint,
+      query,
+      sort,
+      page,
+      size
+    );
+  };
+
+  async componentDidMount() {
+    this.setState({ isLoading: true });
+    const response = await this.fetchValues();
+    console.log(response.data);
+    this.setState({
+      intervalHits: response.data.hits.hits.length,
+      isLoading: false,
+    });
+  }
+
+  render() {
+    const { records, timeInterval, label } = this.props;
+    const { intervalHits } = this.state;
+    return (
+      <Item>
+        <Item.Content>
+          <Item.Header>{records}</Item.Header>
+          <Item.Description>{intervalHits}</Item.Description>
+          <Item.Extra>
+            {label} in the past {timeInterval}
+          </Item.Extra>
+        </Item.Content>
+      </Item>
+    );
+  }
+}
+
+AdministrationStatistics.propTypes = {
+  records: PropTypes.string,
+  timeInterval: PropTypes.string,
+  label: PropTypes.string,
+  apiEndpoint: PropTypes.string.isRequired,
+  query: PropTypes.string,
+  sort: PropTypes.string,
+  page: PropTypes.number,
+  size: PropTypes.number,
+};
+
+AdministrationStatistics.defaultProps = {
+  records: "",
+  timeInterval: "week",
+  label: "published",
+  query: "created:[2017 TO 2023]",
+  sort: "newest",
+  page: 1,
+  size: 5,
+};

invenio_administration/assets/semantic-ui/js/invenio_administration/statistics/index.js

@@ -0,0 +1,32 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2022 CERN.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import _get from "lodash/get";
+import React from "react";
+import ReactDOM from "react-dom";
+import { AdministrationStatistics } from "./AdministrationStatistics";
+
+const domContainer = document.getElementById("statistics-widget-1");
+
+const dataAttr = domContainer.dataset;
+const records = dataAttr.records;
+const timeInterval = dataAttr.timeInterval;
+const label = dataAttr.label;
+
+console.log(domContainer);
+
+ReactDOM.render(
+  <AdministrationStatistics
+    apiEndpoint="api/communities"
+    records={records}
+    timeInterval={timeInterval}
+    label={label}
+  />,
+  domContainer
+);
+export default AdministrationStatistics;

invenio_administration/templates/semantic-ui/invenio_administration/dashboard/dashboard.html

@@ -0,0 +1,26 @@
+{#
+  Copyright (C) 2022 CERN.
+
+  Invenio App RDM is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+#}
+
+{% extends admin_base_template %}
+
+{% block admin_page_content %}
+
+Put content here
+
+<div
+  id="statistics-widget-1"
+  data-records="Communities"
+  data-time-interval="week"
+  data-label="created"
+></div>
+
+{% endblock admin_page_content %}
+
+{% block javascript %}
+  {{ super() }}
+  {{ webpack['invenio-administration-statistics.js'] }}
+{% endblock %}

invenio_administration/views/dashboard.py

@@ -14,6 +14,6 @@
 class AdminDashboardView(AdminView):
     """Admin dashboard view."""
 
-    template = "invenio_administration/index.html"
+    template = "invenio_administration/dashboard/dashboard.html"
     name = "dashboard"
     url = "/"

invenio_administration/webpack.py

@@ -21,6 +21,8 @@
             entry={
                 "invenio-administration-search":
                     "./js/invenio_administration/search/search.js",
+                "invenio-administration-statistics":
+                    "./js/invenio_administration/statistics/index.js",
                 "base-admin-theme":
                     "./js/invenio_administration/theme.js"
             },