-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
232 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import {JWT} from "next-auth/jwt"; | ||
| import {Tab} from '@headlessui/react' | ||
| import clsx from "clsx" | ||
| import WorkflowRuns from "./VLabAssets/WorkflowRuns"; | ||
| import DataProducts from "./VLabAssets/DataProducts"; | ||
| import GeoDataProducts from "./VLabAssets/GeoDataProducts"; | ||
| import {Fragment} from "react"; | ||
|
|
||
|
|
||
| type Props = { | ||
| slug: string | string[] | undefined, | ||
| isAuthenticated: boolean, | ||
| token: JWT, | ||
| } | ||
|
|
||
| const tabs = [ | ||
| { | ||
| title: "Workflow runs", | ||
| panelComponent: WorkflowRuns, | ||
| }, | ||
| { | ||
| title: "Data Products", | ||
| panelComponent: DataProducts, | ||
| }, | ||
| { | ||
| title: "Geographic data products", | ||
| panelComponent: GeoDataProducts, | ||
| }, | ||
| ] | ||
|
|
||
| const VLabAssets: React.FC<Props> = ({slug, isAuthenticated, token}) => { | ||
|
|
||
| return ( | ||
| <div className="space-y-8"> | ||
| <p className="text-2xl font-sans">Assets</p> | ||
| <Tab.Group> | ||
| <Tab.List className="mb-5 flex list-none flex-col pl-0 sm:flex-row"> | ||
| {tabs.map((tab) => { | ||
| return ( | ||
| <Tab as={Fragment}> | ||
| {({selected}) => ( | ||
| /* Use the `selected` state to conditionally style the selected tab. */ | ||
| <button | ||
| className={clsx( | ||
| "py-1 px-8 max-h-16", | ||
| selected ? "bg-gray-500 text-white" : "text-gray-500 hover:text-black", | ||
| )} | ||
| > | ||
| {tab.title} | ||
| </button> | ||
| )} | ||
| </Tab> | ||
| ) | ||
| })} | ||
| </Tab.List> | ||
| <Tab.Panels> | ||
| <Tab.Panel> | ||
| <WorkflowRuns slug={slug} isAuthenticated={isAuthenticated} token={token}/> | ||
| </Tab.Panel> | ||
| <Tab.Panel> | ||
| <DataProducts slug={slug} isAuthenticated={isAuthenticated} token={token}/> | ||
| </Tab.Panel> | ||
| <Tab.Panel> | ||
| <GeoDataProducts slug={slug} isAuthenticated={isAuthenticated} token={token}/> | ||
| </Tab.Panel> | ||
| </Tab.Panels> | ||
| </Tab.Group> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default VLabAssets |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import {JWT} from "next-auth/jwt"; | ||
| import dynamic from "next/dynamic"; | ||
| const CatalogMapView = dynamic(() => import("./catalog_map"), {ssr: false}) | ||
|
|
||
| type Props = { | ||
| slug: string | string[] | undefined, | ||
| isAuthenticated: boolean, | ||
| token: JWT, | ||
| } | ||
|
|
||
| const GeoDataProducts: React.FC<Props> = ({slug}) => { | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="h-72 mt-5"> | ||
| <CatalogMapView vlab_slug={slug}/> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default GeoDataProducts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import React, {useEffect, useState} from "react"; | ||
| import getConfig from "next/config"; | ||
| import {JWT} from "next-auth/jwt"; | ||
| import clsx from "clsx"; | ||
|
|
||
|
|
||
| type Props = { | ||
| slug: string | string[] | undefined, | ||
| isAuthenticated: boolean, | ||
| token: JWT, | ||
| } | ||
|
|
||
| const WorkflowRuns: React.FC<Props> = ({slug, isAuthenticated, token}) => { | ||
|
|
||
| const {publicRuntimeConfig} = getConfig() | ||
|
|
||
| const [assets, setAssets] = useState([]) | ||
| const [loadingAssets, setLoadingAssets] = useState(false) | ||
|
|
||
| const fetchAssets = async () => { | ||
|
|
||
| setLoadingAssets(true); | ||
|
|
||
| var requestOptions: RequestInit = { | ||
| method: "GET", | ||
| headers: { | ||
| "Authorization": "Bearer: " + token.accessToken | ||
| }, | ||
| }; | ||
|
|
||
| const apiUrl = `${window.location.origin}/${publicRuntimeConfig.apiBasePath}` | ||
| const res = await fetch(`${apiUrl}/workflows?vlab_slug=${slug}`, requestOptions); | ||
| setLoadingAssets(false); | ||
|
|
||
| return res.json(); | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| if (isAuthenticated) { | ||
| Promise.all([ | ||
| fetchAssets().then(setAssets), | ||
| ]) | ||
| } | ||
| }, [isAuthenticated]); | ||
|
|
||
| return ( | ||
| <div> | ||
| <button type="button" | ||
| className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded cursor-pointer" | ||
| onClick={() => { | ||
| fetchAssets().then(setAssets) | ||
| }}> | ||
| <svg xmlns="http://www.w3.org/2000/svg" className={clsx("h-5", "w-5", loadingAssets && "animate-spin")} | ||
| viewBox="0 0 20 20" fill="currentColor"> | ||
| <path fillRule="evenodd" | ||
| d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" | ||
| clipRule="evenodd"/> | ||
| </svg> | ||
| </button> | ||
| {assets.length > 0 ? ( | ||
| <table className="table-auto bg-white mt-5"> | ||
| <thead> | ||
| <tr> | ||
| <th className="bg-blue-200 border text-left px-4 py-2">Name</th> | ||
| <th className="bg-blue-200 border text-left px-4 py-2">Status</th> | ||
| <th className="bg-blue-200 border text-left px-4 py-2">Progress</th> | ||
| </tr> | ||
| </thead> | ||
| {slug != null ? ( | ||
| <tbody> | ||
| {assets.map((workflow) => { | ||
| return ( | ||
| <tr key={workflow['argo_id']} className="odd:bg-gray-100"> | ||
| <td className={"border text-left py-2 px-4"}> | ||
| {/*<a className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"*/} | ||
| {/* target="blank"*/} | ||
| {/* href={workflow['argo_url']}>*/} | ||
| {/* {workflow['argo_id']}*/} | ||
| {/*</a>*/} | ||
| {workflow['argo_id']} | ||
| </td> | ||
| <td className={"border py-2 px-4 text-left"}>{workflow['status']}</td> | ||
| <td className={"border py-2 px-4 text-left"}>{workflow['progress']}</td> | ||
| </tr> | ||
| ) | ||
| })} | ||
| </tbody> | ||
| ) : ( | ||
| <tbody> | ||
| </tbody> | ||
| )} | ||
| </table> | ||
| ) : ( | ||
| <p className="mt-5">There is nothing to display</p> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default WorkflowRuns |
File renamed without changes.
Oops, something went wrong.