feat: add metrics

Does not work currently, as everything is behind a super secret API.

.eslintrc.json

@@ -16,7 +16,8 @@
     "plugin:react/recommended",
     "eslint:recommended",
     "prettier",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended"
   ],
   "parserOptions": {
     "extraFileExtensions": [".mjs"]

lib/nile/scripts/api-cleaner.sh

@@ -9,6 +9,7 @@ declare -a arr=(
   "WorkspacesApi" 
   "DevelopersApi"
   "AccessApi"
+  "MetricsApi"
 )
 
 for i in "${arr[@]}"

package.json

@@ -32,6 +32,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.4",
     "husky": "8.0.1",
     "lerna": "^5.5.1",
     "lint-staged": "^13.0.3",

packages/react/package.json

@@ -68,6 +68,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-storybook": "^0.6.4",
     "husky": "^8.0.1",
     "size-limit": "^8.0.1",
     "tsdx": "^0.14.1",
@@ -83,9 +84,11 @@
     "@mui/x-data-grid": "^5.17.2",
     "@tanstack/react-query": "^4.3.4",
     "@theniledev/js": "^0.20.2",
+    "date-fns": "^2.29.3",
     "react": ">=18",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.35.0",
-    "react-is": "^18.2.0"
+    "react-is": "^18.2.0",
+    "recharts": "2.1.12"
   }
 }

packages/react/src/components/Metrics/MetricsLineChart.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Stack, Typography } from '@mui/joy';
+import { XAxis, YAxis, LineChart, Line, Tooltip, Legend } from 'recharts';
+import { format } from 'date-fns';
+import { LineProps } from 'recharts';
+import { FilterMetricsRequest } from '@theniledev/js';
+
+import { useMetrics } from './hooks';
+
+export enum DataKeys {
+  timestamp = 'timestamp',
+  value = 'value',
+  instanceId = 'instanceId',
+  attributes = 'attributes',
+}
+
+export type MetricsComponentProps = {
+  height?: number;
+  width?: number;
+  timeFormat?: 'string';
+  line?: LineProps;
+};
+
+export default function MetricsLineChart(
+  props: FilterMetricsRequest & MetricsComponentProps
+): React.ReactElement | null {
+  const {
+    filter,
+    width = 500,
+    height = 300,
+    timeFormat = 'HH:ss',
+    line = { type: 'monotone', stroke: '#82ca9d' },
+  } = props;
+  const { isLoading, metrics } = useMetrics(props);
+  const metricName = filter.metricName;
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <Stack>
+      <Typography level="h4">{metricName}</Typography>
+      <LineChart data={metrics} width={width} height={height}>
+        <Legend />
+        <Tooltip />
+        <XAxis
+          dataKey={DataKeys.timestamp}
+          tickFormatter={(time: string | Date): string => {
+            if (time instanceof Date) {
+              return format(time, timeFormat);
+            }
+            return time;
+          }}
+        />
+        <YAxis />
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any*/}
+        <Line dataKey={DataKeys.value} {...(line as any)} />
+      </LineChart>
+    </Stack>
+  );
+}

packages/react/src/components/Metrics/hooks.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  Filter,
+  FilterMetricsRequest,
+  Measurement,
+  Metric,
+} from '@theniledev/js';
+
+import { useNile } from '../../context';
+import Queries, { useQuery } from '../../lib/queries';
+
+type Props = FilterMetricsRequest;
+type UseMetricsReturn = {
+  isLoading: boolean;
+  metrics: Measurement[];
+};
+
+export const useMetrics = (props?: Props): UseMetricsReturn => {
+  const nile = useNile();
+
+  const filter: void | Filter = props?.filter;
+
+  // API does not like this currently
+  if (filter && filter.metricName === '') {
+    delete filter.metricName;
+  }
+
+  const { data: fetchedData = [], isLoading } = useQuery(
+    [Queries.FilterMetrics(JSON.stringify(filter))],
+    () =>
+      nile.metrics.filterMetrics({
+        ...props,
+        filter: filter ? filter : {},
+      }),
+    { enabled: Boolean(nile.workspace && nile.authToken) }
+  );
+
+  const flatMetrics = React.useMemo(
+    () =>
+      fetchedData?.flatMap((metric: Metric) => {
+        return metric.measurements;
+      }),
+    [fetchedData]
+  );
+
+  return { isLoading, metrics: flatMetrics };
+};

packages/react/src/components/Metrics/index.ts

@@ -0,0 +1,2 @@
+export { useMetrics } from './hooks';
+export { default as MetricsLineChart } from './MetricsLineChart';

packages/react/src/index.ts

@@ -8,3 +8,5 @@ export {
   useMutation,
   useQueries,
 } from './lib/queries';
+
+export { MetricsLineChart, useMetrics } from './components/Metrics';

packages/react/src/lib/queries/index.tsx

@@ -8,6 +8,7 @@ enum Queries {
   Invites = '/invites',
   Users = '/users',
   Authz = '/authz',
+  Metrics = '/metrics',
 }
 
 const ListOrganizations = [Queries.Organizations];
@@ -42,6 +43,8 @@ const GetPolicy = (org: ParamType, id: ParamType) => [
   `${Queries.Authz}/${GetOrganization(org)}/policies/${id}`,
 ];
 
+const FilterMetrics = (filter: ParamType) => [`${Queries.Metrics}/${filter}`];
+
 const queryKeys = {
   ListWorkspaces,
   ListOrganizations,
@@ -59,6 +62,7 @@ const queryKeys = {
   GetDeveloperToken,
   ListPolicies,
   GetPolicy,
+  FilterMetrics,
 };
 
 export default queryKeys;

packages/react/stories/InstanceTable.stories.tsx

@@ -1,5 +1,3 @@
-// Button.stories.ts|tsx
-
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import {
@@ -42,7 +40,7 @@ const entityData = {
   },
 };
 const organization: Organization = {
-  creator: 'some_creator',
+  creator: 'someone?',
   id: 'org_02qdzMMNHAPIF1XSeD9jrx',
   created: new Date(),
   updated: new Date(),

packages/react/stories/LoginForm.stories.tsx

@@ -1,5 +1,3 @@
-// Button.stories.ts|tsx
-
 import React from 'react';
 import { Meta, Story } from '@storybook/react';