diff --git a/api/server/router/porter_app.go b/api/server/router/porter_app.go
index 791a58edaa..191c3eed42 100644
--- a/api/server/router/porter_app.go
+++ b/api/server/router/porter_app.go
@@ -1065,7 +1065,7 @@ func getPorterAppRoutes(
Router: r,
})
- // GET /api/projects/{project_id}/clusters/{cluster_id}/apps/revisions -> porter_app.NewCurrentAppRevisionHandler
+ // GET /api/projects/{project_id}/clusters/{cluster_id}/apps/revisions -> porter_app.NewLatestAppRevisionsHandler
latestAppRevisionsEndpoint := factory.NewAPIEndpoint(
&types.APIRequestMetadata{
Verb: types.APIVerbGet,
diff --git a/dashboard/src/assets/connect.svg b/dashboard/src/assets/connect.svg
new file mode 100644
index 0000000000..7510668f98
--- /dev/null
+++ b/dashboard/src/assets/connect.svg
@@ -0,0 +1,3 @@
+
diff --git a/dashboard/src/lib/hooks/useDatabaseMethods.ts b/dashboard/src/lib/hooks/useDatabaseMethods.ts
index f6f3630b1f..1383741ec4 100644
--- a/dashboard/src/lib/hooks/useDatabaseMethods.ts
+++ b/dashboard/src/lib/hooks/useDatabaseMethods.ts
@@ -10,6 +10,15 @@ import { Context } from "shared/Context";
type DatabaseHook = {
create: (values: DbFormData) => Promise;
deleteDatastore: (name: string) => Promise;
+ attachDatastoreToAppInstances: ({
+ name,
+ appInstanceIds,
+ clusterId,
+ }: {
+ name: string;
+ appInstanceIds: string[];
+ clusterId: number;
+ }) => Promise;
};
type CreateDatastoreInput = {
name: string;
@@ -76,7 +85,7 @@ const clientDbToCreateInput = (values: DbFormData): CreateDatastoreInput => {
};
export const useDatabaseMethods = (): DatabaseHook => {
- const { currentProject } = useContext(Context);
+ const { currentProject, currentCluster } = useContext(Context);
const queryClient = useQueryClient();
@@ -126,5 +135,41 @@ export const useDatabaseMethods = (): DatabaseHook => {
[currentProject]
);
- return { create, deleteDatastore };
+ const attachDatastoreToAppInstances = useCallback(
+ async ({
+ name,
+ appInstanceIds,
+ }: {
+ name: string;
+ appInstanceIds: string[];
+ }): Promise => {
+ if (
+ !currentProject?.id ||
+ currentProject.id === -1 ||
+ !currentCluster?.id ||
+ currentCluster.id === -1
+ ) {
+ return;
+ }
+
+ await api.attachEnvGroup(
+ "",
+ {
+ app_instance_ids: appInstanceIds,
+ env_group_name: name,
+ },
+ {
+ project_id: currentProject.id,
+ // NB: this endpoint does not actually use the cluster id, because the app instance id is used
+ // to deploy in its correct deployment target.
+ cluster_id: currentCluster.id,
+ }
+ );
+
+ await queryClient.invalidateQueries({ queryKey: ["getDatastore"] });
+ },
+ [currentProject, currentCluster]
+ );
+
+ return { create, deleteDatastore, attachDatastoreToAppInstances };
};
diff --git a/dashboard/src/lib/hooks/useLatestAppRevisions.ts b/dashboard/src/lib/hooks/useLatestAppRevisions.ts
new file mode 100644
index 0000000000..3e04892637
--- /dev/null
+++ b/dashboard/src/lib/hooks/useLatestAppRevisions.ts
@@ -0,0 +1,59 @@
+import { useQuery } from "@tanstack/react-query";
+import { z } from "zod";
+
+import {
+ appRevisionWithSourceValidator,
+ type AppRevisionWithSource,
+} from "main/home/app-dashboard/apps/types";
+
+import api from "shared/api";
+
+// use this hook to get the latest revision of every app in the project/cluster
+export const useLatestAppRevisions = ({
+ projectId,
+ clusterId,
+}: {
+ projectId: number;
+ clusterId: number;
+}): {
+ revisions: AppRevisionWithSource[];
+} => {
+ const { data: apps = [] } = useQuery(
+ [
+ "getLatestAppRevisions",
+ {
+ cluster_id: clusterId,
+ project_id: projectId,
+ },
+ ],
+ async () => {
+ if (clusterId === -1 || projectId === -1) {
+ return;
+ }
+
+ const res = await api.getLatestAppRevisions(
+ "",
+ {
+ deployment_target_id: undefined,
+ ignore_preview_apps: true,
+ },
+ { cluster_id: clusterId, project_id: projectId }
+ );
+
+ const apps = await z
+ .object({
+ app_revisions: z.array(appRevisionWithSourceValidator),
+ })
+ .parseAsync(res.data);
+
+ return apps.app_revisions;
+ },
+ {
+ refetchOnWindowFocus: false,
+ enabled: clusterId !== 0 && projectId !== 0,
+ }
+ );
+ return {
+ revisions: apps,
+ };
+};
diff --git a/dashboard/src/lib/revisions/types.ts b/dashboard/src/lib/revisions/types.ts
index bb19940599..b7b0e204bd 100644
--- a/dashboard/src/lib/revisions/types.ts
+++ b/dashboard/src/lib/revisions/types.ts
@@ -36,6 +36,7 @@ export const appRevisionValidator = z.object({
id: z.string(),
created_at: z.string(),
updated_at: z.string(),
+ app_instance_id: z.string(),
});
export type AppRevision = z.infer;
diff --git a/dashboard/src/main/home/app-dashboard/apps/SelectableAppList.tsx b/dashboard/src/main/home/app-dashboard/apps/SelectableAppList.tsx
new file mode 100644
index 0000000000..bc2825c5fb
--- /dev/null
+++ b/dashboard/src/main/home/app-dashboard/apps/SelectableAppList.tsx
@@ -0,0 +1,122 @@
+import React, { useMemo } from "react";
+import { PorterApp } from "@porter-dev/api-contracts";
+import styled, { css } from "styled-components";
+
+import Container from "components/porter/Container";
+import Icon from "components/porter/Icon";
+import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
+import { AppIcon, AppSource } from "main/home/app-dashboard/apps/AppMeta";
+
+import healthy from "assets/status-healthy.png";
+
+import { type AppRevisionWithSource } from "./types";
+
+type SelectableAppRowProps = {
+ app: AppRevisionWithSource;
+ onSelect?: () => void;
+ onDeselect?: () => void;
+ selected?: boolean;
+};
+
+const SelectableAppRow: React.FC = ({
+ app,
+ selected,
+ onSelect,
+ onDeselect,
+}) => {
+ const proto = useMemo(() => {
+ return PorterApp.fromJsonString(atob(app.app_revision.b64_app_proto), {
+ ignoreUnknownFields: true,
+ });
+ }, [app.app_revision.b64_app_proto]);
+
+ return (
+ {
+ if (selected) {
+ onDeselect?.();
+ } else {
+ onSelect?.();
+ }
+ }}
+ isHoverable={onSelect != null || onDeselect != null}
+ >
+
+
+
+
+
+ {proto.name}
+
+
+
+
+
+
+
+
-
-
-
-
- {proto.name}
-
-
-
-
-
-
-
-