feat: add introduction process on UI

console/atest-ui/cypress/e2e/component-exist.cy.ts

@@ -10,6 +10,7 @@ describe('Suite Manage', () => {
 
   it('Create Suite', () => {
     cy.visit('/')
+    cy.get('.introjs-skipbutton').click()
     cy.contains('span', 'Tool Box')
 
     cy.get('[test-id="open-new-suite-dialog"]').click()
@@ -29,6 +30,7 @@ describe('Suite Manage', () => {
   const caseAPI = "/api/v2"
   it('New Case', () => {
     cy.visit('/')
+    cy.get('.introjs-skipbutton').click()
     cy.get('span').contains(suiteName).should('be.visible').click()
 
     cy.get('[test-id="open-new-case-dialog"]').click()
@@ -43,6 +45,7 @@ describe('Suite Manage', () => {
 
   it('Find Case', () => {
     cy.visit('/')
+    cy.get('.introjs-skipbutton').click()
     const searchInput = cy.get('[test-id="search"]')
     searchInput.type(caseName)
     searchInput.trigger('keydown', {key: 'Enter'})
@@ -56,6 +59,7 @@ describe('Suite Manage', () => {
 
   it('Delete Suite', () => {
     cy.visit('/')
+    cy.get('.introjs-skipbutton').click()
     cy.get('span').contains(suiteName).should('be.visible').click()
     cy.get('[test-id="suite-editor-api"]').should('have.value', sampleAPIAddress)
     cy.get('[test-id="suite-del-but"]').click()

console/atest-ui/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "element-plus": "^2.3.7",
+    "intro.js": "^7.0.1",
     "vue": "^3.3.4",
     "vue-json-viewer": "^3.0.4",
     "vue-router": "^4.2.2"

console/atest-ui/src/App.vue

@@ -193,10 +193,12 @@ const viewName = ref('testcase')
 </script>
 
 <template>
-  <div class="common-layout">
+  <div class="common-layout" data-title="Welcome!" data-intro="Welcome to use api-testing! 👋">
     <el-container style="height: 100vh">
       <el-aside width="200px">
-        <el-button type="primary" @click="openTestSuiteCreateDialog" test-id="open-new-suite-dialog" :icon="Edit">New</el-button>
+        <el-button type="primary" @click="openTestSuiteCreateDialog"
+          data-intro="Click here to create a new test suite"
+          test-id="open-new-suite-dialog" :icon="Edit">New</el-button>
         <el-input v-model="filterText" placeholder="Filter keyword" test-id="search" />
 
         <el-tree
@@ -209,6 +211,7 @@ const viewName = ref('testcase')
           node-key="id"
           :filter-node-method="filterTestCases"
           @node-click="handleNodeClick"
+          data-intro="This is the test suite tree. You can click the test suite to edit it."
         />
       </el-aside>
 
@@ -219,12 +222,14 @@ const viewName = ref('testcase')
           :suite="testSuite"
           :name="testCaseName"
           @updated="loadStores"
+          data-intro="This is the test case editor. You can edit the test case here."
         />
         <TestSuite
           v-else-if="viewName === 'testsuite'"
           :name="testSuite"
           :store="store"
           @updated="loadStores"
+          data-intro="This is the test suite editor. You can edit the test suite here."
         />
       </el-main>
     </el-container>

console/atest-ui/src/main.ts

@@ -6,6 +6,8 @@ import App from './App.vue'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import introJs from 'intro.js'
+import 'intro.js/introjs.css'
 
 const app = createApp(App)
 
@@ -15,3 +17,9 @@ app.use(ElementPlus, {
 // app.use(router)
 
 app.mount('#app')
+
+let dontShowAgain = window.location.search.indexOf('newbie') === -1;
+introJs().setOptions({
+  "dontShowAgain": dontShowAgain,
+  "showProgress": true,
+}).start();

console/atest-ui/src/views/TemplateFunctions.vue

@@ -23,10 +23,10 @@ function queryFuncs() {
 
 <template>
     <el-affix position="bottom" :offset="20">
-        <el-button type="primary" @click="dialogVisible = !dialogVisible">Tool Box</el-button>
+        <el-button type="primary" @click="dialogVisible = !dialogVisible"
+            data-intro="You can search your desired template functions.">Tool Box</el-button>
     </el-affix>
 
-
     <el-dialog v-model="dialogVisible" title="Template Functions Query" width="40%" draggable destroy-on-close>
         <template #footer>
             <el-input v-model="query" placeholder="Query after enter" v-on:keyup.enter="queryFuncs" />

docs/README.md

@@ -35,6 +35,16 @@ Please see the following example usage:
 atest service start -m podman --version master
 ```
 
+## Run in k3s
+
+```shell
+sudo k3s server --write-kubeconfig-mode 666
+
+k3s kubectl apply -k sample/kubernetes/default
+
+kustomize build sample/kubernetes/docker.io/ | k3s kubectl apply -f -
+```
+
 ## Storage
 There are multiple storage backends supported. See the status from the list:
 

sample/kubernetes/default/kustomization.yaml

@@ -0,0 +1,8 @@
+resources:
+- manifest.yaml
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+images:
+- name: ghcr.io/linuxsuren/api-testing:master
+  newName: ghcr.io/linuxsuren/api-testing
+  newTag: master

sample/kubernetes/manifest.yaml → sample/kubernetes/default/manifest.yaml

@@ -31,7 +31,7 @@ spec:
               topologyKey: kubernetes.io/hostname
             weight: 5
       containers:
-      - image: ghcr.io/linuxsuren/api-testing
+      - image: ghcr.io/linuxsuren/api-testing:master
         name: server
         imagePullPolicy: Always
         livenessProbe:
@@ -52,18 +52,32 @@ spec:
             memory: 512Mi
           requests:
             cpu: 100m
-            memory: 100m
+            memory: 100Mi
+        volumeMounts:
+        - name: config
+          mountPath: /root/.config/atest/
+      - image: ghcr.io/linuxsuren/api-testing:master
+        name: extension-orm
+        command: [atest-store-orm]
+        imagePullPolicy: Always
+        resources:
+          limits:
+            cpu: 500m
+            memory: 512Mi
+          requests:
+            cpu: 100m
+            memory: 100Mi
+      volumes:
+      - name: config
+        configMap:
+          name: api-testing
 ---
 apiVersion: v1
 kind: Service
 metadata:
   name: api-testing
 spec:
   ports:
-  - name: grpc
-    port: 7070
-    protocol: TCP
-    targetPort: 7070
   - name: web
     port: 8080
     protocol: TCP
@@ -72,3 +86,35 @@ spec:
     app: api-testing
   sessionAffinity: None
   type: NodePort
+---
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: api-testing
+spec:
+  rules:
+  - http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: api-testing
+            port:
+              number: 8080
+---
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  creationTimestamp: null
+  name: api-testing
+data:
+  stores.yaml: |
+    - name: db
+      kind:
+        name: database
+        url: localhost:7071
+      url: localhost:4000
+      username: root
+      properties:
+        database: test

sample/kubernetes/docker.io/kustomization.yaml

@@ -0,0 +1,9 @@
+bases:
+- ../default
+
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+images:
+- name: ghcr.io/linuxsuren/api-testing:master
+  newName: linuxsuren/api-testing
+  newTag: master