Streams react query

package.json

@@ -8,20 +8,22 @@
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.8",
     "@reduxjs/toolkit": "^1.5.1",
-    "@tapis/tapis-typescript": "^0.0.10",
+    "@tapis/tapis-typescript": "^0.0.12",
     "axios": "^0.21.1",
     "babel-plugin-react-css-modules": "^5.2.6",
     "bootstrap": "^4.6.0",
     "cross-fetch": "^3.1.4",
     "js-cookie": "^3.0.0",
     "lodash": "^4.17.21",
+    "plotly.js": "^2.5.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^17.0.2",
     "react-dropzone": "^10.2.1",
     "react-hook-form": "^7.14.2",
     "react-hot-loader": "^4.13.0",
+    "react-plotly.js": "^2.5.1",
     "react-query": "^3.19.2",
     "react-resize-detector": "^6.1.0",
     "react-router-dom": "^5.2.0",
@@ -31,6 +33,7 @@
     "sass": "^1.37.5",
     "typescript": "^4.3.5",
     "uuid": "^7.0.2",
+    "uuidv4": "^6.2.12",
     "web-vitals": "^1.1.2"
   },
   "homepage": "https://tapis-project.github.io/tapis-ui",
@@ -73,6 +76,7 @@
     "@types/react": "^17.0.17",
     "@types/react-css-modules": "^4.6.3",
     "@types/react-dom": "^17.0.9",
+    "@types/react-plotly.js": "^2.5.0",
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.8",
     "@types/redux-logger": "^3.0.8",

src/fixtures/streams/instruments.fixtures.ts

@@ -0,0 +1,13 @@
+import { Streams } from '@tapis/tapis-typescript';
+
+export const instrument: Streams.Instrument = {
+  inst_id: "ui_e2e_inst",
+  inst_name: "ui_e2e_inst",
+  inst_description: "ui_e2e_inst",
+  chords_id: "",
+  owner: "",
+  site_id: "",
+  created: "",
+  tags: [],
+  metadata: {}
+};

src/fixtures/streams/measurements.fixtures.ts

@@ -0,0 +1,16 @@
+import { Streams } from '@tapis/tapis-typescript';
+
+//temp until tapis typescript library updated
+export const measurements: Streams.Measurements = {
+    instrument: undefined,
+    site: undefined,
+    measurements_in_file: 2,
+    ui_e2e_var_1: {
+        "2021-09-18T18:54:17Z": 12.12,
+        "2021-09-19T19:54:17Z": 9.09
+    },
+    ui_e2e_var_2: {
+        "2021-09-17T18:54:17Z": 11.18,
+        "2021-09-17T19:54:17Z": 10.47
+    }
+};

src/fixtures/streams/projects.fixtures.ts

@@ -0,0 +1,12 @@
+import { Streams } from '@tapis/tapis-typescript';
+
+export const project: Streams.Project = {
+  project_name: "ui_e2e_project",
+  project_id: "ui_e2e_project",
+  owner: "",
+  funding_resource: "",
+  pi: "",
+  project_url: "",
+  active: true,
+  metadata: {}
+};

src/fixtures/streams/sites.fixtures.ts

@@ -0,0 +1,11 @@
+import { Streams } from '@tapis/tapis-typescript';
+
+export const site: Streams.Site = {
+  site_name: "ui_e2e_site",
+  site_id: "ui_e2e_site",
+  owner: "",
+  longitude: 0,
+  latitude: 0,
+  elevation: 0,
+  metadata: {}
+};

src/fixtures/streams/variables.fixtures.ts

@@ -0,0 +1,14 @@
+import { Streams } from '@tapis/tapis-typescript';
+
+export const variable: Streams.Variable = {
+  var_name: "ui_e2e_var",
+  var_id: "ui_e2e_var",
+  owner: "",
+  inst_id: "ui_e2e_inst",
+  shortname: "",
+  unit: "",
+  unit_abbrev: "",
+  measured_property: "",
+  chords_id: 0,
+  metadata: {}
+};

src/index.tsx

@@ -8,7 +8,7 @@ import 'tapis-ui/index.css';
 
 ReactDOM.render(
   <React.StrictMode>
-    <TapisProvider basePath="https://tacc.tapis.io">
+    <TapisProvider basePath="https://dev.develop.tapis.io">
       <Router>
         <App />
       </Router>

src/tapis-api/streams/instruments/index.ts

@@ -0,0 +1 @@
+export { default as list } from './list';

src/tapis-api/streams/instruments/list.ts

@@ -0,0 +1,18 @@
+import { Streams } from '@tapis/tapis-typescript';
+import { apiGenerator, errorDecoder } from 'tapis-api/utils';
+
+const list = (
+  params: Streams.ListInstrumentsRequest,
+  basePath: string,
+  jwt: string
+) => {
+  const api: Streams.InstrumentsApi = apiGenerator<Streams.InstrumentsApi>(
+    Streams,
+    Streams.InstrumentsApi,
+    basePath,
+    jwt
+  );
+  return errorDecoder<Streams.RespListInstruments>(() => api.listInstruments(params));
+};
+
+export default list;

src/tapis-api/streams/measurements/index.ts

@@ -0,0 +1 @@
+export { default as list } from './list';

src/tapis-api/streams/measurements/list.ts

@@ -0,0 +1,18 @@
+import { Streams } from '@tapis/tapis-typescript';
+import { apiGenerator, errorDecoder } from 'tapis-api/utils';
+
+const list = (
+  params: Streams.ListMeasurementsRequest,
+  basePath: string,
+  jwt: string
+) => {
+  const api: Streams.MeasurementsApi = apiGenerator<Streams.MeasurementsApi>(
+    Streams,
+    Streams.MeasurementsApi,
+    basePath,
+    jwt
+  );
+  return errorDecoder<Streams.RespListMeasurements>(() => api.listMeasurements(params));
+};
+
+export default list;

src/tapis-api/streams/projects/index.ts

@@ -0,0 +1 @@
+export { default as list } from './list';

src/tapis-api/streams/projects/list.ts

@@ -0,0 +1,18 @@
+import { Streams } from '@tapis/tapis-typescript';
+import { apiGenerator, errorDecoder } from 'tapis-api/utils';
+
+const list = (
+  params: Streams.ListProjectsRequest,
+  basePath: string,
+  jwt: string
+) => {
+  const api: Streams.ProjectsApi = apiGenerator<Streams.ProjectsApi>(
+    Streams,
+    Streams.ProjectsApi,
+    basePath,
+    jwt
+  );
+  return errorDecoder<Streams.RespListProjects>(() => api.listProjects(params));
+};
+
+export default list;

src/tapis-api/streams/sites/index.ts

@@ -0,0 +1 @@
+export { default as list } from './list';

src/tapis-api/streams/sites/list.ts

@@ -0,0 +1,18 @@
+import { Streams } from '@tapis/tapis-typescript';
+import { apiGenerator, errorDecoder } from 'tapis-api/utils';
+
+const list = (
+  params: Streams.ListSitesRequest,
+  basePath: string,
+  jwt: string
+) => {
+  const api: Streams.SitesApi = apiGenerator<Streams.SitesApi>(
+    Streams,
+    Streams.SitesApi,
+    basePath,
+    jwt
+  );
+  return errorDecoder<Streams.RespListSites>(() => api.listSites(params));
+};
+
+export default list;

src/tapis-api/streams/variables/index.ts

@@ -0,0 +1 @@
+export { default as list } from './list';

src/tapis-api/streams/variables/list.ts

@@ -0,0 +1,18 @@
+import { Streams } from '@tapis/tapis-typescript';
+import { apiGenerator, errorDecoder } from 'tapis-api/utils';
+
+const list = (
+  params: Streams.ListVariablesRequest,
+  basePath: string,
+  jwt: string
+) => {
+  const api: Streams.VariablesApi = apiGenerator<Streams.VariablesApi>(
+    Streams,
+    Streams.VariablesApi,
+    basePath,
+    jwt
+  );
+  return errorDecoder<Streams.RespListVariables>(() => api.listVariables(params));
+};
+
+export default list;

src/tapis-app/Dashboard/_components/Dashboard/Dashboard.tsx

@@ -13,6 +13,7 @@ import { useTapisConfig } from 'tapis-hooks';
 import { useList as useSystemsList } from 'tapis-hooks/systems';
 import { useList as useJobsList } from 'tapis-hooks/jobs';
 import { useList as useAppsList } from 'tapis-hooks/apps';
+import { useList as useProjectsList } from "tapis-hooks/streams/projects";
 import styles from './Dashboard.module.scss';
 import './Dashboard.scss';
 
@@ -66,6 +67,7 @@ const Dashboard: React.FC = () => {
   const systems = useSystemsList({});
   const jobs = useJobsList({});
   const apps = useAppsList({ select: 'jobAttributes,version' });
+  const projects = useProjectsList();
 
   return (
     <div>
@@ -107,6 +109,14 @@ const Dashboard: React.FC = () => {
               counter={`${jobs?.data?.result?.length} jobs`}
               loading={jobs?.isLoading}
             />
+            <DashboardCard
+              icon="projects"
+              name="Projects"
+              text="View TAPIS streams projects"
+              link="/streams/projects"
+              counter={`${projects?.data?.result?.length} projects`}
+              loading={projects?.isLoading}
+            />
           </>
         ) : (
           <Card>

src/tapis-app/Streams/Instruments/_Layout/Layout.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  PageLayout,
+  LayoutHeader,
+  LayoutNavWrapper,
+  LayoutBody
+} from 'tapis-ui/_common';
+import { InstrumentsNav } from '../_components';
+import { Router } from '../_Router';
+
+const Layout: React.FC<{ projectId: string, siteId: string }> = ({
+  projectId,
+  siteId
+}) => {
+  const header = (
+    <LayoutHeader>
+      <div>Instruments</div>
+    </LayoutHeader>
+  );
+
+  const sidebar = (
+    <LayoutNavWrapper>
+      <InstrumentsNav projectId={projectId} siteId={siteId} />
+    </LayoutNavWrapper>
+  );
+
+  const body = (
+    <LayoutBody>
+      <Router projectId={projectId} siteId={siteId} />
+    </LayoutBody>
+  );
+
+  return <PageLayout top={header} left={sidebar} right={body} />;
+};
+
+export default Layout;

src/tapis-app/Streams/Instruments/_Layout/index.ts

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

src/tapis-app/Streams/Instruments/_Router/Router.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  Route,
+  useRouteMatch,
+  RouteComponentProps,
+  Switch
+} from 'react-router-dom';
+import { SectionMessage } from 'tapis-ui/_common';
+import MeasurementsListing from '../../MeasurementsListing';
+
+const Router: React.FC<{ projectId: string, siteId: string }> = ({
+  projectId,
+  siteId
+}) => {
+  const { path } = useRouteMatch();
+
+  return (
+    <Switch>
+      <Route path={`${path}`} exact>
+        <SectionMessage type="info">
+          Select an instrument from the list.
+        </SectionMessage>
+      </Route>
+
+      <Route
+        path={`${path}/:instrumentId`}
+        render={({
+          match: {
+            params: { instrumentId }
+          }
+        }: RouteComponentProps<{ instrumentId: string }>) => (
+          <MeasurementsListing projectId={projectId} siteId={siteId} instrumentId={instrumentId} />
+        )}
+      />
+    </Switch>
+  );
+};
+
+export default Router;

src/tapis-app/Streams/Instruments/_Router/index.ts

@@ -0,0 +1 @@
+export { default as Router } from './Router';

src/tapis-app/Streams/Instruments/_components/InstrumentsNav/InstrumentsNav.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import renderComponent from 'utils/testing';
+import InstrumentsNav from './InstrumentsNav';
+import { project } from 'fixtures/streams/projects.fixtures';
+import { site } from "fixtures/streams/sites.fixtures";
+import { instrument } from 'fixtures/streams/instruments.fixtures';
+import { useList } from 'tapis-hooks/systems';
+
+jest.mock('tapis-hooks/systems');
+
+describe('InstrumentsList', () => {
+  it('renders InstrumentsList component', () => {
+    (useList as jest.Mock).mockReturnValue({
+      data: {
+        result: [instrument],
+      },
+      isLoading: false,
+      error: null,
+    });
+
+    const { getAllByText } = renderComponent(<InstrumentsNav projectId={project.project_name!} siteId={site.site_name!} />);
+    expect(getAllByText(/testuser8-e2e/).length).toEqual(1);
+  });
+});