auto refresh

src/app_viewmodel.go

@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"github.com/gin-gonic/gin"
 	log "github.com/sirupsen/logrus"
+	"github.com/thoas/go-funk"
 	"net/http"
 	"strings"
 )
@@ -107,8 +108,18 @@ func CreateUpdateDeleteApp(c *gin.Context) {
 
 func GetAppsController(c *gin.Context) {
 	username := c.MustGet("username").(string)
-	apps := GetApps(username)
-	c.JSON(http.StatusOK, apps)
+
+	appsvm := funk.Map(GetApps(username), func(a AppModel) AppViewModel { return AppViewModel{AppModel: &a} }).([]AppViewModel)
+	for i := range appsvm {
+		a := &appsvm[i]
+		a.Status = statusString(a)
+		a.ServiceDisplayName = a.ServiceName()
+	}
+	vm := &AppsViewModel{
+		Username: username,
+		Apps:     appsvm,
+	}
+	c.JSON(http.StatusOK, vm)
 }
 
 func GetUsername(c *gin.Context) {

src/k8s_client.go

@@ -281,7 +281,7 @@ func (c *K8sClient) UpdateIngress(a *AppModel) {
 			Name:   a.IngressName(),
 			Labels: label,
 			Annotations: map[string]string{
-				//"traefik.ingress.kubernetes.io/router.middlewares": "default-strip-prefix-1@kubernetescrd",
+				"traefik.ingress.kubernetes.io/router.middlewares": "default-strip-prefix-1@kubernetescrd",
 			},
 		},
 		Spec: netv1.IngressSpec{

template/app_view.html

@@ -81,7 +81,7 @@
                     <div class="row">
                         <label for="app-name" class="form-label">应用名</label>
                         <input type="text" id="app-name" class="form-control" v-model="selectApp.AppName"
-                               placeholder="只能为字母、数字和下划线"/>
+                               placeholder="只能为小写字母、数字和下划线"/>
 
                     </div>
                     <div class="row">
@@ -130,13 +130,18 @@
             </div>
         </div>
     </div>
+    <div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
+        <div id="liveToast" class="toast alert-danger" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-header">
+                <strong class="me-auto">请求失败</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body">
+                {{ toastText }}
+            </div>
+        </div>
+    </div>
 
-    <!--    <div class="toast d-flex align-items-center top-0 end-0" id="success-toast">-->
-    <!--        <div class="toast-body">-->
-    <!--            <p id="toast-content"></p>-->
-    <!--        </div>-->
-    <!--        <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>-->
-    <!--    </div>-->
 
 </div>
 </body>
@@ -150,6 +155,7 @@
                 username: "",
                 apps: [],
                 blankApp: {},
+                toastText: "",
                 selectApp: {
                     Id: "",
                     AppName: "",
@@ -164,6 +170,19 @@
             }
         },
         methods: {
+            toast(text) {
+                this.toastText = text
+                let toastLiveExample = document.getElementById('liveToast')
+                let toast = new bootstrap.Toast(toastLiveExample)
+                toast.show()
+            },
+            handleResponse(e) {
+                if (e.data.msg !== "ok") {
+                    this.toast(e.data.msg)
+                } else {
+                    this.refresh()
+                }
+            },
             showModal(a) {
                 if (!a) {
                     a = JSON.parse(JSON.stringify(this.blankApp))
@@ -172,46 +191,36 @@
                 (new bootstrap.Modal("#edit-modal")).show()
             },
             startApp(item) {
-                axios.post("dep?id=" + item.Id).then(e => {
-                    console.log(e.data)
-                })
+                axios.post("dep?id=" + item.Id).then(this.handleResponse)
             },
             deleteApp(app) {
                 axios.delete("app", {
                     data: app
-                }).then(e => {
-                    console.log(e.data)
-                })
+                }).then(this.handleResponse)
             },
             stopApp(app) {
-                axios.delete("dep?id=" + app.Id).then(e => {
-                    console.log(e.data)
-                })
+                axios.delete("dep?id=" + app.Id).then(this.handleResponse)
             },
             updateApp() {
                 let app = this.selectApp
                 if (app.Id) {
-                    axios.put("app", app).then(e => {
-                        console.log(e)
-                    })
+                    axios.put("app", app).then(this.handleResponse)
                 } else {
                     app.Id = null
                     app.UserName = this.username
-                    axios.post("app", app).then(e => {
-                        console.log(e)
-                    });
+                    axios.post("app", app).then(this.handleResponse);
                 }
+            },
+            refresh() {
+                axios.get("apps").then(r => {
+                    this.username = r.data.Username
+                    this.apps = r.data.Apps
+                })
             }
         },
         mounted() {
             this.blankApp = JSON.parse(JSON.stringify(this.selectApp))
-            axios.get("username").then(r => {
-                this.username = r.data.username
-            })
-            axios.get("apps").then(response => {
-                this.apps = response.data
-            })
-
+            this.refresh()
         }
     }).mount("#app")