VMware Octant Community Meetings, 23 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Octant Community Meeting - September 23, 2020

Description

September 23, 2020

Agenda
- Octant 0.16 demo
- Surface error logs in Octant preview
- Navigation preview
- Hacktober good first issues
- Streaming meetings - coming soon
- VMware code, Oct 1st - Using Octant to Build Kubernetes UIs
- https://vmwarecodeconnect.github.io/CodeConnect2020/#day1

A

All right, hello, everybody and welcome to the september 23rd octant community meeting. uh Let me get the agenda shared here and uh we will jump right into it.

A

There we go uh so today we are going to talk about uh the next release of 16.. We'll do a quick demo of that we'll do a preview of some navigation stuff that uh milan has been working on, uh go over. Maybe some oktoberfest good first issues uh or not we'll see we'll.

A

Talk about some streaming stuff and then also talk about a upcoming session uh that is going to be involving octan, so uh odot 16.. So we uh we met this morning briefly during our stand up and decided that there was one uh minor, outstanding issue around uh the yaml modal uh change that went into master recently that we wanted that fixed. But once that's in place we're gonna go ahead and start cutting odot 16 today.

A

So I wanted to walk through a demo of of of kind of like the just odd 16. So let me see, I think I have it somewhere.

A

You know you'd think I would show up prepared for for this, knowing that I was going to do a demo, but uh that's okay. Well, uh it says it's already. I should have accent running since it's already running.

A

hmm Where are you at octan all right? You know what.

A

Just do what I gotta do and uh yeah okay get actually started here.

A

So uh some of the features that you know that's what I can show instead of just sitting on this page, I can show uh some of the features that uh are innocted. While I wait for it to start.

A

Are we already in big, and I mean I'm big, all right change logs unreleased, so this is our set of unreleased changes that are going to be coming in no.16 uh and I will I'll show kind of a lot of these in the in the demo, but uh some of them are back end things, so I just want to cover the the back end things here.

A

And the um so this one is the default provided namespaces there was this weird bug where, if you provided a namespace, but then you didn't have permission to list namespaces or you provided a list of namespaces but didn't provide an initial namespace, even though you set the namespaces, it would uh still pop up an error. Saying like oh, no, that's a problem, so uh we fixed that by just uh setting the initial namespace to your or setting the namespace list to your initial one.

A

If you set it, um okay looks like I've got octet built and running now, so I can. I can just start to uh to demo those things. um Is there anything uh there was a fix to the grpc messaging size to the api client. That's also a back-end fix. That's going in.

A

I think everything else is a front-end I'll, be able to show it in the front end. So let me get that pulled.

A

A

So this is um this: is the current master that we're going to be basing on.16 off from immediately you'll, see that the icons here have have been updated, so they now will show there's an icon detail as well as the color for the status of things. So that's helpful for people who can't see colors, specifically, you know red green, so the other thing is uh the supply. Ammo is now in a in a modal before it would take you to a whole new page, and now it's it's contained here.

A

uh The nice thing about that is, if you're doing something where you're you're you're in some workflow somewhere and you're you're. You have context for what you're trying to do uh when you apply it through here, you're not taken uh out into a whole new uh path, so you can still be on the page that you're you're interested in when you go.

A

Do that um another another thing that we did is this little keyboard shortcut here, so control slash will pull up a board shortcut list, so I'll go ahead and do that now and now we actually tell you what things are available in octane. uh It's.

A

I forget sometimes what the shortcuts are, so this is actually this was just put in there, because I was annoyed at always having to go grab the code for what the quick switcher was, which is ctrl enter, which leads me to the next change that we have, which is some improvement to the quick switcher that sam made.

A

If you pull up the quick searcher, you can now see that uh there's a no my browser, it's a double scroll, but that's all right, it's better than it was before. So uh as you search through this thing uh and you go through the list, uh you are able to what's one that has you're able to see and and move through the list without it um pushing the entry window out of the way or or making what you can see inaccessible, you can see that double scroll bar has now gone away.

A

I don't know the other cool thing here. That sam did, though, is you, can now switch namespaces through the quick switcher? So you know if I wanted to change over to sam's namespace. I can now do that right through the the quick switcher, which is a pretty cool, uh pretty cool feature, and it makes it really easy to move around octane now using the keyboard.

A

So that's, that's! That's all there. You can control slash now get your list of shortcuts and uh move through. uh The other one that was added was the uh control y, uh which was that is that not it was. What is y I did control y is that there it is ctrl y um to apply yaml so that that can be accessed anywhere within octane as well um see. What else was there that I wanted to show?

A

Let's go back, um so that was the oh yeah, the one that scott added is this 404, so uh previously in octane, when you deleted something it would just, it would shoot you up to sam doesn't have anything of his.

A

I can delete so I'll go to my namespace um previously, if you're on a page like this and you deleted this pod uh octan would would uh just send you back up a page and and in some cases that was fine, but it really wasn't great, um and it also meant that when you tried to go to a page where you were expecting something to be created so like you were applying some yaml uh and you deleted the deployment and then you reapplied it and you were still on the same deployment, so it was going to have the same name instead of that page like saying it's not found and then coming back and refreshing.

A

What would happen is that you'd just be redirected up and you'd have to re-navigate to it. So now, if you are on a page and something gets deleted eventually, this as this thing is deleted, this page will switch to uh a not found page like that and then once you're presented with this, you can then choose to go back up a level use the back button and then we tossed in a little fun thing where it's just like hey.

A

If you don't want to do either of those things, why not go learn about the constellation octane? uh So in my case I'll go back up a level I'll see my pod pending being created and then now I can go in and view the new pod, so it just creates a workflow that is less distracting uh less jarring and it doesn't uh punch you all over the place unexpectedly. So that's a nice little feature.

A

um The other thing we added, uh which was to logging. uh This is this was a has been a long time popular request. We implemented it as a sense drop down where you can now select uh all of the the logs you want to see. So this is a bad choices.

A

I just deleted and recreated it, but uh you know I could see all the logs for the last five hours or since creation, which apparently uh is broken so um that'll get fixed before we cut this release and make an issue for that right now, um the I think that's the I just recently changed the name of that, so that might be my local branch actually so uh I'll go to something that has has logs. So you can see this kind of working.

A

uh There also is a fix coming in right now, so you see what I just did I switched namespaces and then I got this not found page. uh This is an instance where we actually do want to redirect you up to the the new namespace subreview uh sam, just put up a pr that will be in order 16 that handles this case.

A

Where, if you switch namespaces, we will we will take you up to the new overview, namespace uh that you're that you're switching to so that you're not sitting at this not found page uh just waiting for. What's never gonna come.

A

So I think I have some uh yeah. I have some longer running pods in here that that have uh that have logs. So you can see now this. This actually pulled up very quickly. um It's the last five minutes of logs. If we look at the time stamp here, there's a 1206 and it scrolls it back and we've got our wait, uh seven or so sorry, 1712 scroll, it back. We've got 1707 and then logs will continue to come out of here. um But so this is, the sense is like the starting position.

A

Now I could say three hours and you'll see now this gets a lot larger right and we've got logs for the last three hours and they're just spitting out, um and I can still filter still move through them, but so much nicer when you're coming in to view a pod, the logs load pretty instantly. Since it's only grabbing the last five minutes and then you can, you can increase your um there's a word for that.

A

The like time, slice databases use. It increase your whatever that thing that it's called, and I think I is what am I missing? What didn't I? What didn't? I cover here, I think, that's, I think that's most of it.

A

Yeah, just some bug fixes that all be in the change logs, but we just wanted to give folks a preview of um kind of what was what was coming up.

A

uh There's there's some back end things that are not here that are that are merged in or things that are kind of hidden which will be in the change logs, but don't really work for a demo, because there's nothing to really see so. um Yeah look out for that. For that full set of of release information, and that's all I got for the 0.16, what a demo.

B

Well, I have something that's um well, do you have.

C

B

um Something that's not turned on yet. Actually I've been meaning to show you all this anyway, so maybe this would be a good time for me to show you that'll be excellent, yeah all right. So um let me, um how can I make this short? Okay, um we've been thinking for a while about how we turn our light on here about how we could, uh when we as we move to making octet more of a desktop application, there's there's things that we've done that make it hard to be a desktop application.

B

Like one thing, is we spit logs right out to the console, so you need that window up um that might be fine on linux, but for windows and the mac. You know where those logs go, maybe the console- maybe you know maybe somewhere else so trying to figure out a way to actually be able to show those logs in in line with the application.

B

So one of the things that is in 0.16 but is not enabled, is this concept of a bottom panel uh which will which will one day hold these logs and um I've gone way ahead in the code and have been working on? What does that actually look like, so what I can do is I can show you a.

B

I can show you um a preview. um This will be merged in in a few commits, but let me show you a preview of something that we'll be able to do and we'll also be doing this for events as well.

B

B

And let's find a window, so here's auction and I will define it twice now, just once all right, so here's octet- and this is pretty close to 0.16- I'm a few versions off. This branch is a more of a long-term thing that I merge into other branches um periodically.

B

But one of the things you'll notice different on this page is that there is a. There is a slider. There is something down at the bottom and what I can do is I can pull it up and what it is is now is the octet logs. These are the same logs that we were actually shipping to the command line and we're still we're just multiplexing them now they're still going to the command line, but now um we can actually see this throughout the app and what this is is there are.

B

There is definitely some um some layering some z index issues here, but uh what this is is there's a way that we can actually show this inside of the app so just in real time. So what I'm going to do in another window? That you're not going to be able to see is I'm going to change a plugin that I have and wayne's demoed the plugins the javascript plugins before, and they pretty much and they all run basically updates in real time.

B

So what I will do here is, um let me actually make a change to my plugins here. Let me reload this thing one second, so I have a plugin watcher running in my other window.

B

So what's happening is the plug-ins are building and as they're building you'll notice that it actually changed in real time. This is um so it's actually loading and and what we notice is. um Oh there's an error here too. So, rather than having to go to the command line, to actually see it, you can see it within the browser and what I've done here. This is now now we're in experimentation phase. What should the screen?

B

Look like so right now, I'm using this panel um metaphor where you can see the the text of the message, the type of message and the time, but then you can also, but you can go into the panel and we can see that there was an error generated and we have rich error messages with an octant. So we can do things like we can actually show you where it was and that we can also generate stack traces, more useful for us developers than anyone else, but also useful for bug reports.

B

um One neat thing about this panel is that it is its own thing, so notice, I'm changing the uri or the url of the application, and the panel is still there. um The way this panel is being built is that um it's actually multiple things all at once, so there's actually the bottom panel itself and there's a container and each one of these like octant logs or when we throw events in there, they're all their separate things and just more ways to free up information to give people more context of. What's going on really.

B

The reason I wanted to do this is, let me drag this down. Is uh I'll switch namespaces to um let's say cube system because there'll be something there?

B

Oh, no. Actually I want to switch it to. I have a get op system and if I go look at my events, there's no events here we were showing events like we can show events for namespace, but I really wanted to be able to show events, no matter where you are so, let's say: if you did um you scaled up a workload where we could actually show that in the events it would actually just populate at the bottom.

B

So if you kept this window up, yeah there's a slightly bigger screen than the one I have now. You would actually be able to see those events, so you could actually see the cluster change in real time. So that's slowly, coming um two of the pieces are in the and actually are in the 0.16 release, but they're behind feature flags. So they're not quite nailed yet, but we'll be working on this to make it more accessible and available to all the people.

A

I'm done that's awesome. I really like that. A lot um yeah, it's really cool brian. I was talking about this uh the other day. It's really cool to see something that, like you pro so like, I originally prototyped a slider view sam and I did it and then it was okay kind of sucked, but it was okay and then brian came in was like. Oh there's, there's like a foundation of a good idea here.

A

Let me make it better and it's really cool to see a thing you like or like thought about and kind of did to someone come along and be like. Oh thank you, I'm going to do this now and like it's better. This is like it's really yeah.

B

That's that's the best part so I'd have. It was not a 100 original thought for me, so the implementation is different, but you know: there's people don't realize that um if this is all a backend application, it'd be so much easier. um Browsers are, are very complex beast, so it sometimes becomes um it's hard to do things in browsers. So it's nice to see good examples of things so but yeah this is. This is pretty much. How octan has been.

B

Is that we're building ideas off of good ideas and and eventually they become great ideas, so um hope to see more of this, and actually um I have like everything you've seen now. um I don't want to submit a few thousand line pr, so I was trying to pull out the pieces separately, so they can all be committed separately and um and yeah we're on a path.

A

Yeah, no that's great. That looks that looks good. I'm excited to be able to use that myself because having to dip out to the console to see my plug-in errors is currently the bane of my existence so um so moving on milan, you had a navigation preview that you were, or some some videos or something that you were gonna share.

C

Yes, so cool! Yes, I can do that, make sure okay.

C

I'm not sure this is the best time I I just can't top this brian and wayne. Sorry after oh 16, so many cool features in the the bottom panel, but yeah I've been working a little bit over navigation.

C

We kind of feel it's time to revisit that. um So uh let me switch to my.

C

C

Can you see my screen? No, I can't yep all right so uh yeah so navigation. We addressed this maybe six nine months ago, and we built this navigation on the side.

C

That is that's basically, two states one is uh collapsed and the other one is expanded and those two states uh basically um cover two different kinds of users. uh The collapse navigations is geared towards the more advanced user and expand it. That gives a little more text and shows that a little more details for the novice users. That gives a little more description of things that are there, but uh that especially steph bran was working on exposed some problems with this navigation.

C

Unfortunately, clarity is, does not provide anything related to collapse navigation, so we were there on our own and there was a lot of css uh hacks that we had to put in to make that work. So he taught me this might be a good time to step back and kind of um revisit that, and I did a little a few prototypes.

C

One of them is.

C

So basically, there are two ways to approach this one is to either to um divide everything we have inside navigation to groups like you can see here I have a full groups.

C

This is all products, so the icons are just temporary and um the there's a lot of small problems that you probably will probably run into, but that's, okay. This is just to give you an idea, so uh this fixed the basic problem. There is now never too many items in the in the word collaboration when it's collapsed, and it also uh shows everything at the at the very top, which is maybe not the best um idea.

C

So the next thing I tried is how about if we do something a little different, um maybe let's put those groups inside the um inside the navigation itself, so now they're, not in a header they're inside the kitchen and I'm I was kind of excited about this one. Until I saw it, um I s it may work, but especially in the compressed view, there's a lot of um things going on there, of course, those uh this first row of buttons.

C

They don't have to be buttons, they can be tabs and I I'll show that option a little bit later on, but um overall, I'm I'm not sure, I'm so happy with that. The other thing I tried is, as I said, changing those into tabs making them a little bigger. So I think this is a little better um in compressed view. There's still a lot of things we can do here with this space and dividing those a little better, and then you can see that then compressed in in expanded view.

C

I changed the orientation put those on top and the still functional, and they still have kind of the same idea. We have this very compressed that does not show too much information but gives way more space to the rest of the application, and in the same time, if you expand it, you can go back and.

B

When you were, whenever you expanded, um this was an octane at one time, and I don't know who decided it didn't want to be in there anymore, but um I think the team rebelled against me and said it shouldn't be in there. um I still like it, so I'm just gonna throw that out there. Okay, I, like the expanded view right.

C

Right- and you know I mean everything- is I think, on a table too: maybe we need to go back and expand it to be the default. That's another thing we can consider, so it kind of depends. Who are we mostly geared towards the fear? You know, there's a huge variety of users with different needs. So um that's a really good point and then one last thing I wanted to show is- and this is I have this running- live.

C

All right, so this is kind of mix up those two ideas, so you can see that I put the groups back in heather, but I put them in. um I I use the tabs, so you can still change the groups and there's not that many items here, but the idea that is probably one of my favorite how to solve this problem is in a compressed view, is doing overflow.

C

Menu so basically we'll add the button at the bottom. If you click on it, everything imagine there's a lot of items here and some of those can't fit. I will show them here and once you click on them, you'll be able to to use it. So this list can be big too, so we are effectively doubling the the amount of um items we can show.

C

At the same time, I was actually thinking to do this horizontally, but I'm not sure that worked that well and um so I'm sorry, I kind of mixed those two ideas in the in one, but uh the showing the tabs at the top is the option tabs in a header is another option, so I think um I I will probably try to switch some feedback on this. So I the the issue we have on a left navigation.

C

I will all those videos in there, so if you have any feedback on them, please until we can, you know kind of discuss it. I hope this is a information to to help us going and try to discuss this and find the best solution.

C

As brian said, there's defining the ideas on top of the other ideas is definitely something we can do.

A

Yeah, thank you for showing this. This is great. I I um I'll be sure to add this feedback into the into the issue as well, but I I prefer the the icons on the left versus up in the header, and then I I don't.

A

I do like the expanded view where the icons flip to the flip to the top, but also, I think that um I think it's it's it's.

A

It's such a common pattern to just have the icon be on the left-hand side in, like all, in a lot of applications, slack vs code, discord, the um you know, other other go land even like the like the way the menus work people are used to having that large icon on the left. I think if you expand and your large icon shoots up to the top, it just feels um yeah. I don't know it's a lot of movement. It's a lot of changing.

C

A

My mouse wants to go, uh but this looks great. I I think that we could we can build on. We can definitely build on this. I think we're going down the right path now this uh we should definitely have overflow for the big column. You know for the for the big buttons um that'll be really important.

A

um I'm wondering if it's like a combination of this view here the expanded view with the with the but with the left-hand side being icons still, you know so like so like. Where are our top level? Navigation is always the icons and they they don't expand, and then, when you click it, you get.

A

You essentially get our this view uh that that is your list of things right that, like that's a it's, a pretty common.

C

A

Yeah yeah yeah.

C

Okay, yeah, that's I I like that too, and, as you said, it seems to be established pattern, um especially in electron.

A

Apps so yeah and then and then the nice thing is then we can get into like once we're on electron app we can get into.

A

uh They can set hotkeys for each of those things, and- and you know, we can save that in the preferences that that brian did and and like then then we get into actually being able to like configure the nav in a way that people expect it to and like show like. Oh you just do this shortcut to go to to go to namespace overview and this shortcut to go to cluster review and, like I think I think that yeah this is way way. This is way better than what we have now.

A

I I think the like we're. Definitely on the right path.

D

Awesome. Thank you. Any other feedback sam scott can see, but I left it.

E

Yeah I've been wondering a little bit about that slider toggle. It takes up a lot of real estate for what it actually does. Yes- and I don't have a good design language for, but like they're yeah like something can like. That probably can. Even I don't know.

A

E

I don't know if it can even go away at some point. That's what.

A

I think I I I think I'm I think it can go away if we move like I'm okay, saying the top level items are there as icons and then so that, because the the reason we put that toggle there was because we had, we wanted to make it easy to navigate through top level things without having all of the frustration of having everything in your view, at once, while you're moving through top level things. But now you move to a top level thing, and only all you see are the menus for that.

A

For that top level thing, so it kind of solves our nested menu problem, and I think we could probably move to a top level is collapsed as big icons and then, when you click it, you get the expanded menu. And honestly, if you watch most people use octane.

A

The first thing I do is expand out the menu literally like you watch demos, and you watch people like the first thing they do is they go and they click the little thing to expand it and I'm like well. Maybe it should just be expanded right.

C

Now I I agree um and especially agree with the with the slider button. It's just it's using too much space.

A

Yeah and so if the slider is gone and and everything's collapsed, like the big, the top level, things are collapsed to the left yeah and then then, when you click on them, you get the full menu of that. Just that item, uh then I think that I think that's you know.

C

So yeah, so it's kind of combination of those two, the the groups on the left, plus the expanded, yep, expanded view and now slider yep. Okay, I think that's a good next uh step to go to I'll, probably work on that.

A

And yeah that'd be excellent and then the groups on the left, I think uh we yeah the overflow for the groups on the left I think is, is is going to be important, we'll want to we'll want to have that right.

A

The I think the main, the main like the content, the thing that that has expanded that can be as it is now right, where it accordions and scrolls right. That's that's like that's fine, but the the the groups on the left um should, if we ever add that many modules or whatever they should uh you know, have the overflow cool.

C

That sounds good. Thank you. So much for the feedback.

A

Yeah, it was a great demo, thank you for showing it sure uh so moving on to the next issue uh or not issue, but next topic is the um fest good first issues. Let me.

E

I wrote that down uh this one is just more of a general call out for uh uh digitalocean having their october fest uh thing where they encourage people to make contributions to open source products and they send people, t-shirts and stickers, and you know who doesn't like swag, and so I think uh we could probably try to just run off of that wave and uh put tag things as first issues as we see appropriate and uh just encourage people to just take a look at what octane is, especially for people are just looking to contribute open source for the first time uh I feel like we could definitely create opportunities.

E

A

Yeah, I think that's not a bad idea if we curate it and we say like if you take on one of the hacktoberfest issues or one of our labeled good first issues, then um you know we'll, because what we want to avoid is like in projects.

A

I've worked on in the past is the one line or or typo commits where everyone's just like you have like 50 pr's, and it's all like one line, changes and someone's, like add the whatever add double spacing after all commas, and then like like oxford, comma stuff, or what, like you, get these crazy pr's. If you just open it up, so I think I think curating it and saying, like here's, here's our set of issues that we're gonna help people with and and have specifically triage for.

A

That is a good idea, um so yeah yeah, I think we can. We can do something. A blog post on octo.dev would probably be good to follow up with um which I can, if you want to try, if we all want to triage issues as we see them, I can take on the responsibility of doing the octan.dev blog post, since sam did the last blog.

A

Post, uh the other item is the streaming of meetings. So a lot of people watch this meeting after they happen on our the youtube playlist that is shared in the um vmware cloud native apps youtube channel. So we will be shortly.

A

Hopefully next next week uh be streaming these meetings to youtube as well so very similar to tgik, and we expect that that will help people get a little bit more access to the meeting, because we noticed that the community meetings receive anywhere between uh you know 40 to 100 views online after they're posted, and so maybe some of you who are out there watching would like to engage with us in real time, but don't want to commit to a zoom meeting because there's a big difference between logging onto a youtube stream and uh signing into a zoom meeting.

A

So um we yeah we'll be doing that. The other thing is, it means they'll, be there as soon as they're done so I will no longer have to go and manually upload them, which is the main motivation for getting the streaming enabled uh laziness on my part. That's really that's what motivates all developers right.

A

And then, finally, the last thing- I guess I'll share my screen for this one, uh because there's the website that I'll show when I do that.

A

Screen. Okay, so there is a um there is a vmware code connect conference coming up uh on october 1st uh and I am doing a session which is called octant and open source platform for kubernetes uis.

A

uh This session is going to um be a brief overview of octant from just like a usage and what it does standpoint and it's really going to focus uh on uh plugins specifically, and uh in this session I will walk folks through building a plugin using the typescript api, and um so, if you're, interested in learning more about building plugins with octant uh and kind of how uh octant is is all connected together.

A

Then I encourage people to come to that session or watch it later, because it's like 9 30 in the morning and that might be maybe too early for some people.

A

Wait is that night, yeah, 9, 30 pacific time, never mind. That should be fine. I, for some reason. I thought it was 9 30 eastern anyway. That is it. Do we have.

A

A

All right, well with that. Thank you, everybody and I'll see you next week.