refactor(nomad): sync frontend with EE [EE-3353] (#7758)

app/react/nomad/DashboardView/DashboardView.tsx

@@ -0,0 +1,83 @@
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { DashboardItem } from '@@/DashboardItem';
+import { Widget, WidgetTitle, WidgetBody } from '@@/Widget';
+import { PageHeader } from '@@/PageHeader';
+import { DashboardGrid } from '@@/DashboardItem/DashboardGrid';
+
+import { useDashboard } from './useDashboard';
+import { RunningStatus } from './RunningStatus';
+
+export function DashboardView() {
+  const environmentId = useEnvironmentId();
+  const dashboardQuery = useDashboard(environmentId);
+
+  const running = dashboardQuery.data?.RunningTaskCount || 0;
+  const stopped = (dashboardQuery.data?.TaskCount || 0) - running;
+
+  return (
+    <>
+      <PageHeader
+        title="Dashboard"
+        breadcrumbs={[{ label: 'Environment summary' }]}
+      />
+
+      {dashboardQuery.isLoading ? (
+        <div className="text-center" style={{ marginTop: '30%' }}>
+          Connecting to the Edge environment...
+          <i className="fa fa-cog fa-spin space-left" />
+        </div>
+      ) : (
+        <>
+          <div className="row">
+            <div className="col-sm-12">
+              {/* cluster info */}
+              <Widget>
+                <WidgetTitle
+                  icon="fa-tachometer-alt"
+                  title="Cluster information"
+                />
+                <WidgetBody className="no-padding">
+                  <table className="table">
+                    <tbody>
+                      <tr>
+                        <td>Nodes in the cluster</td>
+                        <td>{dashboardQuery.data?.NodeCount ?? '-'}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </WidgetBody>
+              </Widget>
+            </div>
+          </div>
+
+          <div className="mx-4">
+            <DashboardGrid>
+              {/* jobs */}
+              <DashboardItem
+                value={dashboardQuery.data?.JobCount}
+                icon="fa fa-th-list"
+                type="Nomad Job"
+              />
+              {/* groups */}
+              <DashboardItem
+                value={dashboardQuery.data?.GroupCount}
+                icon="fa fa-list-alt"
+                type="Group"
+              />
+              {/* tasks */}
+              <DashboardItem
+                value={dashboardQuery.data?.TaskCount}
+                icon="fa fa-cubes"
+                type="Task"
+              >
+                {/* running status of tasks */}
+                <RunningStatus running={running} stopped={stopped} />
+              </DashboardItem>
+            </DashboardGrid>
+          </div>
+        </>
+      )}
+    </>
+  );
+}

app/react/nomad/DashboardView/RunningStatus.tsx

@@ -0,0 +1,25 @@
+interface Props {
+  running: number;
+  stopped: number;
+}
+
+export function RunningStatus({ running, stopped }: Props) {
+  return (
+    <div>
+      <div>
+        <i
+          className="fa fa-power-off green-icon space-right"
+          aria-hidden="true"
+        />
+        {`${running || '-'} running`}
+      </div>
+      <div>
+        <i
+          className="fa fa-power-off red-icon space-right"
+          aria-hidden="true"
+        />
+        {`${stopped || '-'} stopped`}
+      </div>
+    </div>
+  );
+}

app/react/nomad/DashboardView/index.ts

@@ -0,0 +1 @@
+export { DashboardView } from './DashboardView';

app/react/nomad/DashboardView/useDashboard.ts

@@ -0,0 +1,41 @@
+import { useQuery } from 'react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+
+export type DashboardResponse = {
+  JobCount: number;
+  GroupCount: number;
+  TaskCount: number;
+  RunningTaskCount: number;
+  NodeCount: number;
+};
+
+export function useDashboard(environmentId: EnvironmentId) {
+  return useQuery(
+    ['environments', environmentId, 'nomad', 'dashboard'],
+    () => getDashboard(environmentId),
+    {
+      meta: {
+        error: {
+          title: 'Failure',
+          message: 'Unable to get dashboard information',
+        },
+      },
+    }
+  );
+}
+
+export async function getDashboard(environmentId: EnvironmentId) {
+  try {
+    const { data: dashboard } = await axios.get<DashboardResponse>(
+      `/nomad/endpoints/${environmentId}/dashboard`,
+      {
+        params: {},
+      }
+    );
+    return dashboard;
+  } catch (e) {
+    throw parseAxiosError(e as Error);
+  }
+}