GitLab Support Operations, 19 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Support Ops - GitLab.com Projects - Support Team Page

Description

Jason Colyer, Support Operations Manager, takes us through how the Support Team Page works

A

Greetings, my name is jason collier, I'm a support operations manager here at gitlab and today we're going to go over the support team page, how it works, how it's generated and all that fun stuff. So let me share my screen and we will get started so um it's built using jekyll jekyll is kind of the base of all this. It's what we use to generate the actual site and have gitlab pages render it. um It runs out of the support team projects and uh the way this essentially works is we've got our jekyll.

A

You know default kind of folders. We've got the includes folder, which is used for partials partial html files such as the html head, the navigation bar any javascript includes we're going to have in our script and our you know. Web pages we've got the layouts folder, which is used for basically layout files. These are used to determine what a page renders by default, think of them kind of as templates.

A

um We have the I'm going to go ahead and skip some of these. For now we have the sauce folder, which is used for scss files. um If you're not familiar with those, they are more powerful, css files they allow for things such as variables, some semi-dynamic, you know stylistic choices.

A

We have the assets folder. This is used for static files such as basic css files, javascript files, image files, font files. So on so forth um we have the bin folder. This isn't normal to jekyll, but we use this for the generation of the actual files we'll get into that a bit.

A

Then we have the data folder again, not a jekyll default, but something that we have there to store data files.

A

um Beyond that we have the config.aml, that's containing all the configuration choices for jekyll, including declaring collections setting the default title, the author's email etc.

A

So what you see here, you have a lot of folders like underscore members underscore modules. These are collection folders, but um if you actually go into them they're empty, they just got a dot key folder, so they'll commit we'll use the actual site generation scripts within the bin, folder to generate files. For that at a later point, you also have your collection, page files like the ar helper the on-call.

A

These are we'll go ahead and go into the uh on call one just as an example here, let me go ahead and show it as raw, so we can see what it looks like up at the top here with these three dashes. This is actually like the metadata. This is variables that can be used for the site. It'll also help determine you know the site title, what layout to use so on and so forth, we're using default, because that's just what we use for all of these.

A

Beyond that comes your actual content, you can see how we've got a lot of static content, declaring tables but uh right here, where you see the curly bracket. The percentage sign kind of this starts a code block in this case it's starting a for loop and it's using the site.on call collection to iterate through this and generate on-call schedules.

A

um We have several of these collection files, um there's like pairings, which does kind of the same thing. Where you've got your metadata right here and then you've actually got content. You can see how this is using a for loop. Here we have some javascript that uses raw data. We can see how it's making for statements. This is used for the actual page itself.

A

um Beyond that, though, the way this really works, you can see in the ci file, um we run tests to make sure all the you know. The settings are saying: everything's gonna render correctly, but then we installed bundler and from that we do a bundle install to install jekyll and the other such required libraries, gems, and then we essentially run two scripts that convert for jekyll and the build skills catalog. These will generate our actual collections files and then we uh we run jekyll build and we send it to do it.

A

The public folder, the public folder being an artifact, but then it's passed, get lab ci cd, and that will give us our actual web page, which we can see here.

A

So the the core of this is those script files that are generating content. This isn't how you have to do it with jekyll. This is just how we make it a little more dynamic, so we can gather data and make sure that the web page that we're using has everything that we want for it um going into the bin folder itself.

A

You know, we've got the build skills catalog. This generates the skills, the skills, catalog modules, catalog collection and their files.

A

Now I won't go into too much detail, but essentially we're making an api recall to get all the issue templates and from there we're iterating through them and creating actual collection item files.

A

If we go back to bin, we can look at the convert for jekyll and see that this is doing something very similar, just a lot more of it of querying various aspects. Looking at various files and generating towards the end. Here, you can see how it is generating.

A

You know like right here we're generating these collection files, collection, item files- I should say, but uh these run and that's what actually generates a lot of the information because like if we go into something such as skills, there's nothing there by default, so we need to generate.

A

You could manually make these but we're updating every single file they're going to change rapidly. We went with a more dynamic method for generating the actual content of the jekyll site itself.

A

We have information down in the repo itself for how to use local testing. What theme are we using? While we define a theme, we're not actually using a technical theme link to jekyll documentation, which is useful for reading up to understand how to do this? How to get various tokens? How all this is working?

A

um I won't go into the actual file itself, but in the data folder we have a couple different files. We have the static. We have the support team.gamil, which contains all this information about our support team. We have the static data which contains stuff like pagerduty id skill, set lists, etc, etc. Then we have like the template.aml. I can click into this one and show you it's basically just a template for a new person, so you don't have to try to copy someone else's delete everything.

A

Instead, you can go in here copy the entire thing paste it in the support table and then fill it out that way, but all of this runs through gitlab ci cd to make a public folder, which then goes to the pages, and that's what generates our actual website that we have here and a lot of this is it looks dynamic, but technically speaking, once the public folder's been generated, it's all static content. None of this is ever going to change until we regenerate that public folder.

A

That's all there really is to the support team. The support team page, obviously there's a lot of ins and outs to learn: learning about jekyll learning, how to generate files scripting to make sure you get what you want, but essentially this is how we do it with the support team. It's something we use pretty regularly. We try to keep it up to date. We try to make modifications to be a new ideas, so it's something you're likely to be working with.

A

If you need assistance with it feel free to reach out to myself or a fellow support team member, we're always willing to help. I hope you found this educational. I look forward to seeing you in the next video.