Instant Launch badges (WIP)

public/static/locales/en/common.json

@@ -43,6 +43,7 @@
     "help": "Help",
     "home": "Home",
     "instantLaunches": "Instant Launches",
+    "instantLaunch": "Instant Launch",
     "interactiveAnalysisUrl": "{{message}}. Access your running analysis here.",
     "intercomAriaLabel": "Chat with CyVerse support",
     "learnMore": "Learn More",

src/components/instantlaunches/InstantLaunchButtonWrapper.js

@@ -8,7 +8,7 @@
  * The `onClick` function will handle launching the instant launch and
  * briefly displaying the Submission dialog to the user.
  */
-import React from "react";
+import React, { useEffect, useCallback } from "react";
 
 import { useMutation } from "react-query";
 
@@ -36,12 +36,14 @@ function InstantLaunchButtonWrapper(props) {
         resource = {},
         render,
         showErrorAnnouncer,
+        autolaunch,
     } = props;
     const output_dir = useDefaultOutputDir();
     const [userProfile] = useUserProfile();
     const [bootstrapInfo] = useBootstrapInfo();
 
     const [open, setOpen] = React.useState(false);
+    const [hasLaunched, setHasLaunched] = React.useState(false);
     const [signInDlgOpen, setSignInDlgOpen] = React.useState(false);
     const [accessRequestDialogOpen, setAccessRequestDialogOpen] =
         React.useState(false);
@@ -101,8 +103,11 @@ function InstantLaunchButtonWrapper(props) {
         },
     });
 
-    const onClick = () => {
-        if (userProfile?.id) {
+    const preferences = bootstrapInfo?.preferences;
+    const userId = userProfile?.id;
+
+    const onClick = useCallback(() => {
+        if (userId) {
             if (computeLimitExceeded) {
                 showErrorAnnouncer(t("computeLimitExceededMsg"));
             } else {
@@ -111,17 +116,34 @@ function InstantLaunchButtonWrapper(props) {
                     instantLaunch,
                     resource,
                     output_dir,
-                    preferences: bootstrapInfo?.preferences,
+                    preferences,
                 });
             }
         } else {
             setSignInDlgOpen(true);
         }
-    };
+    }, [
+        preferences,
+        computeLimitExceeded,
+        instantLaunch,
+        launch,
+        output_dir,
+        resource,
+        showErrorAnnouncer,
+        t,
+        userId,
+    ]);
+
+    useEffect(() => {
+        if (autolaunch && !hasLaunched) {
+            onClick();
+            setHasLaunched(true);
+        }
+    }, [autolaunch, onClick, hasLaunched, setHasLaunched]);
 
     return (
         <>
-            {render(onClick)}
+            {!autolaunch && render && render(onClick)}
             <InstantLaunchSubmissionDialog open={open} />
             <SignInDialog
                 open={signInDlgOpen}

src/components/instantlaunches/launch/index.js

@@ -0,0 +1,93 @@
+/**
+ * @author mian
+ *
+ * The component that launches a provided instant launch, immediately.
+ */
+import React, { useState } from "react";
+
+import { useQuery } from "react-query";
+
+import {
+    GET_INSTANT_LAUNCH_FULL_KEY,
+    getFullInstantLaunch,
+} from "serviceFacades/instantlaunches";
+import {
+    getResourceUsageSummary,
+    RESOURCE_USAGE_QUERY_KEY,
+} from "serviceFacades/dashboard";
+import { getUserQuota } from "common/resourceUsage";
+import { useConfig } from "contexts/config";
+import { useUserProfile } from "contexts/userProfile";
+import globalConstants from "../../../constants";
+import { useTranslation } from "i18n";
+import isQueryLoading from "components/utils/isQueryLoading";
+import InstantLaunchButtonWrapper from "components/instantlaunches/InstantLaunchButtonWrapper";
+import withErrorAnnouncer from "components/error/withErrorAnnouncer";
+import LoadingAnimation from "components/vice/loading/LoadingAnimation";
+
+import ErrorTypography from "components/error/ErrorTypography";
+import DEErrorDialog from "components/error/DEErrorDialog";
+
+const InstantLaunchStandalone = (props) => {
+    const { id: instant_launch_id, showErrorAnnouncer } = props;
+    const [config] = useConfig();
+    const [userProfile] = useUserProfile();
+    const [computeLimitExceeded, setComputeLimitExceeded] = useState(
+        !!config?.subscriptions?.enforce
+    );
+    const [errorDialogOpen, setErrorDialogOpen] = useState(false);
+    const { t } = useTranslation(["instantlaunches", "common"]);
+
+    const { data, status, error } = useQuery(
+        [GET_INSTANT_LAUNCH_FULL_KEY, instant_launch_id],
+        () => getFullInstantLaunch(instant_launch_id)
+    );
+
+    const { isFetching: isFetchingUsageSummary } = useQuery({
+        queryKey: [RESOURCE_USAGE_QUERY_KEY],
+        queryFn: getResourceUsageSummary,
+        enabled: !!config?.subscriptions?.enforce && !!userProfile?.id,
+        onSuccess: (respData) => {
+            const computeUsage = respData?.cpu_usage?.total || 0;
+            const subscription = respData?.subscription;
+            const computeQuota = getUserQuota(
+                globalConstants.CPU_HOURS_RESOURCE_NAME,
+                subscription
+            );
+            setComputeLimitExceeded(computeUsage >= computeQuota);
+        },
+        onError: (e) => {
+            showErrorAnnouncer(t("common:usageSummaryError"), e);
+        },
+    });
+
+    const isLoading = isQueryLoading([status, isFetchingUsageSummary]);
+
+    if (isLoading) {
+        return <LoadingAnimation />;
+    } else if (error) {
+        return (
+            <>
+                <ErrorTypography
+                    errorMessage={error.message}
+                    onDetailsClick={() => setErrorDialogOpen(true)}
+                />
+                <DEErrorDialog
+                    open={errorDialogOpen}
+                    errorObject={error}
+                    handleClose={() => setErrorDialogOpen(false)}
+                />
+            </>
+        );
+    } else {
+        return (
+            <InstantLaunchButtonWrapper
+                instantLaunch={data}
+                computeLimitExceeded={computeLimitExceeded}
+                autolaunch={true}
+            />
+        );
+    }
+};
+
+export default withErrorAnnouncer(InstantLaunchStandalone);

src/pages/instantlaunch/[id]/index.js

@@ -0,0 +1,33 @@
+/**
+ * @author mian
+ *
+ * Instant launch launch page
+ */
+import React from "react";
+
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
+import { i18n, RequiredNamespaces } from "i18n";
+
+import { useRouter } from "next/router";
+
+import InstantLaunchStandalone from "components/instantlaunches/launch";
+
+export default function InstantLaunch() {
+    const router = useRouter();
+    const { id } = router.query;
+
+    return <InstantLaunchStandalone id={id} />;
+}
+
+export async function getServerSideProps({ locale }) {
+    const title = i18n.t("instantLaunch");
+
+    return {
+        props: {
+            title,
+            // "instantlaunches" already included by RequiredNamespaces
+            ...(await serverSideTranslations(locale, RequiredNamespaces)),
+        },
+    };
+}

src/server/api/instantlaunches.js

@@ -165,6 +165,19 @@ export default () => {
         })
     );
 
+    logger.info("adding the GET /instantlaunches/:id/full handler");
+    api.get(
+        "/instantlaunches/:id/full",
+        auth.authnTokenMiddleware,
+        terrainHandler({
+            method: "GET",
+            pathname: "/instantlaunches/:id/full",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        })
+    );
+
     logger.info("Add the PUT /admin/instantlaunches/:id/metadata handler");
     api.put(
         "/admin/instantlaunches/:id/metadata",

src/serviceFacades/instantlaunches.js

@@ -20,6 +20,7 @@ export const DASHBOARD_INSTANT_LAUNCHES_KEY = "dashboardInstantLaunches";
 export const LIST_PUBLIC_SAVED_LAUNCHES_KEY = "listPublicSavedLaunches";
 export const LIST_INSTANT_LAUNCHES_BY_METADATA_KEY =
     "fetchInstantLaunchesByMetadata";
+export const GET_INSTANT_LAUNCH_FULL_KEY = "fetchFullInstantLaunch";
 
 export const getDefaultsMapping = () =>
     callApi({
@@ -77,6 +78,12 @@ export const getInstantLaunchMetadata = (id) =>
         method: "GET",
     });
 
+export const getFullInstantLaunch = (id) =>
+    callApi({
+        endpoint: `/api/instantlaunches/${id}/full`,
+        method: "GET",
+    });
+
 /**
  * Add or modify the AVUs associated with an instant launch.
  *