add observability page

assets/scss/404.scss

@@ -0,0 +1,4 @@
+.section-1 {
+  padding-top: 100px;
+  text-align: center;
+}

assets/scss/service-mesh.scss

@@ -53,8 +53,9 @@ html {
     margin: 0 auto;
 
     h2 {
+      width: 760px;
+      margin: 0 auto 45px;
       text-align: center;
-      margin-bottom: 45px;
     }
 
     & > ul {
@@ -164,6 +165,10 @@ html {
       cursor: pointer;
       box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
       background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
+      
+      &:hover {
+        box-shadow: none;
+      }
     }
   }
 

content/en/observability/_index.md

@@ -0,0 +1,48 @@
+---
+title: "observability"
+
+css: "scss/service-mesh.scss"
+
+section1:
+  title: KubeSphere allows you to build visualizations simply and intuitively
+  content: KubeSphere provides rich observability from infrastructure to applications. It integrates your favorite tools for multi-dimensional monitoring metrics, multi-tenant log query and collection, alerting and notification.
+  image: /images/service-mesh/banner.jpg
+
+section2:
+  title: Discoverability, Observability, Security, Everything You Need in One Platform
+  list:
+    - title: Multi-dimensional Monitoring
+      image: /images/observability/multi-dimensional-monitoring.png
+      contentList:
+        - content: <span>Infrastructure monitoring</span> provides K8s control plane and cluster node metrics
+        - content: <span>Application resources monitoring</span> includes CPU, memory, network and storage metrics
+        - content: <span>Resource usage ranking</span> by node, workspace and project.
+        - content: <span>Service component monitoring</span> for user to quickly locate component failures
+        - content: <span>Custom metrics support</span> including application custom metrics dashboard (in v3.0.0)
+    
+    - title: Log Query and Collection
+      image: /images/observability/log-query-and-collection.png
+      contentList:
+        - content: <span>Multi-tenant log management</span>, different tenants can only see their own log information.
+        - content: <span>Multi-level log queries</span>, including project, workload, Pod, container and keywords, supports drilling into each level to locate the issues.
+        - content: <span>Support multiple log collection platforms</span>, such as Elasticsearch, Kafka, Fluentd
+        - content: <span>Service component monitoring</span> for user to quickly locate component failures
+    
+    - title: Flexible Alerting and Notification
+      image: /images/observability/flexible-alerting-and-notification.png
+      contentList:
+        - content: <span>Rich alerting rules</span> based on multi-tenancy and multi-dimensional monitoring metrics
+        - content: <span>Flexible alerting policy</span> allows you to customize an alerting policy that contains multiple alerting rules
+        - content: Multi-level monitoring metrics for alerting, including from infrastructure to workloads.
+        - content: <span>Flexible alerting rules</span> allows you to customize the detection period, duration and alerting priority of monitoring metrics
+        - content: <span>Integration with AlertManager</span>, support multiple notification channels (in v3.0.0)
+
+section3:
+  title: See Cloud Native Observability in KubeSphere
+  image: /images/service-mesh/15.jpg
+  content: Want to get started in action by following with the hands-on lab?
+  btnContent: Start Hands-on Lab
+  link:
+  bgLeft: /images/service-mesh/3-2.svg
+  bgRight: /images/service-mesh/3.svg
+---

layouts/404.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<section>
-    <h2>页面不存在</h2>
+<section style="text-align: center; margin-top: 200px;">
+    <h2>404</h2>
 </section>
 {{ end }}

layouts/observability/list.html

@@ -0,0 +1,52 @@
+{{ define "main" }}
+<section class='section-1'>
+  {{ with .Params.section1}}
+  <img src="{{ .image }}" alt="">
+  <div class="title-div">
+    <h1>{{ .title }}</h1>
+    <p>{{ .content }}</p>
+  </div>
+  {{ end }}
+</section>
+
+<section class="section-2">
+  {{ with .Params.section2 }}
+  <div>
+    <h2 class="title-black-h2">{{ .title }}</h2>
+    <ul>
+      {{ range .list }}
+      <li>
+        <div>
+          <h3>{{ .title }}</h3>
+          {{ if .summary }}
+          <p>{{ .summary }}</p>
+          {{ end }}
+          {{ if .contentList }}
+          <ul>
+            {{ range .contentList}}
+            <li>{{ .content | safeHTML }}</li>
+            {{ end }}
+          </ul>
+          {{ end }}
+        </div>
+        <img src="{{ .image }}" alt="">
+      </li>
+      {{ end }}
+    </ul>
+  </div>
+  {{ end }}
+</section>
+
+<section class="section-3">
+  {{ with .Params.section3 }}
+  <img class="bg-left" src="{{ .bgLeft }}" alt="">
+  <img class="bg-right" src="{{ .bgRight }}" alt="">
+  <div>
+    <h2 class="title-black-h2">{{ .title }}</h2>
+    <img src="{{ .image }}" alt="">
+    <p>{{ .content }}</p>
+    <a href="{{ .link }}"><button>{{ .btnContent }}</button></a>
+  </div>
+  {{ end }}
+</section>
+{{ end }}