Frontend Workspace Resources Card #1031

presleyp · 2022-04-15T19:24:31Z

read resources from api
decide how to handle nesting of agents in resources and ports in agents - subrows? Just rich cells?
build resources table component with columns for Resource, Lifetime, Status, and Access. (Lifetime (persistent or ephemerial) is in the Status column in the image but will be separated out)
nest agents in resources and ports in agents
design Access cell to always have Open in Terminal, and always have Any Port button where you can open any port on that agent. Also have any dev urls/applications that are assigned to that agent and a specific port. However, building Open in Terminal links and DevURL/application links are taken care of in other tickets.
Consider having Any Port show which ports are already assigned.
hook up all access buttons
storybook
test

Handled in other tickets:

Access Column: 760 and 805
Lifecycle Column: TBD

misskniss · 2022-04-26T19:33:01Z

There is a meeting on the calendar to discuss this one for details.

misskniss · 2022-04-26T19:33:18Z

Hey team! Please add your planning poker estimate with ZenHub @presleyp @kylecarbs

presleyp · 2022-04-28T18:34:13Z

table of resources with ability to open each in web terminal

Button on each row called Open In Terminal

presleyp · 2022-04-28T18:36:35Z

persistent/ephemeral is a different type of data than connection status. can call that column Lifetime?

presleyp · 2022-04-28T18:38:21Z

subrows: could make it monospace and use the ascii elbow

presleyp · 2022-04-28T18:46:12Z

Open Port button - opens dropdown where you type port number

DevURLs are predefined port allocations (and use a certain resource)

But resources can be opened in any port. If you open dev in the port VSCode is assigned to, you see VSCode.

presleyp · 2022-04-28T18:50:38Z

Look into nesting dev urls/applications in resources card
Resource - Agent - Ports (some are apps, can also open any port)

presleyp · 2022-04-28T19:08:54Z

make agent connection status optional so we can reuse this component for a preview

misskniss · 2022-05-10T16:36:37Z

@kylecarbs this one needs input from you in a convo with @presleyp so that she has all the right information to implement this.

Can you list the endpoints that she will need? This may also be something that we could use your help with for community since it is pretty large.

Maybe the two of you can separate the endpoint hook ups with the views.

misskniss · 2022-05-10T19:46:51Z

@vapurrmaid To help groom this and break it apart with Presley so we can better spread the load on it.

greyscaled · 2022-05-11T19:39:37Z

Breakout session notes

coder/cli/show.go

Lines 11 to 39 in 982769f

    
           func show() *cobra.Command { 
        
           	return &cobra.Command{ 
        
           		Annotations: workspaceCommand, 
        
           		Use:         "show", 
        
           		Short:       "Show details of a workspace's resources and agents", 
        
           		Args:        cobra.ExactArgs(1), 
        
           		RunE: func(cmd *cobra.Command, args []string) error { 
        
           			client, err := createClient(cmd) 
        
           			if err != nil { 
        
           				return err 
        
           			} 
        
           			organization, err := currentOrganization(cmd, client) 
        
           			if err != nil { 
        
           				return err 
        
           			} 
        
           			workspace, err := client.WorkspaceByOwnerAndName(cmd.Context(), organization.ID, codersdk.Me, args[0]) 
        
           			if err != nil { 
        
           				return xerrors.Errorf("get workspace: %w", err) 
        
           			} 
        
           			resources, err := client.WorkspaceResourcesByBuild(cmd.Context(), workspace.LatestBuild.ID) 
        
           			if err != nil { 
        
           				return xerrors.Errorf("get workspace resources: %w", err) 
        
           			} 
        
           			return cliui.WorkspaceResources(cmd.OutOrStdout(), resources, cliui.WorkspaceResourcesOptions{ 
        
           				WorkspaceName: workspace.Name, 
        
           			}) 
        
           		}, 
        
           	} 
        
           }

coder/codersdk/workspacebuilds.go

Lines 61 to 72 in 982769f

    
           func (c *Client) WorkspaceResourcesByBuild(ctx context.Context, build uuid.UUID) ([]WorkspaceResource, error) { 
        
           	res, err := c.request(ctx, http.MethodGet, fmt.Sprintf("/api/v2/workspacebuilds/%s/resources", build), nil) 
        
           	if err != nil { 
        
           		return nil, err 
        
           	} 
        
           	defer res.Body.Close() 
        
           	if res.StatusCode != http.StatusOK { 
        
           		return nil, readBodyAsError(res) 
        
           	} 
        
           	var resources []WorkspaceResource 
        
           	return resources, json.NewDecoder(res.Body).Decode(&resources) 
        
           }

The API:

/api/v2/workspacebuilds/%s/resources

coder/codersdk/workspaceresources.go

Lines 23 to 31 in 537897c

    
           type WorkspaceResource struct { 
        
           	ID         uuid.UUID                    `json:"id"` 
        
           	CreatedAt  time.Time                    `json:"created_at"` 
        
           	JobID      uuid.UUID                    `json:"job_id"` 
        
           	Transition database.WorkspaceTransition `json:"workspace_transition"` 
        
           	Type       string                       `json:"type"` 
        
           	Name       string                       `json:"name"` 
        
           	Agents     []WorkspaceAgent             `json:"agents,omitempty"` 
        
           }

Dev URLs will be added to this later (same endpoint).

Desired (follow-up): open resource in terminal. We need to create another ticket for that.

Step 1

Present the data similarly to the CLI in a table.

Step 2

We're going to clean up the UI (TBD)

Step 3

Dev URLs

Job associated to WorkspaceResource (job created resource)

Workspace and WorkspaceResource do not have a relationship (job creates the resource)
Type can be presented verbatim
Name can be presented verbatim
Agents - Running process attached to resource. (example coder agent running within v2 while dogfooding).

Request --> We can safely poll without 4xx or 5xx, because the data is static (not actually touching the workspace itself). The FE can remain open and continue to poll.

presleyp · 2022-05-12T01:01:55Z

"Desired (follow-up): open resource in terminal. We need to create another ticket for that." @code-asher isn't this essentially #760? It's just that instead of having one terminal link like in v1 there's one per workspace agent as shown here.

presleyp · 2022-05-12T01:03:16Z

And adding Dev URLs is #805

code-asher · 2022-05-12T15:51:11Z

"Desired (follow-up): open resource in terminal. We need to create another ticket for that." @code-asher isn't this essentially #760? It's just that instead of having one terminal link like in v1 there's one per workspace agent as shown here.

Yup I think #760 is perfect for this

greyscaled · 2022-05-16T15:24:40Z

Dev URLs will be added to this later (same endpoint).

We're currently blocked on this (@deansheather 's working on something)

presleyp · 2022-05-17T20:32:55Z

lifecycle is computed on the frontend - we get what resources exist in Stop and what exist in Start, and those that exist in Start but not Stop, they're ephemeral (gets destroyed on Stop). query the template version for its resources. can't query workspace build bc it only shows for the state it's currently in. will get a flat array where each item is a resource with a workspace transition, so need to look for the resource by its name and type and see if the array has one with stop and one with start. prob a nice to have.

presleyp · 2022-05-17T20:33:42Z

Agents will have an array of Apps soon, and status. WorkspaceApp will have external URL and I just need to render name, icon, and a link to that url.

presleyp · 2022-05-18T02:09:23Z

I'm going to take out Lifecycle and Access for this ticket but here's where I envision them:

tjcran · 2022-05-20T14:53:51Z

I'm going to take out Lifecycle and Access for this ticket but here's where I envision them:

@BrunoQuaresma this is an example of what would go above the timeline in #1620

BrunoQuaresma · 2022-05-20T15:40:59Z

Ok. How are we going to add DEV URLs and apps inside of this?

BrunoQuaresma · 2022-05-20T15:41:55Z

What do you think about removing the Coming soon fields to not look "incomplete"?

presleyp · 2022-05-20T15:54:52Z

@BrunoQuaresma that's what I meant by "I'm going to take out Lifecycle and Access" - I just put them in for the screenshot so we could all be on the same page about how it will look eventually. DevURLs and apps will go in the Access column.

presleyp added missing details 👀 site Area: frontend dashboard labels Apr 15, 2022

presleyp added this to the V2 Beta milestone Apr 15, 2022

presleyp changed the title ~~Resources Card~~ Frontend Workspace Resources Card Apr 15, 2022

misskniss added the needs grooming 🪒 label Apr 26, 2022

misskniss assigned presleyp Apr 26, 2022

misskniss removed missing details 👀 labels May 2, 2022

tjcran mentioned this issue May 5, 2022

Consolidate the view of applications for workspaces (Urls, etc) #236

Closed

5 tasks

misskniss mentioned this issue May 6, 2022

Workspaces - CRUD #678

Closed

16 tasks

tjcran mentioned this issue May 6, 2022

Get infrastructure link for each resource #1325

Closed

misskniss modified the milestones: V2 Beta, Community MVP May 10, 2022

misskniss assigned greyscaled May 10, 2022

misskniss added Community MVP 🏁 and removed V2 BETA labels May 11, 2022

misskniss mentioned this issue May 12, 2022

Workspaces - Community MVP #679

Closed

16 tasks

presleyp unassigned greyscaled May 20, 2022

presleyp mentioned this issue May 20, 2022

feat: resources card #1627

Merged

presleyp closed this as completed in #1627 May 20, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frontend Workspace Resources Card #1031

Frontend Workspace Resources Card #1031

presleyp commented Apr 15, 2022 •

edited

Loading

misskniss commented Apr 26, 2022

misskniss commented Apr 26, 2022

presleyp commented Apr 28, 2022 •

edited

Loading

presleyp commented Apr 28, 2022

presleyp commented Apr 28, 2022

presleyp commented Apr 28, 2022

presleyp commented Apr 28, 2022

presleyp commented Apr 28, 2022

misskniss commented May 10, 2022

misskniss commented May 10, 2022

greyscaled commented May 11, 2022 •

edited

Loading

presleyp commented May 12, 2022

presleyp commented May 12, 2022

code-asher commented May 12, 2022

greyscaled commented May 16, 2022

presleyp commented May 17, 2022

presleyp commented May 17, 2022

presleyp commented May 18, 2022

tjcran commented May 20, 2022

BrunoQuaresma commented May 20, 2022

BrunoQuaresma commented May 20, 2022

presleyp commented May 20, 2022

Frontend Workspace Resources Card #1031

Frontend Workspace Resources Card #1031

Comments

presleyp commented Apr 15, 2022 • edited Loading

misskniss commented Apr 26, 2022

misskniss commented Apr 26, 2022

presleyp commented Apr 28, 2022 • edited Loading

presleyp commented Apr 28, 2022

presleyp commented Apr 28, 2022

presleyp commented Apr 28, 2022

presleyp commented Apr 28, 2022

presleyp commented Apr 28, 2022

misskniss commented May 10, 2022

misskniss commented May 10, 2022

greyscaled commented May 11, 2022 • edited Loading

presleyp commented May 12, 2022

presleyp commented May 12, 2022

code-asher commented May 12, 2022

greyscaled commented May 16, 2022

presleyp commented May 17, 2022

presleyp commented May 17, 2022

presleyp commented May 18, 2022

tjcran commented May 20, 2022

BrunoQuaresma commented May 20, 2022

BrunoQuaresma commented May 20, 2022

presleyp commented May 20, 2022

presleyp commented Apr 15, 2022 •

edited

Loading

presleyp commented Apr 28, 2022 •

edited

Loading

greyscaled commented May 11, 2022 •

edited

Loading