Dedicated serial console page #1384

benjaminleonard · 2023-03-03T10:21:55Z

Starting the blockout of this — can leave this until the prerequisite work can be done to hook this up with the socketised serial console.

Closes #1314

vercel · 2023-03-03T10:22:00Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
console-ui-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 10, 2023 at 5:44PM (UTC)

benjaminleonard · 2023-03-03T10:22:49Z

app/components/StatusBadge.tsx

  </Badge>
 )
+
+export type SerialConsoleState = 'connecting' | 'connected' | 'disconnected'


Temporary — not sure how web sockets will work with the API, so I took a stab at some potential states

benjaminleonard · 2023-03-03T10:23:58Z

app/components/Terminal.tsx

+      <div className="absolute right-0 top-0 space-y-2">
+        <button
+          onClick={() => {
+            term && term.scrollToTop()


As a bonus would be nice to disable these if you're at the top or bottom respectively, but not super important, might not be worth adding the ref to figure out if you're at the top or bottom of the scrollable element

The real problem is that scrolling does not trigger a render, so if you clicked scroll to bottom and disabled the button, when you scroll up there's nothing telling it to check the scroll position again and re-render to re-enable the button. I messed around with looking at the internal scroll state, but it's the same problem. Changes to the state don't trigger renders in this component. In general, that's exactly what we want, even though it's inconvenient here.

Hmm, it's not essential. I can do some more digging on the internal state.

benjaminleonard · 2023-03-03T10:26:03Z

app/components/serial-console.css

@@ -0,0 +1,7 @@
+main {
+  @apply h-full;


This is an example of a constrained layout that fills the screen and is internally scrollable but does not scroll the overall layout. We use h-full to make sure the terminal fills all available space even when it's not overflowing.

benjaminleonard · 2023-03-03T10:26:39Z

app/pages/project/instances/instance/SerialConsolePage.tsx

+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoaded(true)
+    }, 3000)
+  }, [])


Temporary — wanted a more realistic indication of load time.

benjaminleonard · 2023-03-03T10:28:42Z

app/pages/project/instances/instance/SerialConsolePage.tsx

+        return
+      }
+
+      setSkeletonCount(Math.floor(skeletonEl.current.offsetHeight / 24) + 1)


This checks how large the terminal wrapper element is and counts multiples of 24px within that — we can use this to determine how many of the placeholder line blocks we need to fill the space.

It's weird but it works...

I did consider using a repeating SVG but we'll run into issues making it responsive since you can't have it fit the window without stretching it and distorting the rounded corners.

benjaminleonard · 2023-03-03T10:30:11Z

app/pages/project/instances/instance/SerialConsolePage.tsx

+              width: `${Math.sin(Math.sin(i)) * 20 + 40}%`,
+            }} /* this is silly deterministic way to get random looking lengths */


I wanted the text-like line lengths. If we use Math.random() here it'd change every render. Maybe we could use a useCallback but by using the index plus a nested sine function we get natural-ish looking line lengths that are the same every render.

I think this produces a great result. If you want random that doesn't change on every render, you could do this at top level in the file so it runs only once per pageload.

const rands = new Array(200).fill(0).map(() => Math.random())

then this will produce a similar range to what you had.

width: `${rands[i] * 40 + 20}%`

But I don't think it looks better. It looks messy.

Random

Sine formula

Well all generative code is sine waves, why break the mould.

benjaminleonard · 2023-03-03T10:30:47Z

libs/ui/lib/button/button.css


 .btn-ghost {
-  @apply border text-secondary border-default hover:bg-hover disabled:bg-transparent;
+  @apply border text-secondary border-default hover:bg-hover disabled:bg-transparent disabled:text-disabled;


Realised we were missing a disabled style for the ghost button variant.

david-crespo · 2023-03-09T23:12:25Z

app/components/serial-console.css

+
+#content-pane > div.pb-8 {
+  @apply pb-0;
+}


lmao I cannot abide this

Oh this also doesn't work — these aren't CSS modules so they don't disappear when you're on another page. This overrides that padding everywhere, forever. I'll figure out a better way to do it that only applies to this page.

Oof, is there a way to override a parent layout in react router?
Edit: just realised you fixed this

david-crespo

I think this looks great, don't see a reason not to make it the real serial console page already. Only thing missing is that the button to bring it up is too hidden, assuming we're taking it out of the tab bar and it's buried in the More menu in the corner.

Edit: I see you have a big button for it in the Access tab. Might as well add that already. I don't love the name Access. We have been using that for roles and permissions related stuff, and it's not where I would intuitively look for the serial console. Maybe Connect?.

…nes in to begin with

david-crespo · 2023-03-10T04:06:02Z

app/routes.tsx

+            </Route>
+          </Route>
+        </Route>
+


look upon it @zephraph and weep

benjaminleonard · 2023-03-10T09:21:09Z

Edit: I see you have a big button for it in the Access tab. Might as well add that already. I don't love the name Access. We have been using that for roles and permissions related stuff, and it's not where I would intuitively look for the serial console. Maybe Connect?.

Yep, will work through your comments and add the connect tab

benjaminleonard · 2023-03-10T13:12:49Z

Connect tab is now added:

benjaminleonard · 2023-03-10T13:13:56Z

app/pages/project/instances/instance/tabs/ConnectTab.tsx

+    <SettingsGroup
+      title="Serial Console"
+      docs={{ text: 'Serial Console', link: '/' }}
+      cta={{ link: pb.serialConsole({ organization, project, instance }), text: 'Connect' }}


We could use /serial-console here but the path builder feels neater like you have in the instance actions dropdown?

benjaminleonard · 2023-03-10T13:14:24Z

libs/ui/lib/settings-group/SettingsGroup.tsx

+      </div>
+      <div className="flex items-center justify-between border-t px-6 py-3 border-default">
+        <div className="text-tertiary">
+          {docs && (


This conditional is inside the div so that when it's not there the button is still right aligned

benjaminleonard · 2023-03-10T13:15:15Z

libs/ui/lib/settings-group/SettingsGroup.tsx

+          )}
+        </div>
+
+        <Wrap when={cta.link} with={<Link to={cta.link} />}>


Is this bad? I suppose a better option might be to swap the button for a link, but that would require a bigger rework to the button component.

this is why we have buttonStyle

Blockout of serial console page

520e816

benjaminleonard commented Mar 3, 2023

View reviewed changes

david-crespo reviewed Mar 9, 2023

View reviewed changes

david-crespo added 3 commits March 9, 2023 19:45

make it the real serial console thing

2b89b73

Merge main into dedicated-serial-console

699ade0

do the delay on the mock server side

bea8fb3

vercel bot deployed to Preview March 10, 2023 01:56 View deployment

david-crespo marked this pull request as ready for review March 10, 2023 02:09

david-crespo approved these changes Mar 10, 2023

View reviewed changes

vercel bot deployed to Preview March 10, 2023 02:23 View deployment

don't need to worry about resizing if you put 4800 pixels worth of li…

fd16b6d

…nes in to begin with

david-crespo force-pushed the dedicated-serial-console branch from b6bfd10 to fd16b6d Compare March 10, 2023 02:33

vercel bot deployed to Preview March 10, 2023 02:34 View deployment

don't mess up the padding

736fffe

vercel bot deployed to Preview March 10, 2023 02:44 View deployment

do the layout tweak the right way, which ironically is much worse

093c599

vercel bot deployed to Preview March 10, 2023 03:40 View deployment

david-crespo reviewed Mar 10, 2023

View reviewed changes

app/routes.tsx

</Route>

</Route>

</Route>

Copy link

Collaborator

david-crespo Mar 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

look upon it @zephraph and weep

vercel bot deployed to Preview March 10, 2023 04:15 View deployment

might as well get cute while we're here

e2f495e

david-crespo force-pushed the dedicated-serial-console branch from 5935f28 to e2f495e Compare March 10, 2023 04:24

vercel bot deployed to Preview March 10, 2023 04:25 View deployment

fix broken e2e test

c89633d

vercel bot deployed to Preview March 10, 2023 04:30 View deployment

benjaminleonard added 2 commits March 10, 2023 13:09

Adding connect tab and SettingsGroup component

8f51ecf

Docs text and link is optional

43936c6

vercel bot deployed to Preview March 10, 2023 13:12 View deployment

benjaminleonard commented Mar 10, 2023

View reviewed changes

Add instanceConnect to path builder test

53eb3a4

vercel bot deployed to Preview March 10, 2023 14:31 View deployment

vercel bot deployed to Preview March 10, 2023 17:42 View deployment

simplify props

3edef70

david-crespo force-pushed the dedicated-serial-console branch from b4bb010 to 3edef70 Compare March 10, 2023 17:43

vercel bot deployed to Preview March 10, 2023 17:44 View deployment

david-crespo enabled auto-merge (squash) March 10, 2023 17:49

david-crespo merged commit a6d239d into main Mar 10, 2023

david-crespo deleted the dedicated-serial-console branch March 10, 2023 17:49

		width: `${Math.sin(Math.sin(i)) * 20 + 40}%`,
		}} /* this is silly deterministic way to get random looking lengths */

Dedicated serial console page #1384

Dedicated serial console page #1384

Uh oh!

Conversation

benjaminleonard commented Mar 3, 2023 • edited by david-crespo Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Mar 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

david-crespo Mar 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Random

Sine formula

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

benjaminleonard Mar 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

david-crespo left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

benjaminleonard commented Mar 10, 2023

Uh oh!

benjaminleonard commented Mar 10, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

benjaminleonard commented Mar 3, 2023 •

edited by david-crespo

Loading

vercel bot commented Mar 3, 2023 •

edited

Loading

david-crespo Mar 10, 2023 •

edited

Loading

benjaminleonard Mar 10, 2023 •

edited

Loading

david-crespo left a comment •

edited

Loading