IIIF #82 - Adding SystemStatus widget to dashboard

client/src/components/AttributeView.js

@@ -0,0 +1,28 @@
+// @flow
+
+import React, { type ComponentType } from 'react';
+import styles from './AttributeView.module.css';
+
+type Props = {
+  label: string,
+  value: string
+};
+
+const AttributeView: ComponentType<any> = (props: Props) => (
+  <div
+    className={styles.gridItem}
+  >
+    <div
+      className={styles.label}
+    >
+      { props.label }
+    </div>
+    <div
+      className={styles.value}
+    >
+      { props.value }
+    </div>
+  </div>
+);
+
+export default AttributeView;

client/src/components/AttributeView.module.css

@@ -0,0 +1,8 @@
+.gridItem .label {
+  color: rgba(0, 0, 0, .6);
+  padding-top: 0.25em;
+}
+
+.gridItem .value {
+  font-weight: bold;
+}

client/src/components/StatusIcon.js

@@ -0,0 +1,45 @@
+// @flow
+
+import React, { type ComponentType } from 'react';
+import { Icon } from 'semantic-ui-react';
+
+type Props = {
+  className?: string,
+  status: 'positive' | 'warning' | 'negative'
+};
+
+const StatusIcon: ComponentType<any> = (props: Props) => {
+  if (props.status === 'positive') {
+    return (
+      <Icon
+        className={props.className}
+        color='green'
+        name='check circle'
+      />
+    );
+  }
+
+  if (props.status === 'warning') {
+    return (
+      <Icon
+        className={props.className}
+        color='yellow'
+        name='warning circle'
+      />
+    );
+  }
+
+  if (props.status === 'negative') {
+    return (
+      <Icon
+        className={props.className}
+        color='red'
+        name='times circle'
+      />
+    );
+  }
+
+  return null;
+};
+
+export default StatusIcon;

client/src/i18n/en.json

@@ -178,6 +178,17 @@
       "header": "Password Policy"
     }
   },
+  "SystemStatus": {
+    "labels": {
+      "application": "Application",
+      "operatingSystem": "Operating system",
+      "processors": "Processors",
+      "version": "Version",
+      "vm": "VM",
+      "vmVersion": "VM version"
+    },
+    "title": "System Status"
+  },
   "UserModal": {
     "labels": {
       "user": "User"

client/src/pages/Dashboard.js

@@ -1,11 +1,19 @@
 // @flow
 
 import React, { type ComponentType } from 'react';
+import { Container, Segment } from 'semantic-ui-react';
 import AdminPage from '../components/AdminPage';
+import SystemStatus from '../widgets/SystemStatus';
 
 const Dashboard: ComponentType<any> = () => (
   <AdminPage>
-    Dashboard
+    <Container
+      fluid
+    >
+      <Segment>
+        <SystemStatus />
+      </Segment>
+    </Container>
   </AdminPage>
 );
 

client/src/pages/Resource.js

@@ -21,13 +21,13 @@ import {
   Segment
 } from 'semantic-ui-react';
 import AttachmentDetails from '../components/AttachmentDetails';
-import AttachmentStatus from '../components/AttachmentStatus';
 import AuthenticationService from '../services/Authentication';
 import ProjectsService from '../services/Projects';
 import ReadOnlyField from '../components/ReadOnlyField';
 import ResourceExifModal from '../components/ResourceExifModal';
 import ResourcesService from '../services/Resources';
 import SimpleEditPage from '../components/SimpleEditPage';
+import StatusIcon from '../components/StatusIcon';
 import styles from './Resource.module.css';
 import withEditPage from '../hooks/EditPage';
 
@@ -198,9 +198,9 @@ const ResourceForm = withTranslation()((props) => {
               onClick={() => setTab(Tabs.content)}
             >
               { props.t('Resource.labels.sourceImage') }
-              <AttachmentStatus
+              <StatusIcon
                 className={cx(styles.icon, styles.attachmentStatus)}
-                value={!!props.item.content_info}
+                status={props.item.content_info ? 'positive' : 'negative'}
               />
             </Menu.Item>
             <Menu.Item
@@ -209,9 +209,9 @@ const ResourceForm = withTranslation()((props) => {
               onClick={() => setTab(Tabs.content_converted)}
             >
               { props.t('Resource.labels.convertedImage') }
-              <AttachmentStatus
+              <StatusIcon
                 className={cx(styles.icon, styles.attachmentStatus)}
-                value={!!props.item.content_converted_info}
+                status={props.item.content_converted_info ? 'positive' : 'negative'}
               />
             </Menu.Item>
             { AuthenticationService.isAdmin() && (

client/src/services/Dashboard.js

@@ -0,0 +1,95 @@
+// @flow
+
+import { BaseService } from '@performant-software/shared-components';
+
+/**
+ * Class responsible for handling all dashboard API requests.
+ */
+class Dashboard extends BaseService {
+  /**
+   * Not implemented.
+   *
+   * @param args
+   *
+   * @returns {Promise<*>}
+   */
+  create(...args: any): Promise<any> {
+    return Promise.reject(args);
+  }
+
+  /**
+   * Not implemented.
+   *
+   * @param args
+   *
+   * @returns {Promise<*>}
+   */
+  delete(...args: any): Promise<any> {
+    return Promise.reject(args);
+  }
+
+  /**
+   * Not implemented.
+   *
+   * @param args
+   *
+   * @returns {Promise<*>}
+   */
+  fetchAll(...args: any): Promise<any> {
+    return Promise.reject(args);
+  }
+
+  /**
+   * Not implemented.
+   *
+   * @param args
+   *
+   * @returns {Promise<*>}
+   */
+  fetchOne(...args: any): Promise<any> {
+    return Promise.reject(args);
+  }
+
+  /**
+   * Returns the dashboard base URL.
+   *
+   * @returns {string}
+   */
+  getBaseUrl(): string {
+    return '/api/dashboard';
+  }
+
+  /**
+   * Not implemented.
+   *
+   * @param args
+   *
+   * @returns {Promise<*>}
+   */
+  save(...args: any): Promise<any> {
+    return Promise.reject(args);
+  }
+
+  /**
+   * Calls the `/api/dashboard/status` API endpoint.
+   *
+   * @returns {*}
+   */
+  status(): Promise<any> {
+    return this.getAxios().get(`${this.getBaseUrl()}/status`, null, this.getConfig());
+  }
+
+  /**
+   * Not implemented.
+   *
+   * @param args
+   *
+   * @returns {Promise<*>}
+   */
+  update(...args: any): Promise<any> {
+    return Promise.reject(args);
+  }
+}
+
+const DashboardService: Dashboard = new Dashboard();
+export default DashboardService;