feat(manager): move and update metrics cards in the server view #2241

daniellacosse · 2024-10-14T15:34:32Z

TODOs:

access key tab
localize strings
add api call to server (not finalized)

daniellacosse · 2024-10-16T18:07:38Z

server_manager/www/shadowbox_server.ts

@@ -161,6 +161,28 @@ export class ShadowboxServer implements server.Server {
    return usageMap;
  }

+  async getTunnelTimeByLocation(): Promise<server.TunnelTimeSecondsByLocation> {


This will be implemented once we finalize the endpoint in this PR: Jigsaw-Code/outline-server#1581

fortuna

This is very helpful to see how the API is used. I believe we will benefit a lot from merging the stats flows into one.

fortuna · 2024-10-30T18:51:40Z

server_manager/index.html

@@ -27,6 +27,17 @@
      http-equiv="Content-Security-Policy"
      content="default-src 'self' 'unsafe-inline' outline: data:; connect-src https: 'self'; frame-src https://s3.amazonaws.com/outline-vpn/ ss:"
    />
+
+    <style>
+      /* We declare this here to sidestep webpack */


What do you mean with sidestepping Webpack? Why do you need that?

I can try to figure out how to get this to work with webpack, but currently webpack wants to resolve the url link here but doesn't know how. This index.html isn't transformed by webpack so that's what I mean by "sidestepping"

fortuna · 2024-10-30T18:52:15Z

server_manager/messages/master_messages.json

@@ -1051,6 +1051,16 @@
    "message": "Access keys",
    "description": "This string appears within the server view as a header of a table column that displays server access keys."
  },
+  "server_access_keys_tab": {


Why are we changing this? Can you keep the existing "Connections" for now?

It's part of the set of changes that UX wanted! Do you want me to move it to a separate PR? It's behind a feature flag currently.

fortuna · 2024-10-30T18:53:09Z

server_manager/messages/master_messages.json

@@ -1099,6 +1109,22 @@
    "message": "Metrics",
    "description": "This string appears within the server view as a header of the section that displays server metrics."
  },
+  "server_metrics_data_transferred": {


We should decouple the window size from the message. How do we do the current "/ last 30 days"?

It's currently hardcoded:

outline-apps/server_manager/messages/master_messages.json

Lines 1068 to 1075 in ab29f2c

"server_data_transfer": {

"message": "Data transferred / last 30 days",

"description": "This string appears within the server view as the header of a card that displays the amount of data transferred by the server."

},

"server_data_used": {

"message": "Allowance used / last 30 days",

"description": "This string appears within the server view as the header of a card that displays the amount of data transferred by the server as a percentage of the total available data."

},

Would you be okay with me decoupling this when we add the ability for users to set their own time range?

server_manager/model/server.ts

server_manager/www/app.ts

daniellacosse

Updated with the new endpoint JSON: will merge methods next

daniellacosse · 2024-11-12T16:35:31Z

server_manager/messages/master_messages.json

@@ -1051,6 +1051,16 @@
    "message": "Access keys",
    "description": "This string appears within the server view as a header of a table column that displays server access keys."
  },
+  "server_access_keys_tab": {


It's part of the set of changes that UX wanted! Do you want me to move it to a separate PR? It's behind a feature flag currently.

daniellacosse · 2024-11-12T16:37:56Z

server_manager/messages/master_messages.json

@@ -1099,6 +1109,22 @@
    "message": "Metrics",
    "description": "This string appears within the server view as a header of the section that displays server metrics."
  },
+  "server_metrics_data_transferred": {


It's currently hardcoded:

outline-apps/server_manager/messages/master_messages.json

Lines 1068 to 1075 in ab29f2c

"server_data_transfer": {

"message": "Data transferred / last 30 days",

"description": "This string appears within the server view as the header of a card that displays the amount of data transferred by the server."

},

"server_data_used": {

"message": "Allowance used / last 30 days",

"description": "This string appears within the server view as the header of a card that displays the amount of data transferred by the server as a percentage of the total available data."

},

Would you be okay with me decoupling this when we add the ability for users to set their own time range?

server_manager/www/app.ts

fortuna

As discussed offline, Per-ASN breakdown was a significant gap during the Iran crisis. It's a confirmed need and and we put a lot of effort to implement it. It's more of a question of how, not whether we want to surface that.

I would like to see that surfaced somehow in this PR, to inform the UX design. We've discussed a simple table, which seems to work well.

daniellacosse · 2024-11-15T18:03:30Z

As discussed offline, Per-ASN breakdown was a significant gap during the Iran crisis. It's a confirmed need and and we put a lot of effort to implement it. It's more of a question of how, not whether we want to surface that.

I would like to see that surfaced somehow in this PR, to inform the UX design. We've discussed a simple table, which seems to work well.

Sure thing, working on it!

daniellacosse · 2024-11-15T19:43:22Z

As discussed offline, Per-ASN breakdown was a significant gap during the Iran crisis. It's a confirmed need and and we put a lot of effort to implement it. It's more of a question of how, not whether we want to surface that.

I would like to see that surfaced somehow in this PR, to inform the UX design. We've discussed a simple table, which seems to work well.

Here's an initial PR for a data table component: #2273

github-actions bot added size/S size/M and removed size/S labels Oct 14, 2024

daniellacosse commented Oct 16, 2024

View reviewed changes

daniellacosse requested a review from sbruens October 16, 2024 18:07

daniellacosse changed the title ~~feat(manager): move and update metrics cards in the server view~~ feat(manager): [MISSING ENDPOINT] move and update metrics cards in the server view Oct 16, 2024

daniellacosse marked this pull request as ready for review October 16, 2024 18:08

daniellacosse requested review from fortuna and a team as code owners October 16, 2024 18:08

daniellacosse changed the title ~~feat(manager): [MISSING ENDPOINT] move and update metrics cards in the server view~~ feat(manager): [MISSING ENDPOINT - DO NOT MERGE] move and update metrics cards in the server view Oct 16, 2024

fortuna requested changes Oct 30, 2024

View reviewed changes

daniellacosse added 7 commits November 12, 2024 11:08

feat(manager): move and update metrics cards in the server view

90673c3

getting close. trying to figure out this weird data model

51b17e9

style update

4b51e45

don't use reduce lol

8d5d9a5

okay it roughly works end to end

80af4c7

add metrics messages

f30ccc7

access key tab

ee8c388

daniellacosse force-pushed the daniellacosse/tunneltime/move_metrics branch from 55108a4 to ee8c388 Compare November 12, 2024 16:09

update to use new "endpoint" - feedback next

ab29f2c

github-actions bot added size/L and removed size/M labels Nov 12, 2024

daniellacosse commented Nov 12, 2024

View reviewed changes

feedback

2a6076d

daniellacosse requested a review from fortuna November 12, 2024 18:45

Merge branch 'master' into daniellacosse/tunneltime/move_metrics

23bf19e

fortuna reviewed Nov 15, 2024

View reviewed changes

endpoint implemented

2b1d7da

daniellacosse changed the title ~~feat(manager): [MISSING ENDPOINT - DO NOT MERGE] move and update metrics cards in the server view~~ feat(manager): move and update metrics cards in the server view Nov 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(manager): move and update metrics cards in the server view #2241

feat(manager): move and update metrics cards in the server view #2241

daniellacosse commented Oct 14, 2024 •

edited

Loading

daniellacosse Oct 16, 2024

fortuna left a comment

fortuna Oct 30, 2024

daniellacosse Nov 12, 2024

fortuna Oct 30, 2024

daniellacosse Nov 12, 2024

fortuna Oct 30, 2024

daniellacosse Nov 12, 2024

daniellacosse left a comment

daniellacosse Nov 12, 2024

daniellacosse Nov 12, 2024

fortuna left a comment

daniellacosse commented Nov 15, 2024

daniellacosse commented Nov 15, 2024

	"server_data_transfer": {
	"message": "Data transferred / last 30 days",
	"description": "This string appears within the server view as the header of a card that displays the amount of data transferred by the server."
	},
	"server_data_used": {
	"message": "Allowance used / last 30 days",
	"description": "This string appears within the server view as the header of a card that displays the amount of data transferred by the server as a percentage of the total available data."
	},

feat(manager): move and update metrics cards in the server view #2241

Are you sure you want to change the base?

feat(manager): move and update metrics cards in the server view #2241

Conversation

daniellacosse commented Oct 14, 2024 • edited Loading

Choose a reason for hiding this comment

fortuna left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

daniellacosse left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fortuna left a comment

Choose a reason for hiding this comment

daniellacosse commented Nov 15, 2024

daniellacosse commented Nov 15, 2024

daniellacosse commented Oct 14, 2024 •

edited

Loading