Initial Commit Rework

frontend/src/System/Status/Health/Health.css

@@ -0,0 +1,21 @@
+.legend {
+  display: flex;
+  justify-content: space-between;
+}
+
+.loading {
+  composes: loading from 'Components/Loading/LoadingIndicator.css';
+
+  margin-top: 2px;
+  margin-left: 10px;
+  text-align: left;
+}
+
+.status {
+  width: 20px;
+}
+
+.healthOk {
+  margin-bottom: 25px;
+}
+

frontend/src/System/Status/Health/Health.js

@@ -0,0 +1,170 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import titleCase from 'Utilities/String/titleCase';
+import { icons, kinds } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FieldSet from 'Components/FieldSet';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableRow from 'Components/Table/TableRow';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import styles from './Health.css';
+
+function getInternalLink(source) {
+  switch (source) {
+    case 'IndexerRssCheck':
+    case 'IndexerSearchCheck':
+    case 'IndexerStatusCheck':
+      return (
+        <Link to="/settings/indexers">
+          Settings
+        </Link>
+      );
+    case 'DownloadClientCheck':
+    case 'ImportMechanismCheck':
+      return (
+        <Link to="/settings/downloadclients">
+          Settings
+        </Link>
+      );
+    case 'RootFolderCheck':
+      return (
+        <div>
+          <Link to="/serieseditor">
+            Series Editor
+          </Link>
+        </div>
+      );
+    case 'UpdateCheck':
+      return (
+        <Link to="/system/updates">
+          Updates
+        </Link>
+      );
+    default:
+      return;
+  }
+}
+
+const columns = [
+  {
+    className: styles.status,
+    name: 'type',
+    isVisible: true
+  },
+  {
+    name: 'message',
+    label: 'Message',
+    isVisible: true
+  },
+  {
+    name: 'wikiLink',
+    label: 'Wiki',
+    isVisible: true
+  },
+  {
+    name: 'internalLink',
+    isVisible: true
+  }
+];
+
+class Health extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      items
+    } = this.props;
+
+    const healthIssues = !!items.length;
+
+    return (
+      <FieldSet
+        legend={
+          <div className={styles.legend}>
+            Health
+
+            {
+              isFetching && isPopulated &&
+                <LoadingIndicator
+                  className={styles.loading}
+                  size={20}
+                />
+            }
+          </div>
+        }
+      >
+        {
+          isFetching && !isPopulated &&
+            <LoadingIndicator />
+        }
+
+        {
+          !healthIssues &&
+            <div className={styles.healthOk}>
+              No issues with your configuration
+            </div>
+        }
+
+        {
+          healthIssues &&
+            <Table
+              columns={columns}
+            >
+              <TableBody>
+                {
+                  items.map((item) => {
+                    const internalLink = getInternalLink(item.source);
+
+                    return (
+                      <TableRow key={`health${item.message}`}>
+                        <TableRowCell>
+                          <Icon
+                            name={icons.DANGER}
+                            kind={item.type.toLowerCase() === 'error' ? kinds.DANGER : kinds.WARNING}
+                            title={titleCase(item.type)}
+                          />
+                        </TableRowCell>
+
+                        <TableRowCell>{item.message}</TableRowCell>
+
+                        <TableRowCell>
+                          <Link
+                            to={item.wikiUrl}
+                            title="Read the Wiki for more information"
+                          >
+                            Wiki
+                          </Link>
+                        </TableRowCell>
+
+                        <TableRowCell>
+                          {
+                            internalLink
+                          }
+                        </TableRowCell>
+                      </TableRow>
+                    );
+                  })
+                }
+              </TableBody>
+            </Table>
+        }
+      </FieldSet>
+    );
+  }
+
+}
+
+Health.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  items: PropTypes.array.isRequired
+};
+
+export default Health;

frontend/src/System/Status/Health/HealthConnector.js

@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchHealth } from 'Store/Actions/systemActions';
+import Health from './Health';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.system.health,
+    (health) => {
+      const {
+        isFetching,
+        isPopulated,
+        items
+      } = health;
+
+      return {
+        isFetching,
+        isPopulated,
+        items
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchHealth
+};
+
+class HealthConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchHealth();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Health
+        {...this.props}
+      />
+    );
+  }
+}
+
+HealthConnector.propTypes = {
+  fetchHealth: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(HealthConnector);

frontend/src/System/Status/Health/HealthStatusConnector.js

@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchHealth } from 'Store/Actions/systemActions';
+import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.app,
+    (state) => state.system.health,
+    (app, health) => {
+      const count = health.items.length;
+      let errors = false;
+      let warnings = false;
+
+      health.items.forEach((item) => {
+        if (item.type === 'error') {
+          errors = true;
+        }
+
+        if (item.type === 'warning') {
+          warnings = true;
+        }
+      });
+
+      return {
+        isConnected: app.isConnected,
+        isReconnecting: app.isReconnecting,
+        isPopulated: health.isPopulated,
+        count,
+        errors,
+        warnings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchHealth
+};
+
+class HealthStatusConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    if (!this.props.isPopulated) {
+      this.props.fetchHealth();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.isConnected && prevProps.isReconnecting) {
+      this.props.fetchHealth();
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <PageSidebarStatus
+        {...this.props}
+      />
+    );
+  }
+}
+
+HealthStatusConnector.propTypes = {
+  isConnected: PropTypes.bool.isRequired,
+  isReconnecting: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  fetchHealth: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(HealthStatusConnector);