fix(frontend): 告警组问题修复 #1487

dbm-ui/frontend/.eslintignore

@@ -2,3 +2,4 @@ node_modules/
 dist/
 public/
 src/types/auto-imports.d.ts
+patch/

dbm-ui/frontend/package.json

@@ -18,6 +18,7 @@
     "@blueking/bk-weweb": "0.0.15",
     "@blueking/bkflow.js": "0.1.10",
     "@blueking/ip-selector": "0.0.1-beta.126",
+    "@icon-cool/bk-icon-bk-biz-components": "0.0.4",
     "@vueuse/core": "10.2.1",
     "axios": "1.2.1",
     "bkui-vue": "0.0.2-beta.68",

dbm-ui/frontend/patch/user-selector/alternate-item.tsx

@@ -0,0 +1,120 @@
+// @ts-nocheck
+import { computed, defineComponent, toRefs, withModifiers } from 'vue';
+
+import RenderAvatar from './render-avatar';
+import RenderList from './render-list';
+import tooltips from './tooltips';
+
+export default defineComponent({
+  name: 'AlternateItem',
+  directives: {
+    tooltips,
+  },
+  // props: ['selector', 'user', 'keyword', 'index'],
+  props: {
+    selector: {
+      type: Object,
+    },
+    user: {
+      type: Object,
+    },
+    keyword: {
+      type: String,
+    },
+    index: {
+      type: Number,
+    },
+  },
+  setup(props) {
+    const { selector, user, keyword } = toRefs(props);
+    const disabled = computed(() => selector.value.disabledUsers.includes(user.value.username));
+    const getItemContent = () => {
+      const [nameWithoutDomain, domain] = user.value.username.split('@');
+      let displayText = nameWithoutDomain;
+      if (keyword.value) {
+        displayText = displayText.replace(
+          new RegExp(keyword.value, 'g'),
+          `<span>${keyword.value}</span>`,
+        );
+      }
+      const displayUsername = selector.value.displayDomain && domain
+        ? `${displayText}@${domain}`
+        : displayText;
+
+      const displayName = user.value.display_name;
+      if (displayName) {
+        return `${displayUsername}(${displayName})`;
+      }
+
+      return displayUsername;
+    };
+    const getTitle = () => selector.value.getDisplayText(user.value);
+
+    return {
+      disabled,
+      getItemContent,
+      getTitle,
+    };
+  },
+  render() {
+    return (
+      <li
+        class={[
+          'alternate-item',
+          this.index === this.selector.highlightIndex ? 'highlight' : '',
+          this.disabled && !this.selector.renderList ? 'disabled' : '',
+        ]}
+        onClick={e => e.stopPropagation()}
+        onMousedown={withModifiers(() => this.selector.handleUserMousedown(this.user, this.disabled), ['left', 'stop'])}
+        onMouseup={withModifiers(() => this.selector.handleUserMouseup(this.user, this.disabled), ['left', 'stop'])}>
+        {
+          this.selector.renderList
+            ? <>
+              <RenderList
+                selector={this.selector}
+                keyword={this.keyword}
+                user={this.user}
+                disabled={this.disabled}
+              >
+              </RenderList>
+            </>
+            : <>
+              {
+                this.selector.tagType === 'avatar'
+                  ? <>
+                    <RenderAvatar
+                      class="item-avatar"
+                      user={this.user}
+                      urlMethod={this.selector.avatarUrl}>
+                    </RenderAvatar>
+                  </>
+                  : null
+              }
+              {
+                this.selector.displayListTips && this.user.category_name
+                  ? <>
+                    <span
+                      class="item-folder"
+                      v-tooltips={{
+                        placement: 'right',
+                        interactive: true,
+                        theme: 'light list-item-tips',
+                        content: this.user.category_name,
+                        offset: [0, 18],
+                      }}>
+                      { this.user.category_name }
+                    </span>
+                  </>
+                  : null
+              }
+              <span
+                class="item-name"
+                title={this.getTitle()}
+                v-html={this.getItemContent()}
+              ></span>
+            </>
+        }
+      </li>
+    );
+  },
+});

dbm-ui/frontend/patch/user-selector/alternate-list.tsx

@@ -0,0 +1,165 @@
+/* eslint-disable no-prototype-builtins */
+
+import { hideAll } from 'tippy.js';
+import {
+  type ComponentPublicInstance,
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  type HTMLAttributes,
+  nextTick,
+  ref,
+  watch,
+  withModifiers,
+} from 'vue';
+
+import AlternateItem from './alternate-item';
+import instanceStore from './instance-store';
+
+export default defineComponent({
+  setup() {
+    const { proxy } = getCurrentInstance();
+    instanceStore.setInstance('alternateContent', 'alternateList', proxy);
+
+    const selector = ref(null);
+    const keyword = ref('');
+    const next = ref(true);
+    const loading = ref(true);
+    const matchedUsers = ref([]);
+    const wrapperStyle = computed(() => {
+      const style: any = {};
+      if (selector.value?.panelWidth) {
+        style.width = `${parseInt(selector.value.panelWidth, 10)}px`;
+      }
+      return style;
+    });
+    const listStyle = computed(() => {
+      const style = {
+        'max-height': '192px',
+      };
+      if (selector.value) {
+        const maxHeight = parseInt(selector.value.listScrollHeight, 10);
+        if (!isNaN(maxHeight)) {
+          style['max-height'] = `${maxHeight}px`;
+        }
+      }
+      return style;
+    });
+    const getIndex = (index: number, childIndex = 0) => {
+      let flattenedIndex = 0;
+      matchedUsers.value.slice(0, index).forEach((user) => {
+        if (user.hasOwnProperty('children')) {
+          flattenedIndex += user.children.length;
+        } else {
+          flattenedIndex += 1;
+        }
+      });
+      return flattenedIndex + childIndex;
+    };
+
+    const handleScroll = () => {
+      hideAll({ exclude: selector.value.inputRef, duration: 0 });
+      if (loading.value || !next.value) {
+        return false;
+      }
+      const list = alternateList.value;
+      const threshold = 32;
+      if (list.scrollTop + list.clientHeight > list.scrollHeight - threshold) {
+        selector.value.search(keyword.value, next.value);
+      }
+    };
+
+    watch(keyword, () => {
+      alternateItem.value = [];
+      nextTick(() => {
+        alternateList.value.scrollTop = 0;
+      });
+    });
+
+    const alternateListContainer = ref(null);
+    const alternateList = ref(null);
+    const alternateItem = ref([]);
+
+    const setRef = (el: HTMLElement | ComponentPublicInstance | HTMLAttributes) => {
+      alternateItem.value.push(el);
+    };
+
+    return {
+      selector,
+      keyword,
+      next,
+      loading,
+      matchedUsers,
+      wrapperStyle,
+      listStyle,
+      getIndex,
+      handleScroll,
+      alternateListContainer,
+      alternateList,
+      alternateItem,
+      setRef,
+    };
+  },
+  render() {
+    return (
+      <div ref="alternateListContainer"
+        class={[
+          'user-selector-alternate-list-wrapper',
+          this.selector?.displayListTips ? 'has-folder' : '',
+          this.loading ? 'is-loading' : '',
+        ]}
+        style={this.wrapperStyle}>
+        <ul
+          class="alternate-list"
+          ref="alternateList"
+          style={this.listStyle}
+          onScroll={() => void this.handleScroll()}>
+          {
+            this.matchedUsers.map((user, index) => {
+              if (user.hasOwnProperty('children')) {
+                return <>
+                  <li
+                    class="alternate-group"
+                    onClick={e => e.stopPropagation()}
+                    onMousedown={withModifiers((): any => void this.selector.handleGroupMousedown(), ['left', 'stop'])}
+                    onMouseup={withModifiers((): any => void this.selector.handleGroupMouseup(), ['left', 'stop'])}>
+                    { `${user.display_name}(${user.children.length})` }
+                  </li>
+                  {
+                    user.children.map((child: any, childIndex: number) => <>
+                      <AlternateItem
+                        // ref="alternateItem"
+                        ref={(el: HTMLElement | ComponentPublicInstance | HTMLAttributes) => void this.setRef(el)}
+                        index={this.getIndex(index, childIndex)}
+                        selector={this.selector}
+                        user={child}
+                        keyword={this.keyword} />
+                    </>)
+                  }
+                </>;
+              }
+              return <>
+                <AlternateItem
+                  // ref="alternateItem"
+                  ref={(el: HTMLElement | ComponentPublicInstance | HTMLAttributes) => void this.setRef(el)}
+                  selector={this.selector}
+                  user={user}
+                  index={this.getIndex(index)}
+                  keyword={this.keyword} />
+              </>;
+            })
+          }
+        </ul>
+        {
+           (!this.loading && !this.matchedUsers.length)
+             ? <>
+              <p class="alternate-empty" >
+                { this.selector.emptyText }
+              </p>
+             </>
+             : null
+        }
+      </div>
+    );
+  },
+});

dbm-ui/frontend/patch/user-selector/index.ts

@@ -0,0 +1,31 @@
+import type { App, Plugin } from 'vue';
+
+import request from './request';
+import UserSelector from './selector.vue';
+
+// UserSelector.install = (Vue) => {
+//   window.$vueApp.component(UserSelector.name, UserSelector);
+// };
+
+// export default UserSelector;
+
+// export { request };
+
+export interface OriginComponent {
+  name: string;
+  install?: Plugin;
+}
+
+const withInstall = <T extends OriginComponent>(component: T): T & Plugin  => {
+  // eslint-disable-next-line no-param-reassign
+  component.install = function (app: App, { prefix } = {}) {
+    const pre = app.config.globalProperties.bkUIPrefix || prefix || 'Bk';
+    app.component(pre + component.name, component);
+  };
+  return component as T & Plugin;
+};
+
+export { request };
+
+const BkUserSelector = withInstall(UserSelector);
+export default BkUserSelector;

dbm-ui/frontend/patch/user-selector/instance-store.ts

@@ -0,0 +1,16 @@
+import { type ComponentPublicInstance } from 'vue';
+
+const store = {};
+
+export default {
+  setInstance(group: string, id: string, proxy: ComponentPublicInstance) {
+    if (!store[group]) {
+      store[group] = {};
+    }
+
+    store[group][id] = proxy;
+  },
+  getInstance(group: string, id: string) {
+    return store[group][id];
+  },
+};

dbm-ui/frontend/patch/user-selector/render-alternate.ts

@@ -0,0 +1,20 @@
+// import * as Vue from 'vue';
+// export default {
+//   name: 'render-alternate',
+//   data() {
+//     return { selector: null };
+//   },
+//   render() {
+//     return this.selector.defaultAlternate(Vue.h);
+//   },
+// };
+
+import { h } from 'vue';
+
+export default {
+  name: 'render-alternate',
+  props: ['selector'],
+  setup(props: any): any {
+    return () => props.selector.defaultAlternate(h);
+  },
+};