Upgrade team page and logs view

src/api/deploy/deployments.js

@@ -13,8 +13,8 @@ export const getDeployment = async (token, id) => {
 };
 
 export const getDeployments = async (token, all = false) => {
-  const allQuery = all ? "?all=true" : "";
-  const url = `${process.env.REACT_APP_DEPLOY_API_URL}/deployments${allQuery}`;
+  const allQuery = all ? "&all=true" : "";
+  const url = `${process.env.REACT_APP_DEPLOY_API_URL}/deployments?shared=true${allQuery}`;
   const res = await fetch(url, {
     method: "GET",
     headers: {

src/api/deploy/teams.js

@@ -57,6 +57,8 @@ export const createTeam = async (token, name, description) => {
     }
     throw res;
   }
+
+  return await res.json();
 };
 
 export const deleteTeam = async (token, teamId) => {
@@ -74,11 +76,43 @@ export const addMembers = async (token, teamId, members) => {
   const url = `${process.env.REACT_APP_DEPLOY_API_URL}/teams/${teamId}`;
   const body = { members: members };
 
-  await fetch(url, {
+  let res = await fetch(url, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(body),
+  });
+
+  if (!res.ok) {
+    const body = await res.json();
+    if (body) {
+      throw body;
+    }
+    throw res;
+  }
+
+  return await res.json();
+};
+
+export const updateTeam = async (token, teamId, body) => {
+  const url = `${process.env.REACT_APP_DEPLOY_API_URL}/teams/${teamId}`;
+
+  let res = await fetch(url, {
     method: "POST",
     headers: {
       Authorization: `Bearer ${token}`,
     },
     body: JSON.stringify(body),
   });
+
+  if (!res.ok) {
+    const body = await res.json();
+    if (body) {
+      throw body;
+    }
+    throw res;
+  }
+
+  return await res.json();
 };

src/api/deploy/vms.js

@@ -14,8 +14,8 @@ export const getVM = async (token, id) => {
 };
 
 export const getVMs = async (token, all = false) => {
-  const allQuery = all ? "?all=true" : "";
-  const url = `${process.env.REACT_APP_DEPLOY_API_URL}/vms${allQuery}`;
+  const allQuery = all ? "&all=true" : "";
+  const url = `${process.env.REACT_APP_DEPLOY_API_URL}/vms?shared=true${allQuery}`;
   const response = await fetch(url, {
     method: "GET",
     headers: {

src/components/Gravatar.jsx

@@ -16,7 +16,6 @@ const Gravatar = ({ user, fallback, ...props }) => {
     const uri = encodeURI(`https://www.gravatar.com/avatar/${hash}?d=404`);
 
     const response = await fetch(uri);
-    console.log(response);
     if (response.ok) {
       return uri;
     }
@@ -27,11 +26,9 @@ const Gravatar = ({ user, fallback, ...props }) => {
     const gravatarUri = await gravatar();
     setHasFetched(true);
     if (gravatarUri) {
-      console.log("found gravatar: " + gravatarUri + " for user " + user.email);
       setUserAvatar(gravatarUri);
       return;
     }
-    console.log("no gravatar found for user " + user.email);
   };
 
   useEffect(() => {
@@ -42,7 +39,9 @@ const Gravatar = ({ user, fallback, ...props }) => {
 
   return (
     <Avatar sx={{ width: 20, height: 20 }} src={userAvatar} {...props}>
-      {!userAvatar && fallback ? fallback : (user.email || user.username)[0].toUpperCase()}
+      {!userAvatar && fallback
+        ? fallback
+        : (user.email || user.username)[0].toUpperCase()}
     </Avatar>
   );
 };

src/contexts/ResourceContext.jsx

@@ -89,6 +89,24 @@ export const ResourceContextProvider = ({ children }) => {
     }
   };
 
+  const getTeamResourceIds = () => {
+    if (!teams) return;
+
+    let resourceIds = [];
+
+    teams.forEach((t) => {
+      if (t.resources) {
+        t.resources.forEach((r) => {
+          if (!resourceIds.includes(r.id)) {
+            resourceIds.push(r.id);
+          }
+        });
+      }
+    });
+
+    return resourceIds;
+  };
+
   const queueJob = (job) => {
     console.log("Queuing job", JSON.stringify(job));
     if (!job) return;
@@ -106,7 +124,20 @@ export const ResourceContextProvider = ({ children }) => {
 
     setRows(array);
 
-    setUserRows(array.filter((row) => row.ownerId === user.id));
+    let userOwned = array.filter((row) => row.ownerId === user.id);
+
+    let teamResourceIds = getTeamResourceIds();
+    teamResourceIds.forEach((resourceId) => {
+      let sharedRow = array.find((row) => row.id === resourceId);
+
+      sharedRow.shared = true;
+
+      if (sharedRow && !userOwned.includes(sharedRow)) {
+        userOwned.push(sharedRow);
+      }
+    });
+
+    setUserRows(userOwned);
   };
 
   const loadZones = async () => {

src/locales/en.json

@@ -391,7 +391,8 @@
         "menu-manage-account": "Manage account",
         "teams": "Teams",
         "current-teams": "Current teams",
-        "teams-subheader": "Teams are a way to organize your resources and collaborate with others. You can create a team and invite others to join.",
+        "teams-subheader-1": "Teams are a way to organize your resources and collaborate with others. You can create a team and invite others to join.",
+        "teams-subheader-2": "Share resources by going to the resource's page and clicking share with team.",
         "create-team": "Create team",
         "description": "Description",
         "invite": "Invite",
@@ -402,6 +403,22 @@
         "replicas-saving": "Saving replicas...",
         "could-not-save-replicas": "Could not save replicas: ",
         "replicas-shutdown-warning": "This will shut down your deployment. Are you sure?",
-        "members": "Members"
+        "members": "Members",
+        "share-with-team-description": "Share with team",
+        "share-with-team-action": "share with team",
+        "search-for-teams": "Search for teams",
+        "share": "share",
+        "with": "with",
+        "transferred-successfully": "Successfully transferred",
+        "successfully-added-to-team": "Successfully added to team",
+        "resources": "Resources",
+        "resource": "Resource",
+        "remove": "Remove",
+        "from-team": "from team",
+        "resource-not-found": "Resource not found",
+        "shared": "Shared",
+        "shared-in-group": "Resource is available through a group you are a member of",
+        "auto-scroll": "Auto scroll",
+        "logs-truncated": "Over 1000 logs: Logs truncated. Please download the full log file to view earlier logs."
     }
 }

src/locales/se.json

@@ -391,7 +391,8 @@
     "menu-manage-account": "Hantera konto",
     "teams": "Grupper",
     "current-teams": "Dina grupper",
-    "teams-subheader": "Grupper är ett sätt att organisera dina resurser och samarbeta med andra. Du kan skapa en grupp och bjuda in andra.",
+    "teams-subheader-1": "Grupper är ett sätt att organisera dina resurser och samarbeta med andra. Du kan skapa en grupp och bjuda in andra.",
+    "teams-subheader-2": "Dela resurser med gruppen genom att besöka resursens sida och klicka på dela med grupp",
     "create-team": "Skapa grupp",
     "description": "Beskrivning",
     "invite": "Bjud in",
@@ -402,6 +403,22 @@
     "replicas-saving": "Sparar antal kopior...",
     "could-not-save-replicas": "Kunde inte uppdatera antal kopior: ",
     "replicas-shutdown-warning": "Varning: Om du väljer 0 kopior kommer appen att stängas av.",
-    "members": "Medlemmar"
+    "members": "Medlemmar",
+    "share-with-team-description": "Dela med grupp",
+    "share-with-team-action": "dela med grupp",
+    "search-for-teams": "Sök grupper",
+    "share": "dela",
+    "with": "med",
+    "transferred-successfully": "Överföringen lyckades",
+    "successfully-added-to-team": "Delad med grupp",
+    "resources": "Resurser",
+    "resource": "Resurs",
+    "remove": "Ta bort",
+    "from-team": "från grupp",
+    "resource-not-found": "Resursen hittades inte",
+    "shared": "Delad",
+    "shared-in-group": "Resursen är tillgänglig genom en av grupperna du är medlem i",
+    "auto-scroll": "Auto scroll",
+    "logs-truncated": "Över 1000 loggar: Loggar avkortade. Ladda ner hela loggen för att se tidigare loggar."
   }
 }

src/pages/deploy/Deploy.jsx

@@ -352,6 +352,22 @@ export function Deploy() {
     );
   };
 
+  const renderShared = (row) => {
+    if (!row.shared) return <></>;
+
+    return (
+      <Label
+        variant="ghost"
+        style={{ fontFamily: "monospace" }}
+        startIcon={<Iconify icon="mdi:account-group" sx={{ opacity: 0.65 }} />}
+      >
+        <Tooltip title={t("shared-in-group")}>
+          <span>{t("shared")}</span>
+        </Tooltip>
+      </Label>
+    );
+  };
+
   useEffect(() => {
     if (user && !user.onboarded) {
       navigate("/onboarding");
@@ -455,6 +471,7 @@ export function Deploy() {
                                 {renderResourceStatus(row)}
                                 {renderStatusCode(row)}
                                 {renderZone(row)}
+                                {renderShared(row)}
                               </Stack>
                             </TableCell>