Skip to content

Commit

Permalink
feat: 新版首页 (#4861)
Browse files Browse the repository at this point in the history 
Co-authored-by: EmilyMei <447693773@qq.com>
Co-authored-by: goodGai <106252008+goodGai@users.noreply.github.com>
  • Loading branch information
@liangling0628 @EmilyMei @goodGai
3 people authored Jan 17, 2025
1 parent 0e7d55e commit 1704490
Show file tree
Hide file tree
Showing 55 changed files with 6,771 additions and 171 deletions.
25 changes: 24 additions & 1 deletion bkmonitor/webpack/src/apm/pages/home/apm-home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import type { INavItem } from 'monitor-pc/pages/monitor-k8s/typings';

import './apm-home.scss';
import '@blueking/search-select-v3/vue2/vue2.css';
import { addAccessRecord } from 'monitor-api/modules/overview';

@Component({})
export default class AppList extends Mixins(authorityMixinCreate(authorityMap)) {
Expand Down Expand Up @@ -205,7 +206,7 @@ export default class AppList extends Mixins(authorityMixinCreate(authorityMap))
: String(appSearchParams.is_enabled_profiling),
},
};
this.$router.replace(routerParams).catch(() => {});
this.$router.replace(routerParams).catch(() => { });
}
/**
* @description 时间范围
Expand All @@ -224,6 +225,27 @@ export default class AppList extends Mixins(authorityMixinCreate(authorityMap))
this.refreshKey++;
}

/**
* apm 服务埋点
* @param item 调整的服务相关参数
*/
handleGotoService(item) {
try {
const queryString = item.url.split('?')[1];
const params = new URLSearchParams(queryString);
// 获取 filter-app_name 的值
const appName = params.get('filter-app_name');
const app = this.appList.find(app => app.app_name === appName);
// 新版首页最近使用埋点
addAccessRecord({
function: 'apm_service',
config: { application_id: app.application_id, service_name: item.value },
});
} catch (error) {
console.log('error', error);
}
}

/**
* @description 自动刷新
* @param val
Expand Down Expand Up @@ -504,6 +526,7 @@ export default class AppList extends Mixins(authorityMixinCreate(authorityMap))
authority={this.appData?.permission[authorityMap.VIEW_AUTH]}
authorityDetail={authorityMap.VIEW_AUTH}
timeRange={this.timeRange}
onGoToServiceByLink={val => this.handleGotoService(val)}
onRouteUrlChange={this.handleReplaceRouteUrl}
/>
</div>
Expand Down
6 changes: 6 additions & 0 deletions bkmonitor/webpack/src/apm/pages/home/components/apm-home-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export default class ApmServiceList extends tsc<
IProps,
{
onRouteUrlChange: (params: Record<string, any>) => void;
onGoToServiceByLink?: () => void;
}
> {
@Prop() appData: Partial<IAppListItem>;
Expand Down Expand Up @@ -510,6 +511,10 @@ export default class ApmServiceList extends tsc<
});
}

handleGotoService(item) {
this.$emit('goToServiceByLink', item);
}

/**
* @description 清空搜索条件
* @param value
Expand Down Expand Up @@ -690,6 +695,7 @@ export default class ApmServiceList extends tsc<
pagination={this.pagination}
scrollLoading={false}
onCollect={val => this.handleCollect(val)}
onGoToServiceByLink={val => this.handleGotoService(val)}
onLimitChange={this.handlePageLimitChange}
onPageChange={this.handlePageChange}
onSortChange={val => this.handleSortChange(val as any)}
Expand Down
14 changes: 12 additions & 2 deletions bkmonitor/webpack/src/fta-solutions/pages/event/event.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -607,8 +607,10 @@ class Event extends Mixins(authorityMixinCreate(eventAuth)) {
});
vm.handleBatchAlert(params.batchAction);
} else {
// 正常进入告警页情况下不打开详情，只有通过告警通知进入的才展开详情
const needShowDetail = !!vm.$route.query.collectId && location.search.includes('specEvent');
// 正常进入告警页情况下不打开详情，只有通过告警通知进入的才展开详情（带collectId）
// 新版首页搜索跳转过来打开详情(带alertId)
const needShowDetail =
(!!vm.$route.query.collectId || !!vm.$route.query.alertId) && location.search.includes('specEvent');
if (needShowDetail) {
vm.handleFirstShowDetail();
}
Expand Down Expand Up @@ -736,6 +738,14 @@ class Event extends Mixins(authorityMixinCreate(eventAuth)) {
/* 带collectId是事件范围设为近15天 */
defaultData.timeRange = ['now-30d', 'now'];
}

/** 新版首页带alertId跳转事件中心 */
if (defaultData.alertId) {
defaultData.queryString = defaultData.queryString
? `${defaultData.queryString} AND id : ${defaultData.alertId}`
: `id : ${defaultData.alertId}`;
}

/** 处理指标参数 */
if (defaultData.metricId?.length) {
const metricStr = `metric : (${defaultData.metricId.map(item => `"${item}"`).join(' OR ')})`;
Expand Down
22 changes: 11 additions & 11 deletions bkmonitor/webpack/src/monitor-pc/common/constant.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ export const SPACE_TYPE_MAP = {
backgroundColor: '#2B354D',
},
light: {
color: '#63656E',
backgroundColor: '#CDE8FB',
color: '#3A84FF',
backgroundColor: '#EDF4FF',
},
},
default: {
Expand All @@ -48,7 +48,7 @@ export const SPACE_TYPE_MAP = {
},
light: {
color: '#63656E',
backgroundColor: '#DEDEDE',
backgroundColor: '#F0F1F5',
},
},
bkci: {
Expand All @@ -58,8 +58,8 @@ export const SPACE_TYPE_MAP = {
backgroundColor: '#4C3232',
},
light: {
color: '#63656E',
backgroundColor: '#F8D8D4',
color: '#E71818',
backgroundColor: '#FFEBEB',
},
},
bcs: {
Expand All @@ -69,8 +69,8 @@ export const SPACE_TYPE_MAP = {
backgroundColor: '#453921',
},
light: {
color: '#63656E',
backgroundColor: '#FFF2C9',
color: '#E38B02',
backgroundColor: '#FDEED8',
},
},
paas: {
Expand All @@ -80,8 +80,8 @@ export const SPACE_TYPE_MAP = {
backgroundColor: '#223B2B',
},
light: {
color: '#63656E',
backgroundColor: '#D8EDD9',
color: '#14A568',
backgroundColor: '#E4FAF0',
},
},
bksaas: {
Expand All @@ -91,8 +91,8 @@ export const SPACE_TYPE_MAP = {
backgroundColor: '#223B2B',
},
light: {
color: '#63656E',
backgroundColor: '#D8EDD9',
color: '#14A568',
backgroundColor: '#E4FAF0',
},
},
};
Expand Down
129 changes: 22 additions & 107 deletions bkmonitor/webpack/src/monitor-pc/components/ai-whale/ai-whale.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,12 @@
import { Component, Prop, Ref, Watch } from 'vue-property-decorator';
import { Component as tsc } from 'vue-tsx-support';

import AiBlueking, {
RoleType,
type IMessage,
ChatHelper,
MessageStatus,
type ISendData,
} from '@blueking/ai-blueking/vue2';
import AiBlueking, { RoleType, type ChatHelper } from '@blueking/ai-blueking/vue2';
import { fetchRobotInfo } from 'monitor-api/modules/commons';
import { copyText, getCookie, random } from 'monitor-common/utils/utils';
import { copyText, random } from 'monitor-common/utils/utils';
import { throttle } from 'throttle-debounce';

import aiWhaleStore from '../../store/modules/ai-whale';
import { getEventPaths } from '../../utils';

import './ai-whale.scss';
Expand Down Expand Up @@ -149,9 +144,7 @@ export default class AiWhale extends tsc<{
lastRecordTime = 0;

/* AI Blueking */
messages: IMessage[] = [];
prompts = questions.map((v, index) => ({ id: index + 1, content: window.i18n.tc(v) }));
loading = false;
background = '#f5f7fa';
headBackground = 'linear-gradient(267deg, #2dd1f4 0%, #1482ff 95%)';
positionLimit = {
Expand All @@ -166,24 +159,34 @@ export default class AiWhale extends tsc<{
bottom: 20,
top: window.innerHeight - 600 - 20,
};
showAIBlueking = false;
chatHelper: ChatHelper = null;
chartId = random(10);
mousemoveFn: (event: MouseEvent) => void;
resizeFn = () => {};

get showAIBlueking() {
return aiWhaleStore.showAIBlueking;
}

get messages() {
return aiWhaleStore.messages;
}

get loading() {
return aiWhaleStore.loading;
}
get space() {
const { bizId } = this.$store.getters;
return this.$store.getters.bizList.find(item => item.id === bizId) || { name: '', type_name: '' };
}
@Watch('enableAiAssistant', { immediate: true })
enableAiAssistantChange() {
this.enableAiAssistant && this.initStreamChatHelper();
this.enableAiAssistant && aiWhaleStore.initStreamChatHelper();
}
created() {
this.mousemoveFn = throttle(50, this.handleMousemove);
this.resizeFn = throttle(50, this.handleWindowResize);
this.messages = this.getDefaultMessage();
aiWhaleStore.setDefaultMessage();
window.addEventListener('resize', this.resizeFn);
}

Expand Down Expand Up @@ -442,114 +445,26 @@ export default class AiWhale extends tsc<{
}#/strategy-config/add`;
window.open(url);
}
initStreamChatHelper() {
// 聊天开始
const handleStart = () => {
this.loading = true;
this.messages.push({
role: RoleType.Assistant,
content: this.$tc('内容正在生成中...'),
status: MessageStatus.Loading,
});
};
// 接收消息
const handleReceiveMessage = (message: string) => {
const currentMessage = this.messages.at(-1);
if (currentMessage.content === this.$tc('内容正在生成中...')) {
// 如果是loading状态，直接覆盖
currentMessage.content = message;
} else if (currentMessage.status === 'loading') {
// 如果是后续消息，就追加消息
currentMessage.content += message;
}
};
// 聊天结束
const handleEnd = () => {
this.loading = false;
const currentMessage = this.messages.at(-1);
// loading 情况下终止
if (currentMessage.content === this.$tc('内容正在生成中...')) {
currentMessage.content = '聊天内容已中断';
currentMessage.status = MessageStatus.Error;
return;
}
currentMessage.status = MessageStatus.Success;
};
// 错误处理
const handleError = (message: string) => {
if (message.includes('user authentication failed')) {
// 未登录，跳转登录
const loginUrl = new URL(process.env.BK_LOGIN_URL);
loginUrl.searchParams.append('c_url', location.origin);
window.location.href = loginUrl.href;
} else {
// 处理错误消息
const currentMessage = this.messages.at(-1);
currentMessage.status = MessageStatus.Error;
currentMessage.content = message;
this.loading = false;
}
};
this.chatHelper = new ChatHelper(
`${window.site_url}rest/v2/ai_assistant/chat/chat_v2/`,
handleStart,
handleReceiveMessage,
handleEnd,
handleError
);
}
handleAiBluekingClear() {
this.messages = this.getDefaultMessage();
}
handleAiBluekingSend(message: ISendData) {
// 记录当前消息记录
// const chatHistory = [...this.messages];
// 添加一条消息
this.messages.push({
role: RoleType.User,
content: message.content,
cite: message.cite,
});
// 根据参数构造输入内容
const input = message.prompt
? message.prompt // 如果有 prompt，直接使用
: message.cite
? `${message.content}: ${message.cite}` // 如果有 cite，拼接 content 和 cite
: message.content;
// ai 消息，id是唯一标识当前流，调用 chatHelper.stop 的时候需要传入
this.chatHelper.stream(
{
query: input,
type: 'nature',
polish: true,
stream: true,
bk_biz_id: window.bk_biz_id,
},
this.chartId,
{
'X-CSRFToken': window.csrf_token || getCookie(window.csrf_cookie_name),
'X-Requested-With': 'XMLHttpRequest',
'Source-App': window.source_app,
}
);
aiWhaleStore.setDefaultMessage();
}
handleAiBluekingStop() {
this.chatHelper.stop(this.chartId);
}
handleAiBluekingClose() {
this.showAIBlueking = false;
aiWhaleStore.setShowAIBlueking(false);
}
handleAiBluekingChoosePrompt(prompt) {
console.log('choose prompt', prompt);
}
handleToggleAiBlueking() {
this.showAIBlueking = !this.showAIBlueking;
aiWhaleStore.setShowAIBlueking(!this.showAIBlueking);
// this.startPosition.left = this.whalePosition.left +;
}
handleAiBluekingClick(v: string) {
const data = JSON.parse(v);
if (data?.type !== 'send') return;
this.handleAiBluekingSend(data);
aiWhaleStore.handleAiBluekingSend(data);
}
createAIContent() {
const countSpan = count => {
Expand Down Expand Up @@ -802,9 +717,9 @@ export default class AiWhale extends tsc<{
onChoose-prompt={this.handleAiBluekingChoosePrompt}
onClear={this.handleAiBluekingClear}
onClose={this.handleAiBluekingClose}
onSend={this.handleAiBluekingSend}
onSend={aiWhaleStore.handleAiBluekingSend}
onShowDialog={(v: boolean) => {
this.showAIBlueking = v;
aiWhaleStore.setShowAIBlueking(v);
}}
onStop={this.handleAiBluekingStop}
/>
Expand Down
Loading

0 comments on commit 1704490

Please sign in to comment.