Feat: add the observability Pipeline template (#628)

Signed-off-by: barnettZQG <[email protected]>

Signed-off-by: barnettZQG <[email protected]>

src/pages/PipelineListPage/components/CreatePipeline/index.tsx

@@ -14,6 +14,7 @@ import { v4 as uuid } from 'uuid';
 import type { Pipeline, PipelineDetail } from '../../../../interface/pipeline';
 import { checkName } from '../../../../utils/common';
 import locale from '../../../../utils/locale';
+import { templates } from './pipeline-template';
 
 const FormItem = Form.Item;
 
@@ -280,6 +281,19 @@ class CreatePipeline extends React.Component<PipelineProps, State> {
                 />
               </FormItem>
             </Col>
+            <Col span={24} style={{ padding: '0 8px' }}>
+              <FormItem label={<Translation>Template</Translation>}>
+                <Select
+                  locale={locale().Select}
+                  name="template"
+                  dataSource={templates}
+                  placeholder="Select a template"
+                  onChange={(value) => {
+                    this.field.setValue('steps', value);
+                  }}
+                />
+              </FormItem>
+            </Col>
             <Col span={24} style={{ padding: '0 8px' }}>
               <FormItem
                 className={classNames({

src/pages/PipelineListPage/components/CreatePipeline/pipeline-template.ts

@@ -0,0 +1,110 @@
+export const templates = [
+  {
+    label: 'Observability Template',
+    value: `
+- name: Enable Prism
+  type: addon-operation
+  properties:
+    addonName: vela-prism
+
+- name: Enable o11y
+  type: addon-operation
+  properties:
+    addonName: o11y-definitions
+    operation: enable
+    args:
+      - --override-definitions
+
+- name: Enable Exporter
+  type: step-group
+  subSteps:
+  - name: Node Exporter
+    type: addon-operation
+    properties:
+      addonName: node-exporter
+      operation: enable
+
+  - name: Kube State Exporter
+    type: addon-operation
+    properties:
+      addonName: kube-state-metrics
+      operation: enable
+
+- name: Prepare Prometheus
+  type: step-group
+  subSteps:
+    - name: get-exist-prometheus
+      type: list-config
+      properties:
+        template: prometheus-server
+        namespace: vela-system
+      outputs:
+        - name: prometheus
+          valueFrom: "output.configs"
+
+    - name: prometheus-server
+      inputs:
+        - from: prometheus
+          parameterKey: configs
+      if: context.readConfig == "false" || len(inputs.prometheus) == 0
+      type: addon-operation
+      properties:
+        addonName: prometheus-server
+        operation: enable
+        args:
+          - memory=1024Mi
+
+- name: Prepare Loki
+  type: addon-operation
+  properties:
+    addonName: loki
+    operation: enable
+    args:
+      - agent=vector
+
+- name: Prepare Grafana
+  type: step-group
+  subSteps:
+    - name: get-exist-grafana
+      type: list-config
+      properties:
+        template: grafana
+        namespace: vela-system
+      outputs:
+        - name: grafana
+          valueFrom: "output.configs"
+
+    - name: Install Grafana & Init Dashboards
+      inputs:
+        - from: grafana
+          parameterKey: configs
+      if: context.readConfig == "false" || len(inputs.grafana) == 0
+      type: addon-operation
+      properties:
+        addonName: grafana
+        operation: enable
+        args:
+          - serviceType=LoadBalancer
+
+    - name: Init Dashboards
+      inputs:
+        - from: grafana
+          parameterKey: configs
+      if: "len(inputs.grafana) != 0"
+      type: addon-operation
+      properties:
+        addonName: grafana
+        operation: enable
+        args:
+          - install=false
+
+- name: Clean
+  type: clean-jobs
+
+- name: print-message
+  type: print-message-in-status
+  properties:
+    message: "All addons have been enabled successfully, you can use 'vela addon list' to check them."
+`,
+  },
+];