feat: 容器场景开发

bkmonitor/webpack/src/monitor-pc/pages/monitor-k8s/components/k8s-detail-slider/k8s-detail-slider.scss

@@ -37,7 +37,10 @@
 
         .title-btn {
           margin-right: 8px;
-          color: #4d4f56;
+
+          &.is-default {
+            color: #4d4f56;
+          }
 
           .icon-monitor {
             margin-right: 6px;

bkmonitor/webpack/src/monitor-pc/pages/monitor-k8s/components/k8s-detail-slider/k8s-detail-slider.tsx

@@ -28,18 +28,18 @@ import { Component as tsc } from 'vue-tsx-support';
 
 import CommonDetail from '../common-detail';
 
-import type { K8sTableColumnKeysEnum } from '../k8s-table-new/k8s-table-new';
+import type { K8sTableClickEvent, K8sTableGroupByEvent } from '../k8s-table-new/k8s-table-new';
 
 import './k8s-detail-slider.scss';
 
 interface IEventDetailSlider {
   isShow?: boolean;
-  activeGroup: K8sTableColumnKeysEnum;
-  //   podId: string;
-  //   type: TType;
+  activeItem: K8sTableClickEvent;
+  groupFilters: Array<number | string>;
 }
 interface IEvent {
   onShowChange?: boolean;
+  onGroupChange: (item: K8sTableGroupByEvent) => void;
 }
 
 // 事件详情 | 处理记录详情
@@ -48,16 +48,33 @@ export type TType = 'eventDetail' | 'handleDetail';
 @Component
 export default class EventDetailSlider extends tsc<IEventDetailSlider, IEvent> {
   @Prop({ type: Boolean, default: false }) isShow: boolean;
-  @Prop({ type: String, default: '' }) activeGroup: K8sTableColumnKeysEnum;
-  // @Prop({ type: String, default: '' }) podId: string;
+  @Prop({ type: Object, default: () => ({ row: null, column: null }) }) activeItem: K8sTableClickEvent;
+  @Prop({ type: Array, default: () => [] }) groupFilters: Array<number | string>;
 
   loading = false;
 
+  get activeTag() {
+    return this.activeItem?.column?.id || '--';
+  }
+
+  get activeValue() {
+    return this.activeItem.row?.[this.activeTag] || '--';
+  }
+
+  get hasGroup() {
+    return this.groupFilters.includes(this.activeTag);
+  }
+
   @Emit('showChange')
   emitIsShow(v: boolean) {
     return v;
   }
 
+  @Emit('groupChange')
+  groupChange(item: K8sTableGroupByEvent) {
+    return item;
+  }
+
   // 隐藏详情
   handleHiddenSlider() {
     this.emitIsShow(false);
@@ -68,18 +85,25 @@ export default class EventDetailSlider extends tsc<IEventDetailSlider, IEvent> {
     return (
       <div class='title-wrap'>
         <div class='title-left'>
-          <span class='title-tag'>Pod</span>
-          <span class='title-value'> bkbase-puller-datanode-inland-bcs1-1</span>
-          <span class='icon-monitor icon-copy-link title-icon' />
+          <span class='title-tag'>{this.activeTag}</span>
+          <span class='title-value'> {this.activeValue}</span>
+          <span
+            class='icon-monitor icon-copy-link title-icon'
+            v-bk-tooltips={{ content: '复制链接', placement: 'right' }}
+          />
         </div>
         <div class='title-right'>
           <bk-button class='title-btn'>
             <span class='icon-monitor icon-a-sousuo ' />
             <span class='title-btn-label'>{this.$t('添加为筛选项')}</span>
           </bk-button>
-          <bk-button class='title-btn'>
-            <span class='icon-monitor icon-xiazuan ' />
-            <span class='title-btn-label'>{this.$t('下钻')}</span>
+          <bk-button
+            class={['title-btn', { 'is-default': !this.hasGroup }]}
+            theme={this.hasGroup ? 'primary' : 'default'}
+            onClick={() => this.groupChange({ id: this.activeTag, checked: !this.hasGroup })}
+          >
+            <span class={['icon-monitor', 'icon-xiazuan', { 'is-active': this.hasGroup }]} />
+            <span class='title-btn-label'>{this.$t(`${this.hasGroup ? '移除' : ''}下钻`)}</span>
           </bk-button>
         </div>
       </div>

bkmonitor/webpack/src/monitor-pc/pages/monitor-k8s/components/k8s-table-new/k8s-table-new.tsx

@@ -322,7 +322,7 @@ export default class K8sTableNew extends tsc<K8sTableNewProps, K8sTableNewEvent>
     const hasGroup = this.groupFilters.includes(column.id);
     return (
       <i
-        class={['icon-monitor', 'icon-xiazuan', { 'is-active': this.groupFilters.includes(column.id) }]}
+        class={['icon-monitor', 'icon-xiazuan', { 'is-active': hasGroup }]}
         v-bk-tooltips={{
           content: this.$t(`${hasGroup ? '移除' : ''}下钻`),
           interactive: false,

bkmonitor/webpack/src/monitor-pc/pages/monitor-k8s/monitor-k8s-new.tsx

@@ -109,6 +109,11 @@ export default class MonitorK8sNew extends tsc<object> {
   hideMetrics = JSON.parse(localStorage.getItem(HIDE_METRICS_KEY) || '[]');
   // 表格数据
   k8sTableData: any[] = [];
+  // table 点击选中数据项
+  k8sTableChooseItem: { row: any; column: K8sTableColumn } = {
+    row: null,
+    column: null,
+  };
   // 是否展示取消下钻
   showCancelDrill = false;
 
@@ -239,6 +244,19 @@ export default class MonitorK8sNew extends tsc<object> {
     return this.activeTab === K8sNewTabEnum.CHART;
   }
 
+  setGroupOption<T extends keyof IGroupOption>(option: IGroupOption, key: T, value: IGroupOption[T]) {
+    this.$set(option, key, value);
+  }
+
+  setGroupFilters(filters: Array<number | string>) {
+    this.$set(this, 'groupFilters', filters);
+  }
+
+  setK8sTableChooseItem(item: K8sTableClickEvent) {
+    this.$set(this.k8sTableChooseItem, 'column', item?.column || null);
+    this.$set(this.k8sTableChooseItem, 'row', item?.row || null);
+  }
+
   created() {
     this.getK8sList();
   }
@@ -335,10 +353,6 @@ export default class MonitorK8sNew extends tsc<object> {
     setData(0);
   }
 
-  setGroupFilters(filters: Array<number | string>) {
-    this.$set(this, 'groupFilters', filters);
-  }
-
   handleImmediateRefresh() {
     this.immediateRefresh = random(8);
   }
@@ -397,10 +411,6 @@ export default class MonitorK8sNew extends tsc<object> {
     this.cluster = cluster;
   }
 
-  setGroupOption<T extends keyof IGroupOption>(option: IGroupOption, key: T, value: IGroupOption[T]) {
-    this.$set(option, key, value);
-  }
-
   async handleTabChange(v: K8sNewTabEnum) {
     this.activeTab = v;
     this.getK8sList();
@@ -447,12 +457,15 @@ export default class MonitorK8sNew extends tsc<object> {
    * @param {K8sTableClickEvent} item
    */
   handleTextClick(item: K8sTableClickEvent) {
-    console.log('handleTextClick 待完善', item);
+    this.setK8sTableChooseItem(item);
     this.handleSliderChange(true);
   }
 
   handleSliderChange(v: boolean) {
     this.sliderShow = v;
+    if (!v) {
+      this.setK8sTableChooseItem(null);
+    }
   }
 
   tabContentRender() {
@@ -588,7 +601,10 @@ export default class MonitorK8sNew extends tsc<object> {
           </div>
         </div>
         <K8sDetailSlider
+          activeItem={this.k8sTableChooseItem}
+          groupFilters={this.groupFilters}
           isShow={this.sliderShow}
+          onGroupChange={this.handleTableGroupChange}
           onShowChange={this.handleSliderChange}
         />
       </div>