Merge branch 'pam' of github.com:jumpserver/lina into pam

src/views/assets/Asset/AssetDetail/PermUser.vue

@@ -50,9 +50,7 @@ export default {
         },
         columnsMeta: {
           name: {
-            formatter: (row) => {
-              return vm.$hasPerm('users.view_user') ? DetailFormatter : ''
-            },
+            formatter: vm.$hasPerm('users.view_user') ? DetailFormatter : '',
             formatterArgs: {
               route: 'UserDetail'
             }

src/views/dashboard/Pam/MissionSummery.vue

@@ -41,57 +41,42 @@ export default {
   computed: {
     chartOption() {
       return {
-        tooltip: {
-          trigger: 'item',
-          formatter: '{b}: {c} ({d}%)',
-          backgroundColor: 'rgba(255, 255, 255, 0.9)',
-          borderColor: '#eee',
-          borderWidth: 1,
-          padding: [10, 15],
-          textStyle: {
-            color: '#666'
-          }
-        },
         legend: {
-          type: 'scroll',
-          orient: 'horizontal',
-          top: 0,
-          left: 0,
-          right: 0,
+          orient: 'vertical',
+          top: '13%',
+          right: '15%',
           itemGap: 20,
           textStyle: {
             color: '#666',
             fontSize: 12
           },
           icon: 'circle',
           itemWidth: 8,
-          itemHeight: 8
+          itemHeight: 8,
+          formatter: (name) => {
+            const data = [
+              { name: '账号收集任务', value: this.counter.total_count_gathered_account_automation },
+              { name: '账号推送任务', value: this.counter.total_count_push_account_automation },
+              { name: '账号备份任务', value: this.counter.total_count_backup_account_automation },
+              { name: '风险账号', value: this.counter.total_count_risk_account },
+              { name: '集成应用', value: this.counter.total_count_integration_application }
+            ]
+            const item = data.find(item => item.name === name)
+
+            return name.padEnd(10, '\u2003') + (item.value || 0)
+          }
         },
         series: [
           {
             name: '任务分布',
             type: 'pie',
-            radius: ['45%', '65%'],
-            center: ['50%', '55%'],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 10,
-              borderColor: '#fff',
-              borderWidth: 8
-            },
+            radius: ['50%', '70'],
+            center: ['25%', '50%'],
             label: {
-              show: true,
-              position: 'outside',
-              formatter: '{b}\n{c}',
-              color: '#666',
-              fontSize: 12,
-              lineHeight: 18
+              show: false
             },
             labelLine: {
-              show: true,
-              length: 15,
-              length2: 10,
-              smooth: true
+              show: false
             },
             data: [
               {
@@ -152,17 +137,15 @@ export default {
   },
   methods: {
     async getResourcesCount() {
-      return this.$axios.get('/api/v1/accounts/pam-dashboard/',
-        {
-          params: {
-            total_count_gathered_account_automation: 1,
-            total_count_push_account_automation: 1,
-            total_count_backup_account_automation: 1,
-            total_count_risk_account: 1,
-            total_count_integration_application: 1
-          }
+      return this.$axios.get('/api/v1/accounts/pam-dashboard/', {
+        params: {
+          total_count_gathered_account_automation: 1,
+          total_count_push_account_automation: 1,
+          total_count_backup_account_automation: 1,
+          total_count_risk_account: 1,
+          total_count_integration_application: 1
         }
-      )
+      })
     },
     initChart() {
       this.chart = echarts.init(this.$refs.chartRef)
@@ -192,7 +175,12 @@ export default {
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .header {
-    padding: 16px 20px 0;
+    padding: 1.25rem;
+
+    .content {
+      justify-content: flex-start;
+      padding: unset;
+    }
   }
 
   .content {
@@ -205,7 +193,7 @@ export default {
 
     .chart-container {
       width: 100%;
-      height: 420px;
+      height: 226px;
     }
   }
 }

src/views/dashboard/Pam/RiskSummary.vue

@@ -1,14 +1,23 @@
 <template>
-  <div class="box">
-    <div style="margin-bottom: 12px;">
+  <div class="card">
+    <div class="title-section">
       <Title :config="config" />
     </div>
-    <div class="content">
-      <el-row justify="space-between" type="flex">
-        <el-col v-for="item of summaryItems" :key="item.title" :md="8" :sm="12" :xs="12">
+
+    <div class="metrics-section">
+      <template v-for="item of summaryItems">
+        <SummaryCard
+          :key="item.title"
+          :body="item.body"
+          :title="item.title"
+          class="metric-item"
+        />
+      </template>
+      <!-- <el-row :gutter="20">
+        <el-col v-for="item of summaryItems" :key="item.title" :md="6" :sm="12" :xs="12">
           <SummaryCard :body="item.body" :title="item.title" />
         </el-col>
-      </el-row>
+      </el-row> -->
     </div>
   </div>
 </template>
@@ -38,10 +47,10 @@ export default {
     summaryItems() {
       return [
         {
-          title: this.$t('LongTimeNoLogin'),
+          title: this.$t('LeakedPassword'),
           body: {
-            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
-            count: this.counter.total_long_time_no_login_accounts
+            count: this.counter.total_leaked_password_accounts,
+            disabled: true
           }
         },
         {
@@ -52,16 +61,17 @@ export default {
           }
         },
         {
-          title: this.$t('LongTimeNoChangeSecret'),
+          title: this.$t('LongTimeNoLogin'),
           body: {
-            count: this.counter.total_long_time_change_password_accounts,
-            disabled: true
+            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
+            count: this.counter.total_long_time_no_login_accounts
           }
         },
+
         {
-          title: this.$t('LeakedPassword'),
+          title: this.$t('LongTimeNoChangeSecret'),
           body: {
-            count: this.counter.total_leaked_password_accounts,
+            count: this.counter.total_long_time_change_password_accounts,
             disabled: true
           }
         },
@@ -71,6 +81,18 @@ export default {
             count: this.counter.total_repeated_password_accounts,
             disabled: true
           }
+        },
+        {
+          title: 'Unmanaged'
+        },
+        {
+          title: 'Password expiration'
+        },
+        {
+          title: 'Wrong password'
+        },
+        {
+          title: 'No admin'
         }
       ]
     }
@@ -100,34 +122,49 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.box {
-  padding: 20px;
-  background: #FFFFFF;
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  width: 100%;
+  height: 100%;
+  padding: 1.25rem;
+  background-color: #FFF;
+  overflow: hidden;
+
+  .metrics-section {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 1.25rem;
+
+    .metric-item {
+      width: 25%;
+      cursor: pointer;
+      transition: all 0.3s ease-in-out;
 
-  .content {
-    .el-col {
-      padding-left: 16px;
-      border-left: 1px solid #EFF0F1;
+      ::v-deep .summary-header {
+        .title {
+          color: #646A73;
+          font-size: 0.9rem;
+          font-weight: 400;
+          line-height: 1.4rem;
+          text-transform: unset;
+        }
 
-      &:first-child {
-        padding-left: 0;
-        border-left: none;
+        h3 span {
+          font-size: 1.5rem;
+        }
       }
-    }
 
-    .sub {
-      font-style: normal;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 20px;
-      color: #646A73;
-    }
+      &:hover {
+        transform: translateY(-0.2rem);
 
-    .num {
-      font-style: normal;
-      font-weight: 500;
-      font-size: 24px;
-      cursor: pointer;
+        ::v-deep .no-margins {
+          .num {
+            color: var(--color-primary);
+          }
+        }
+      }
     }
   }
 }

src/views/dashboard/Pam/SummaryChart.vue

@@ -16,6 +16,8 @@
       </div>
     </div>
 
+    <el-divider />
+
     <div class="metrics-section">
       <div
         v-for="item in summaryItems"
@@ -76,12 +78,17 @@ export default {
 <style lang="scss" scoped>
 $text-color: #646A73;
 
+.el-divider--horizontal {
+  margin: unset !important;
+}
+
 .card {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
   width: 100%;
   height: 100%;
+  padding: 1.25rem;
   background-color: #FFF;
   overflow: hidden;