Fix errors and add warning on first application load (#715)

* Fix errors and add warning on first application load

Fixes the error that is thrown by the cluster usage dashboard if no clusters have been set up.

A workflow was also added in order to warn users on application load if they do not have any clusters set up via redux in the header component.

* Remove cancel from modal and console logs

client-reactjs/src/components/application/dashboard/clusterUsage/index.js

@@ -31,7 +31,7 @@ function ClusterUsage() {
     }
 
     // If no clusterId in url
-    if (clusters && !urlQueries.clusterId) {
+    if (clusters?.length && !urlQueries.clusterId) {
       setSelectedCluster(clusters[0].id);
       addQueriesToUrl({ queryName: 'clusterId', queryValue: clusters[0].id });
     }

client-reactjs/src/components/common/Constants.js

@@ -35,6 +35,7 @@ export const Constants = {
 
   CLUSTER_SELECTED: 'CLUSTER_SELECTED',
   CLUSTERS_RETRIEVED: 'CLUSTERS_RETRIEVED',
+  NO_CLUSTERS_FOUND: 'NO_CLUSTERS_FOUND',
 
   CONSUMERS_RETRIEVED: 'CONSUMERS_RETRIEVED',
   LICENSES_RETRIEVED: 'LICENSES_RETRIEVED',

client-reactjs/src/components/common/noCluster.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Modal } from 'antd';
+import { Link } from 'react-router-dom';
+
+const NoCluster = ({ visible, setVisible, applicationId }) => {
+  const handleOk = () => {
+    setVisible(false);
+  };
+
+  return (
+    <div>
+      <Modal
+        title="No Clusters Setup"
+        open={visible}
+        onOk={handleOk}
+        footer={(_, { OkBtn }) => (
+          <>
+            <OkBtn />
+          </>
+        )}>
+        <p>
+          It looks like you do not have any clusters set up, most of Tombolos functionalities rely on a connection to an
+          HPCC cluster including:
+          <br />
+          <br />
+          <ul>
+            <li>
+              <Link to={`/${applicationId}/Dataflow`} onClick={() => setVisible(false)}>
+                Workflow Management
+              </Link>
+            </li>
+            <li>
+              <Link to={`/${applicationId}/fileMonitoring`} onClick={() => setVisible(false)}>
+                File Monitoring
+              </Link>
+            </li>
+            <li>
+              <Link to={`/${applicationId}/clustermonitoring`} onClick={() => setVisible(false)}>
+                Cluster Monitoring
+              </Link>
+            </li>
+            <li>
+              <Link to={`/${applicationId}/jobmonitoring`} onClick={() => setVisible(false)}>
+                Job Monitoring
+              </Link>
+            </li>
+
+            <li>
+              <Link to={`/${applicationId}/superfileMonitoring`} onClick={() => setVisible(false)}>
+                Superfile Monitoring
+              </Link>
+            </li>
+
+            <li>
+              <Link to={`/${applicationId}/dashboard/clusterUsage`} onClick={() => setVisible(false)}>
+                Cluster Usage Dashboards
+              </Link>
+            </li>
+            <li>
+              <Link to={`/${applicationId}/dashboard/notifications`} onClick={() => setVisible(false)}>
+                Notification Dashboards
+              </Link>
+            </li>
+          </ul>
+          <br />
+          <Link to="/admin/clusters" onClick={() => setVisible(false)}>
+            Set up a cluster now
+          </Link>
+          , or go to the left navigation and select the cluster option at any time.
+        </p>
+      </Modal>
+    </div>
+  );
+};
+
+export default NoCluster;