Sealer is Alibaba’s open source Cluster mirroring technology based on Kuberentes, which can package the whole cluster.

Sealer Cloud is available online to help users pack, share and run clusters. Sealer Cloud also uses rust+ WASM technology on the front and back ends. This article continues with code structure, nesting, and list loops to see how elegant Rust can be.

The code structure

Sealer source code directly in the specific code for reference.

Of course, interested students can participate in the development of the project.

. ├ ─ ─ components │ ├ ─ ─ footer. Rs │ ├ ─ ─ the header. The rs # UI header │ ├ ─ ─ image_info. Rs │ ├ ─ ─ image_list. Rs # body content, Image list │ └ ─ ─ mod. Rs ├ ─ ─ main. Rs # main function ├ ─ ─ routes │ ├ ─ ─ the login. The rs │ └ ─ ─ mod. Rs ├ ─ ─ services │ ├ ─ ─ mod. Rs │ └ ─ ─ requests. The rs └ ─ ─ typesCopy the code

Module import

Use functions to make your HTML clearer

impl Component for Header {
...
    fn view(&self) -> Html {
        html! {
            <nav class="navbar is-primary block" role="navigation" aria-label="main navigation">
                { self.logo_name() }
                { self.search() }
                { self.login() }
            </nav>
        }
    }
}
Copy the code

We must avoid writing a lot of HTML in a block of code, yew can be divided into functions.

impl Header {
   fn logo_name(&self) -> Html {
       html! {
           <div class="navbar-brand">
            <div class="navbar-item">
                <i class="far fa-cloud fa-2x fa-pull-left"></i>
                <strong> { "Sealer Cloud" }</strong>
            </div>
           </div>
       }
   }
...
}
Copy the code

To make it clear, the view function calls the following Html modules.

Call the header module in main

We’ve implemented a header Component in the header, first exposing the module in mod.rs:

pub mod header;
pub mod image_list;
Copy the code

Import Crate in main.rs:

use crate::components::{header::Header, image_list::Images};
Copy the code

Import header UI in main’s main UI

through

fn view(&self) -> Html {
    html! {
        <div>
          <Header /> 
          <Images />
        </div>
    }
}
Copy the code

Mirror List List loop processing

Define a list array:

pub struct Image {
    name: String,
    body: String, 
}

pub struct Images{
    // props: Props,
    images: Vec<Image>
}
Copy the code

Do some initialization in the create function:

fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self { Images{ images: vec! [Image {name: String::from("kubernetes:v1.19.9"), body: String::from("sealer base image, kuberntes alpine, without calico") }, ...]Copy the code

Loop through the UI:

   fn image_list(&self) -> Html {
       html! {
          <div class="columns is-multiline">
            {
                for self.images.iter().map(|image|{
                    self.image_info(image)
                })
            }
          </div>
       }
   }
Copy the code

The map is passed an anonymous function that returns the details of a single image.

A single image is rendered as follows:

   fn image_info(&self,image: &Image) -> Html {
       html! {
        <div class="column is-6">
          <div class="card">
            <header class="card-header">
              <p class="card-header-title">
                { image.name.to_string() }
              </p>
              <button class="card-header-icon" aria-label="more options">
              <span class="icon">
                <i class="fal fa-expand" aria-hidden="true"></i>
              </span>
            </button>
            </header>
              <div class="card-content">
              <div class="content">
                { image.body.to_string() }
                 <br />
                <time datetime="2016-1-1">{ "11:09 PM - 1 Jan 2016" }</time>
              </div>
              </div>
           </div>
        </div>
       }
   }
Copy the code

This is a list of mirror images, isn’t it very simple. Take a look at the overall effect:

Kubernetes one-click installation

Sealer Cluster whole package!