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!