Merge pull request 1Panel-dev#79 from eagle9527/master

Deployment 历史版本列表展示

Author: wanghe-fit2cloud

web/dashboard/src/api/replicasets.js

@@ -27,3 +27,11 @@ export function listReplicaSets (cluster_name, search, keywords, pageNum, pageSi
 export function listNsReplicaSets (cluster_name, namespace) {
   return get(`${replicaSetNamespaceUrl(cluster_name, namespace)}`)
 }
+
+const replicaWorkloadSetNamespaceUrl = (cluster_name, namespace,  selector) => {
+  return `/api/v1/proxy/${cluster_name}/k8s/apis/apps/v1/namespaces/${namespace}/replicasets?labelSelector=${selector}`
+}
+
+export function listNsReplicaSetsWorkload (cluster_name, namespace,  selector) {
+  return get(`${replicaWorkloadSetNamespaceUrl(cluster_name, namespace, selector)}`)
+}

web/dashboard/src/business/workloads/deployments/detail/index.vue

@@ -51,6 +51,12 @@
           <ko-detail-pods :cluster="clusterName" :namespace="namespace" :selector="selectors" />
         </el-card>
       </el-row>
+      <el-row style="margin-top:20px" class="row-box">
+        <el-card class="el-card">
+          <h3>History</h3>
+          <Ko-detail-replicasets :cluster="clusterName" :namespace="namespace" :name="name" :selector="selectors" />
+        </el-card>
+      </el-row>
     </div>
     <div v-if="yamlShow">
       <yaml-editor :value="form" :read-only="true" />
@@ -73,10 +79,11 @@ import KoDetailIngress from "@/components/detail/detail-ingress"
 import KoDetailPause from "@/components/detail/detail-pause"
 import KoDetailUpdate from "@/components/detail/detail-update"
 import KoDetailImage from "@/components/detail/detail-image"
+import KoDetailReplicasets from "@/components/detail/detail-replicasets"
 
 export default {
   name: "DeploymentDetail",
-  components: { KoDetailPods, KoDetailBasic, KoDetailConditions, KoDetailService, KoDetailIngress, KoDetailPause, KoDetailUpdate, KoDetailImage, LayoutContent, YamlEditor },
+  components: { KoDetailPods, KoDetailBasic, KoDetailConditions, KoDetailService, KoDetailIngress, KoDetailPause, KoDetailUpdate, KoDetailImage, LayoutContent, YamlEditor, KoDetailReplicasets},
   props: {
     name: String,
     namespace: String,

web/dashboard/src/components/detail/detail-replicasets.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <complex-table :data="pods" v-loading="loading" @search="search">
+      <el-table-column :label="$t('commons.table.version')" prop="name" min-width="80" show-overflow-tooltip>
+        <template v-slot:default="{row}">
+          <span>{{ row.metadata.annotations["deployment.kubernetes.io/revision"] }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('commons.table.image')" prop="image" min-width="80" show-overflow-tooltip>
+        <template v-slot:default="{row}">
+          <span v-for="(k, index) in row.spec.template.spec.containers" :key="index">
+                <span class="label-custom wd" type="info">{{ k.image }}</span>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('commons.table.time')" prop="time" min-width="80" show-overflow-tooltip>
+        <template v-slot:default="{row}">
+          <span>{{ row.metadata.creationTimestamp | age }}</span>
+        </template>
+      </el-table-column>
+      <ko-table-operations :buttons="buttons" :label="$t('commons.table.action')"></ko-table-operations>
+    </complex-table>
+  </div>
+</template>
+
+<script>
+import ComplexTable from "@/components/complex-table"
+import KoTableOperations from "@/components/ko-table-operations"
+import {checkPermissions} from "@/utils/permission"
+import {listNsReplicaSetsWorkload} from "@/api/replicasets"
+import { patchDeployment } from "@/api/deployments"
+
+
+export default {
+  name: "KoDetailReplicasets",
+  components: { ComplexTable, KoTableOperations },
+  props: {
+    cluster: String,
+    namespace: String,
+    selector: String,
+    fieldSelector: String,
+    name: String,
+  },
+  watch: {
+    selector: {
+      handler (newSelector) {
+        if (newSelector) {
+          this.search()
+        }
+      },
+      immediate: true,
+    },
+    fieldSelector: {
+      handler (newSelector) {
+        if (newSelector) {
+          this.search()
+        }
+      },
+      immediate: true,
+    },
+  },
+  data () {
+    return {
+      buttons: [
+        {
+          label: this.$t("commons.button.rollback"),
+          icon: "el-icon-back",
+          click: (row) => {
+            this.OptionRollback(row)
+          },
+          disabled: () => {
+            return !checkPermissions({ scope: "namespace", apiGroup: "", resource: "pods/log", verb: "*" })
+          },
+        },
+      ],
+      loading: false,
+      pods: [],
+      podUsage: [],
+    }
+  },
+  methods: {
+    search (resetPage) {
+      this.loading = true
+      if (resetPage) {
+        this.paginationConfig.currentPage = 1
+      }
+      if (!checkPermissions({ scope: "namespace", apiGroup: "", resource: "pods", verb: "list" })) {
+        return
+      }
+      listNsReplicaSetsWorkload(this.cluster, this.namespace, this.selector, this.fieldSelector).then((res) => {
+        this.loading = false
+        res.items.sort((a, b) => b.metadata.annotations["deployment.kubernetes.io/revision"] - a.metadata.annotations["deployment.kubernetes.io/revision"])
+        for (var i = 0; i < res.items.length; i++) {
+          this.pods.push(res.items[i])
+        }
+      })
+
+    },
+    OptionRollback (row) {
+      this.$confirm(
+          this.$t("commons.confirm_message.rollback"),
+          this.$t("commons.message_box.prompt"), {
+            confirmButtonText: this.$t("commons.button.confirm"),
+            cancelButtonText: this.$t("commons.button.cancel"),
+            type: "warning",
+          }).then(() => {
+        patchDeployment(this.cluster, row.metadata.namespace, this.name, {"spec": {"template": row.spec.template}})
+            .then(() => {
+              this.dialogModifyVersionVisible = false
+              this.loading = true
+              this.$message({
+                type: "success",
+                message: this.$t("commons.msg.operation_success"),
+              })
+            })
+            .finally(() => {
+              this.loading = false
+            })
+      })
+    },
+  },
+  mounted() {
+    this.clusterName = this.$route.query.cluster
+  },
+}
+</script>
+
+<style scoped>
+.btnSize {
+  width: 28px;
+  height: 28px;
+}
+</style>

web/dashboard/src/i18n/lang/en-US.js

@@ -54,6 +54,7 @@ const message = {
       restart: "Restart",
       modifying_version: "Modifying version",
       sync: "Sync"
+      rollback: "Roll Back"
     },
     table: {
       name: "Name",
@@ -67,6 +68,8 @@ const message = {
       type: "Type",
       resourceInformation: "Resource Information",
       empty_text: "There are no rows to show.",
+      version: "Version",
+      image: "Image",
     },
     status: {
       Running: "Running",

web/dashboard/src/i18n/lang/zh-CN.js

@@ -55,6 +55,7 @@ const message = {
       restart: "重启",
       modifying_version: "修改镜像版本",
       sync: "同步"
+      rollback: "回滚到该版本"
     },
     table: {
       name: "名称",
@@ -68,6 +69,8 @@ const message = {
       type: "类型",
       resourceInformation: "资源信息",
       empty_text: "没有内容显示",
+      version: "版本",
+      image: "镜像",
     },
     status: {
       Running: "运行中",

web/dashboard/src/plugins/request.js

@@ -120,6 +120,7 @@ export const del = (url, loading) => {
 
 export const patch = (url, data, headers, loading) => {
     if (headers) {
+        headers["Content-type"] = "application/merge-patch+json"
         return promise(request({url: url, headers: headers, method: "patch", data}), loading)
     }
     return promise(request({url: url, method: "patch", data}), loading)