From 2ee139c92ba31020db49170e85aa14ce6729a41e Mon Sep 17 00:00:00 2001
From: fit2bot <68588906+fit2bot@users.noreply.github.com>
Date: Mon, 2 Dec 2024 10:33:46 +0800
Subject: [PATCH] perf: Change secret dashboard (#4473)

* perf: Change secret dashboard

* style: Modify layout

---------

Co-authored-by: feng <1304903146@qq.com>
Co-authored-by: zhaojisen <1301338853@qq.com>
---
 .../AccountChangeDashboard.vue                |  13 -
 .../accounts/AccountChangeSecret/index.vue    |   2 +-
 .../dashboard/ChangeSecret/AccountSummary.vue |  84 ++++++
 .../dashboard/ChangeSecret/CardSummary.vue    | 122 ++++++++
 .../dashboard/ChangeSecret/DataSummary.vue    |  92 +++++++
 .../ChangeSecret/FailedAccountSummary.vue     |  90 ++++++
 .../dashboard/ChangeSecret/LineChart.vue      | 260 ++++++++++++++++++
 .../dashboard/ChangeSecret/TrendSummary.vue   |  60 ++++
 src/views/dashboard/ChangeSecret/index.vue    |  80 ++++++
 9 files changed, 789 insertions(+), 14 deletions(-)
 delete mode 100644 src/views/accounts/AccountChangeSecret/AccountChangeDashboard.vue
 create mode 100644 src/views/dashboard/ChangeSecret/AccountSummary.vue
 create mode 100644 src/views/dashboard/ChangeSecret/CardSummary.vue
 create mode 100644 src/views/dashboard/ChangeSecret/DataSummary.vue
 create mode 100644 src/views/dashboard/ChangeSecret/FailedAccountSummary.vue
 create mode 100644 src/views/dashboard/ChangeSecret/LineChart.vue
 create mode 100644 src/views/dashboard/ChangeSecret/TrendSummary.vue
 create mode 100644 src/views/dashboard/ChangeSecret/index.vue

diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeDashboard.vue b/src/views/accounts/AccountChangeSecret/AccountChangeDashboard.vue
deleted file mode 100644
index 2a445937a..000000000
--- a/src/views/accounts/AccountChangeSecret/AccountChangeDashboard.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-export default {
-  name: 'AccountChangeDashboard'
-}
-</script>
-
-<template>
-  <h1>账号改密汇总</h1>
-</template>
-
-<style scoped>
-
-</style>
diff --git a/src/views/accounts/AccountChangeSecret/index.vue b/src/views/accounts/AccountChangeSecret/index.vue
index 6ed5c7147..abc30c9e7 100644
--- a/src/views/accounts/AccountChangeSecret/index.vue
+++ b/src/views/accounts/AccountChangeSecret/index.vue
@@ -18,7 +18,7 @@ export default {
           {
             title: this.$t('Overview'),
             name: 'AccountChangeDashboard',
-            component: () => import('@/views/accounts/AccountChangeSecret/AccountChangeDashboard.vue')
+            component: () => import('@/views/dashboard/ChangeSecret')
           },
           {
             title: this.$t('AccountChangeSecret'),
diff --git a/src/views/dashboard/ChangeSecret/AccountSummary.vue b/src/views/dashboard/ChangeSecret/AccountSummary.vue
new file mode 100644
index 000000000..9d1d21433
--- /dev/null
+++ b/src/views/dashboard/ChangeSecret/AccountSummary.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="box">
+    <div class="head">
+      <Title :config="config" />
+    </div>
+    <LineChart v-if="loading" v-bind="lineChartConfig" />
+  </div>
+</template>
+
+<script>
+import Title from '../components/Title.vue'
+import LineChart from './LineChart.vue'
+
+export default {
+  components: {
+    Title,
+    LineChart
+  },
+  props: {
+    days: {
+      type: [Number, String],
+      default: '7'
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      config: {
+        title: '账号成功/失败情况',
+        tip: '账号成功/失败情况'
+      },
+      lineChartConfig: {
+        datesMetrics: [],
+        primaryData: [1],
+        primaryName: '成功',
+        secondaryData: [1],
+        secondaryName: '失败'
+      }
+    }
+  },
+  watch: {
+    days() {
+      this.getMetricData()
+    }
+  },
+  mounted() {
+    try {
+      this.getMetricData()
+    } finally {
+      this.loading = true
+    }
+  },
+  methods: {
+    async getMetricData() {
+      const url = `/api/v1/accounts/change-secret-dashboard/?daily_success_and_failure_metrics=1&days=${this.days}`
+      const data = await this.$axios.get(url)
+      const success = data?.dates_metrics_total_count_success
+      const failed = data?.dates_metrics_total_count_failed
+      this.lineChartConfig.datesMetrics = data?.dates_metrics_date
+      if (success.length > 0) {
+        this.lineChartConfig.primaryData = success
+      }
+      if (failed.length > 0) {
+        this.lineChartConfig.secondaryData = failed
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  margin-top: 16px;
+  padding: 20px;
+  background: #fff;
+
+  .head {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+}
+</style>
+
diff --git a/src/views/dashboard/ChangeSecret/CardSummary.vue b/src/views/dashboard/ChangeSecret/CardSummary.vue
new file mode 100644
index 000000000..18c09dda6
--- /dev/null
+++ b/src/views/dashboard/ChangeSecret/CardSummary.vue
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <el-row :gutter="16">
+      <el-col :lg="12" :sm="24" class="margin-top-10">
+        <SummaryCountCard :config="logConfig" :items="LogItems" />
+      </el-col>
+      <el-col :lg="12" :sm="24" class="margin-top-10">
+        <SummaryCountCard :config="sessionConfig" :items="sessionItems" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import SummaryCountCard from '../components/SummaryCountCard.vue'
+
+export default {
+  components: { SummaryCountCard },
+  props: {
+    days: {
+      type: [Number, String],
+      default: '7'
+    }
+  },
+  data() {
+    return {
+      logConfig: {
+        title: '当前状态',
+        tip: '当前状态'
+      },
+      sessionConfig: {
+        title: '改密任务执行状态',
+        tip: '改密任务执行状态'
+      },
+      data: {
+        total_count_change_secrets: 0,
+        total_count_periodic_change_secrets: 0,
+        total_count_change_secret_assets: 0,
+        total_count_change_secret_executions: 0,
+        total_count_success_change_secret_executions: 0,
+        total_count_failed_change_secret_executions: 0
+      }
+    }
+  },
+  computed: {
+    LogItems() {
+      return [
+        {
+          title: '任务数',
+          body: {
+            route: { name: `LoginLogList` },
+            count: this.data.total_count_change_secrets
+          }
+        },
+        {
+          title: '定时任务数',
+          body: {
+            route: { name: `LoginLogList` },
+            count: this.data.total_count_periodic_change_secrets
+          }
+        },
+        {
+          title: '资产数',
+          body: {
+            route: { name: `OperateLogList` },
+            count: this.data.total_count_change_secret_assets
+          }
+        }
+      ]
+    },
+    sessionItems() {
+      return [
+        {
+          title: '任务执行数',
+          body: {
+            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
+            count: this.data.total_count_change_secret_executions
+          }
+        },
+        {
+          title: '成功数',
+          body: {
+            route: { name: `SessionList`, params: { activeMenu: 'OfflineList' }},
+            count: this.data.total_count_success_change_secret_executions
+          }
+        },
+        {
+          title: '失败数',
+          body: {
+            route: { name: `FtpLog` },
+            count: this.data.total_count_failed_change_secret_executions
+          }
+        }
+      ]
+    }
+  },
+  watch: {
+    days() {
+      this.getData()
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    async getData() {
+      this.data = await this.$axios.get(`/api/v1/accounts/change-secret-dashboard/?days=${this.days}
+        &total_count_change_secrets=1
+        &total_count_periodic_change_secrets=1
+        &total_count_change_secret_assets=1
+        &total_count_change_secret_status=1
+      `)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top-10 {
+  margin-top: 10px;
+}
+</style>
diff --git a/src/views/dashboard/ChangeSecret/DataSummary.vue b/src/views/dashboard/ChangeSecret/DataSummary.vue
new file mode 100644
index 000000000..f269b2357
--- /dev/null
+++ b/src/views/dashboard/ChangeSecret/DataSummary.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <el-row :gutter="16">
+      <el-col :lg="24" :sm="12" class="margin-top-10">
+        <SummaryCountCard :config="logConfig" :items="LogItems" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import SummaryCountCard from '../components/SummaryCountCard.vue'
+
+export default {
+  components: { SummaryCountCard },
+  props: {
+    days: {
+      type: [Number, String],
+      default: '7'
+    }
+  },
+  data() {
+    return {
+      logConfig: {
+        title: '当前正在改密情况',
+        tip: '当前正在改密情况'
+      },
+      data: {
+        total_count_ongoing_change_secret: 0,
+        total_count_ongoing_change_secret_assets: 0,
+        total_count_ongoing_change_secret_accounts: 0,
+        total_count_online_sessions: 0,
+        total_count_history_sessions: 0,
+        total_count_ftp_logs: 0
+      }
+    }
+  },
+  computed: {
+    LogItems() {
+      return [
+        {
+          title: '任务执行数',
+          body: {
+            route: { name: `LoginLogList` },
+            count: this.data.total_count_ongoing_change_secret
+          }
+        },
+        {
+          title: '资产数',
+          body: {
+            route: { name: `LoginLogList` },
+            count: this.data.total_count_ongoing_change_secret_assets
+          }
+        },
+        {
+          title: '账号数',
+          body: {
+            route: { name: `OperateLogList` },
+            count: this.data.total_count_ongoing_change_secret_accounts
+          }
+        }
+      ]
+    }
+  },
+  watch: {
+    days() {
+      this.getData()
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    async getData() {
+      this.data = await this.$axios.get(`/api/v1/index/?days=${this.days}
+        &total_count_user_login_logs=1
+        &total_count_operate_logs=1
+        &total_count_change_password_logs=1
+        &total_count_online_sessions=1
+        &total_count_history_sessions=1
+        &total_count_ftp_logs=1
+      `)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top-10 {
+  margin-top: 10px;
+}
+</style>
diff --git a/src/views/dashboard/ChangeSecret/FailedAccountSummary.vue b/src/views/dashboard/ChangeSecret/FailedAccountSummary.vue
new file mode 100644
index 000000000..a2c15e708
--- /dev/null
+++ b/src/views/dashboard/ChangeSecret/FailedAccountSummary.vue
@@ -0,0 +1,90 @@
+<template>
+  <HomeCard :table-config="tableConfig" v-bind="cardConfig" />
+</template>
+
+<script>
+import HomeCard from '@/views/workbench/myhome/components/HomeCard.vue'
+
+export default {
+  components: {
+    HomeCard
+  },
+  data() {
+    const vm = this
+    return {
+      cardConfig: {
+        title: '改密失败账号'
+      },
+      tableConfig: {
+        url: '/api/v1/terminal/my-sessions/?limit=5',
+        columns: [
+          'id', 'asset', 'account', 'remote_addr', 'protocol'
+        ],
+        columnsMeta: {
+          id: {
+            prop: 'id',
+            align: 'center',
+            formatter: function(row, column, cellValue, index) {
+              const label = index + 1
+              const route = { to: { name: 'SessionDetail', params: { id: row.id }}}
+              if (vm.$hasPerm('terminal.view_session')) {
+                return <router-link {...{ attrs: route }} >{label}</router-link>
+              } else {
+                return label
+              }
+            }
+          },
+          asset: {
+            'min-width': 200,
+            label: this.$t('Asset')
+          },
+          account: {
+            'min-width': 100
+          },
+          command_amount: {
+            align: 'center',
+            label: this.$t('Command')
+          },
+          remote_addr: {
+            width: 180,
+            label: this.$t('RemoteAddr')
+          },
+          protocol: {
+            width: 100,
+            label: this.$t('Protocol'),
+            el: {
+              disabled: false
+            },
+            sortable: false
+          },
+          actions: {
+            align: 'center',
+            formatterArgs: {
+              hasDelete: false,
+              hasClone: false,
+              hasUpdate: false,
+              extraActions: [
+                {
+                  name: 'connect',
+                  icon: 'fa-desktop',
+                  plain: true,
+                  type: 'primary',
+                  can: ({ row }) => row.is_active,
+                  callback: ({ row }) => {
+                    window.open(`/luna/?login_to=${row.asset_id}&login_account=${row.account_id}`, '_blank')
+                  }
+                }
+              ]
+            }
+          }
+        },
+        hasSelection: false,
+        paginationSize: 10
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/dashboard/ChangeSecret/LineChart.vue b/src/views/dashboard/ChangeSecret/LineChart.vue
new file mode 100644
index 000000000..187843eed
--- /dev/null
+++ b/src/views/dashboard/ChangeSecret/LineChart.vue
@@ -0,0 +1,260 @@
+<template>
+  <div>
+    <echarts
+      ref="echarts"
+      :options="options"
+      :autoresize="true"
+      theme="light"
+      class="disabled-when-print"
+      @finished="getDataUrl"
+    />
+    <img v-if="dataUrl" :src="dataUrl" class="enabled-when-print" style="display: none;width: 100%;">
+  </div>
+</template>
+
+<script>
+// eslint-disable-next-line no-unused-vars
+import * as echarts from 'echarts'
+import { mix } from '@/utils/theme/color'
+
+export default {
+  name: 'LoginMetric',
+  props: {
+    range: {
+      type: String,
+      default: 'weekly'
+    },
+    datesMetrics: {
+      type: Array,
+      default: () => []
+    },
+    primaryName: {
+      type: String,
+      default: ''
+    },
+    primaryData: {
+      type: Array,
+      default: () => []
+    },
+    secondaryName: {
+      type: String,
+      default: ''
+    },
+    secondaryData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data: function() {
+    return {
+      dataUrl: '',
+      metricsData: {
+        dates_metrics_date: [],
+        dates_metrics_total_count_failed: [],
+        dates_metrics_total_count_success: []
+      }
+    }
+  },
+  computed: {
+    mixColors() {
+      const documentStyle = document.documentElement.style
+      const primary = documentStyle.getPropertyValue('--color-primary')
+      const colorValue = primary.replace(/#/g, '')
+      const TwoLevelColor = mix(colorValue, 'ffffff', 38)
+      const ThreeLevelColor = mix(colorValue, 'ffffff', 20)
+      const shadowColor = mix(colorValue, 'ffffff', 1)
+      return {
+        primary,
+        TwoLevelColor,
+        ThreeLevelColor,
+        shadowColor
+      }
+    },
+    options() {
+      const { primary, TwoLevelColor, ThreeLevelColor, shadowColor } = this.mixColors
+      return {
+        title: {
+          show: false
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          left: 'auto',
+          icon: 'rect',
+          // 图例标记的图形宽度
+          itemWidth: 10,
+          itemHeight: 10
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        color: [primary, '#F3B44B'],
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+              lineStyle: {
+                color: '#8F959E'
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                // 坐标轴颜色
+                color: '#8F959E'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            data: this.datesMetrics
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#8F959E'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            // 坐标轴线样式
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#EFF0F1'
+              }
+            }
+          }
+        ],
+
+        animationDuration: 500,
+        series: [
+          {
+            name: this.primaryName,
+            type: 'line',
+            smooth: true,
+            areaStyle: {
+            // 区域填充样式
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [{
+                    offset: 0,
+                    color: primary
+                  }, {
+                    offset: 0.6,
+                    color: TwoLevelColor
+                  },
+                  {
+                    offset: 0.8,
+                    color: ThreeLevelColor
+                  }
+                  ],
+                  false
+                ),
+                shadowColor: shadowColor,
+                shadowBlur: 5
+              }
+            },
+            data: this.primaryData
+          },
+          {
+            name: this.secondaryName,
+            type: 'line',
+            smooth: true,
+            areaStyle: {
+            // 区域填充样式
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [{
+                    offset: 0,
+                    color: 'rgba(249, 199, 79, 0.6)'
+                  }, {
+                    offset: 0.6,
+                    color: 'rgba(249, 199, 79, 0.2)'
+                  },
+                  {
+                    offset: 0.8,
+                    color: 'rgba(249, 199, 79, 0.1)'
+                  }
+                  ],
+                  false
+                ),
+                shadowColor: 'rgba(249, 199, 79, 0.1)',
+                shadowBlur: 6
+              }
+            },
+            data: this.secondaryData
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    range() {
+      this.getMetricData()
+    }
+  },
+  mounted() {
+    this.getMetricData()
+  },
+  methods: {
+    getDataUrl() {
+      const instance = this.$refs.echarts.echartsInstance
+      if (instance) {
+        this.dataUrl = instance.getDataURL()
+      }
+    },
+    getMetricData() {
+      this.getDataUrl()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.echarts {
+  width: 100%;
+  height: 272px;
+}
+
+@media print {
+  .disabled-when-print {
+    display: none;
+  }
+  .enabled-when-print {
+    display: inherit !important;
+  }
+  .print-margin {
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/src/views/dashboard/ChangeSecret/TrendSummary.vue b/src/views/dashboard/ChangeSecret/TrendSummary.vue
new file mode 100644
index 000000000..ff724a974
--- /dev/null
+++ b/src/views/dashboard/ChangeSecret/TrendSummary.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="box">
+    <Title :config="config" style="margin-bottom: 16px;" />
+    <ColumnChart v-bind="columnChartConfig" />
+  </div>
+</template>
+
+<script>
+import Title from '../components/Title.vue'
+import ColumnChart from '../components/ColumnChart'
+
+export default {
+  components: { Title, ColumnChart },
+  props: {
+    days: {
+      type: [Number, String],
+      default: '7'
+    }
+  },
+  data() {
+    return {
+      config: {
+        title: this.$t('SessionConnectTrend'),
+        tip: this.$t('SessionConnectTrend')
+      },
+      columnChartConfig: {
+        datesMetrics: [],
+        primaryData: [0],
+        primaryName: this.$t('LoginUserToday')
+      }
+    }
+  },
+  watch: {
+    days() {
+      this.getData()
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    async getData() {
+      const data = await this.$axios.get(`/api/v1/index/?dates_metrics=1&days=${this.days}`)
+      const loginTotal = data?.dates_metrics_total_count_login
+      this.columnChartConfig.datesMetrics = data.dates_metrics_date
+      if (loginTotal.length > 0) {
+        this.columnChartConfig.primaryData = loginTotal
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  margin-top: 16px;
+  padding: 20px;
+  background-color: #fff;
+}
+</style>
diff --git a/src/views/dashboard/ChangeSecret/index.vue b/src/views/dashboard/ChangeSecret/index.vue
new file mode 100644
index 000000000..8b07d473d
--- /dev/null
+++ b/src/views/dashboard/ChangeSecret/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <Page>
+    <div v-if="this.$hasPerm('accounts.view_changesecretautomation')">
+
+      <div>
+        <SwitchDate class="switch-date" @change="onChange" />
+      </div>
+
+      <el-row type="flex">
+
+        <el-col :span="18">
+          <CardSummary class="card-summary" :days="days" />
+        </el-col>
+
+        <el-col :span="6">
+          <DataSummary class="data-summary" :days="days" style="margin-left: 1rem" />
+        </el-col>
+
+      </el-row>
+
+      <el-row type="flex" :gutter="20">
+        <el-col :span="12" style="margin-top: 2rem">
+          <FailedAccountSummary />
+        </el-col>
+        <el-col :span="12" style="margin-top: 2rem">
+          <FailedAccountSummary />
+        </el-col>
+      </el-row>
+
+      <el-row type="flex" style="flex-direction: column">
+        <el-col :span="24">
+          <AccountSummary class="account-summary" :days="days" />
+        </el-col>
+      </el-row>
+
+    </div>
+    <Page403 v-else />
+  </Page>
+</template>
+
+<script>
+import { Page } from '@/layout/components'
+import SwitchDate from '../components/SwitchDate'
+import FailedAccountSummary from './FailedAccountSummary.vue'
+import DataSummary from './DataSummary.vue'
+import CardSummary from './CardSummary.vue'
+import AccountSummary from './AccountSummary.vue'
+import Page403 from '@/views/403'
+
+export default {
+  components: {
+    AccountSummary,
+    Page,
+    SwitchDate,
+    DataSummary,
+    FailedAccountSummary,
+    CardSummary,
+    Page403
+  },
+  data() {
+    return {
+      days: localStorage.getItem('dashboardDays') || '7'
+    }
+  },
+  methods: {
+    onChange(val) {
+      this.days = val
+      localStorage.setItem('dashboardDays', val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .page ::v-deep .page-heading {
+    display: none;
+  }
+
+</style>