From 08889c7cc38394fa84e56666844fc5843bc488fe Mon Sep 17 00:00:00 2001 From: jo-hnny Date: Thu, 12 May 2022 17:19:39 +0800 Subject: [PATCH] feat(console): change create vm network mode to virtio (#1920) * feat(console): change network bridge model to virtio * feat(console): support query vm by vm name * fix(console): fix useFetch polling can't clear * fix(console): fix log tabel type not right --- .../logStash/actions/editLogStashActions.ts | 8 + .../modules/logStash/actions/logActions.ts | 74 +++++---- .../logStash/components/EditLogStashPanel.tsx | 157 +++++++++--------- .../components/LogStashTablePanel.tsx | 29 +++- .../modules/logStash/constants/ActionType.ts | 1 + .../src/modules/logStash/constants/Config.ts | 2 + .../modules/logStash/models/LogStashEdit.ts | 2 + web/console/src/webApi/virtual-machine.ts | 2 +- 8 files changed, 154 insertions(+), 121 deletions(-) diff --git a/web/console/src/modules/logStash/actions/editLogStashActions.ts b/web/console/src/modules/logStash/actions/editLogStashActions.ts index 9340b84473..95b029e064 100644 --- a/web/console/src/modules/logStash/actions/editLogStashActions.ts +++ b/web/console/src/modules/logStash/actions/editLogStashActions.ts @@ -209,6 +209,14 @@ export const editLogStashActions = { }; }, + // 设置文件路径类型 + setNodeLogPathType: (pathType: 'host' | 'container'): ReduxAction => { + return { + type: ActionType.NodeLogPathType, + payload: pathType + }; + }, + /** 输入主机文件的收集路径 */ inputNodeLogPath: (path: string): ReduxAction => { return { diff --git a/web/console/src/modules/logStash/actions/logActions.ts b/web/console/src/modules/logStash/actions/logActions.ts index 7e29bd9b2f..3d9f6584e6 100644 --- a/web/console/src/modules/logStash/actions/logActions.ts +++ b/web/console/src/modules/logStash/actions/logActions.ts @@ -15,9 +15,7 @@ * WARRANTIES OF ANY KIND, either express or implied. See the License for the * specific language governing permissions and limitations under the License. */ -import { - extend, generateQueryActionCreator, QueryState, RecordSet, ReduxAction, uuid -} from '@tencent/ff-redux'; +import { extend, generateQueryActionCreator, QueryState, RecordSet, ReduxAction, uuid } from '@tencent/ff-redux'; import { generateFetcherActionCreator } from '@tencent/qcloud-redux-fetcher'; import { resourceConfig } from '../../../../config'; @@ -26,15 +24,14 @@ import { ResourceInfo } from '../../common/models'; import { cloneDeep } from '../../common/utils'; import * as ActionType from '../constants/ActionType'; import { inputTypeMap, outputTypeMap } from '../constants/Config'; -import { - initContainerFilePath, initContainerInputOption, initMetadata -} from '../constants/initState'; +import { initContainerFilePath, initContainerInputOption, initMetadata } from '../constants/initState'; import { ContainerLogs, Log, LogFilter, ResourceFilter, RootState } from '../models'; import { Resource } from '../models/Resource'; import { editLogStashActions } from './editLogStashActions'; import { podActions } from './podActions'; import { resourceActions } from './resourceActions'; import { Base64 } from 'js-base64'; +import { HOST_LOG_INPUT_PATH_PREFIX } from '../constants/Config'; type GetState = () => RootState; @@ -42,10 +39,10 @@ type GetState = () => RootState; const fetchLogListActions = generateFetcherActionCreator({ actionType: ActionType.FetchLogList, fetcher: async (getState: GetState, fetchOptions, dispatch: Redux.Dispatch) => { - let { logQuery, clusterVersion } = getState(); - let resourceInfo = resourceConfig(clusterVersion)['logcs']; - let isClearData = fetchOptions && fetchOptions.noCache ? true : false; - let response = await CommonAPI.fetchResourceList({ resourceInfo, query: logQuery, isClearData }); + const { logQuery, clusterVersion } = getState(); + const resourceInfo = resourceConfig(clusterVersion)['logcs']; + const isClearData = fetchOptions && fetchOptions.noCache ? true : false; + const response = await CommonAPI.fetchResourceList({ resourceInfo, query: logQuery, isClearData }); return response; } }); @@ -68,11 +65,11 @@ export const restActions = { /** 拉取单个日志采集规则的 */ fetchSpecificLog: (name: string, clusterId: string, namespace: string, mode: string) => { return async (dispatch: Redux.Dispatch, getState: GetState) => { - let { clusterVersion, route, clusterSelection } = getState(); - let logAgentName = clusterSelection && clusterSelection[0] && clusterSelection[0].spec.logAgentName || ''; - let resourceInfo = resourceConfig(clusterVersion)['logcs']; - let { clusterId, regionId } = route.queries; - let result = await CommonAPI.fetchResourceList({ + const { clusterVersion, route, clusterSelection } = getState(); + const logAgentName = (clusterSelection && clusterSelection[0] && clusterSelection[0].spec.logAgentName) || ''; + const resourceInfo = resourceConfig(clusterVersion)['logcs']; + const { clusterId, regionId } = route.queries; + const result = await CommonAPI.fetchResourceList({ query: { filter: { namespace, @@ -92,12 +89,12 @@ export const restActions = { payload: result.records }); - let log = getState().logSelection[0]; + const log = getState().logSelection[0]; if (mode === 'update' || mode === 'detail') { let inputOption; //输入端选项 let outputOption; //输出端选项 - let inputMode = log.spec.input.type ? inputTypeMap[log.spec.input.type] : ''; //输入端类型 - let consumerMode = log.spec.output.type ? outputTypeMap[log.spec.output.type] : ''; //输出端类型 + const inputMode = log.spec.input.type ? inputTypeMap[log.spec.input.type] : ''; //输入端类型 + const consumerMode = log.spec.output.type ? outputTypeMap[log.spec.output.type] : ''; //输出端类型 dispatch(editLogStashActions.inputStashName(log.metadata.name)); dispatch(editLogStashActions.changeLogMode(inputMode)); //选择mode dispatch(editLogStashActions.changeConsumerMode(consumerMode)); @@ -116,7 +113,7 @@ export const restActions = { //选择了所有容器，则需要帮忙选择指定容器业务, //只有在update的时候才需要去获取resource、 if (mode === 'update') { - let containerLogsArr: ContainerLogs[] = cloneDeep(getState().logStashEdit.containerLogs); + const containerLogsArr: ContainerLogs[] = cloneDeep(getState().logStashEdit.containerLogs); containerLogsArr[0].namespaceSelection = 'default'; dispatch({ type: ActionType.UpdateContainerLogs, @@ -135,9 +132,9 @@ export const restActions = { } else { //选择了指定容器 dispatch(editLogStashActions.selectAllNamespace('selectOne')); - let containerArr = []; + const containerArr = []; inputOption.namespaces.forEach(item => { - let tmp = cloneDeep(initContainerInputOption); + const tmp = cloneDeep(initContainerInputOption); tmp.id = uuid(); tmp.collectorWay = item.all_containers ? 'container' : 'workload'; tmp.namespaceSelection = item.namespace; @@ -160,9 +157,9 @@ export const restActions = { if (mode === 'update') { containerArr.forEach(item => { Object.keys(item.workloadList).forEach(async workloadType => { - let resourceInfo: ResourceInfo = resourceConfig(clusterVersion)[workloadType]; + const resourceInfo: ResourceInfo = resourceConfig(clusterVersion)[workloadType]; - let resourceQuery: QueryState = { + const resourceQuery: QueryState = { filter: { clusterId, logAgentName, @@ -172,7 +169,7 @@ export const restActions = { regionId: +route.queries['rid'] } }; - let response = await CommonAPI.fetchResourceList({ + const response = await CommonAPI.fetchResourceList({ query: resourceQuery, resourceInfo, isClearData: false @@ -190,7 +187,7 @@ export const restActions = { } else if (inputMode === inputTypeMap['pod-log']) { //如果为容器文件路径 inputOption = log.spec.input.pod_log_input; - let { namespace } = log.metadata, + const { namespace } = log.metadata, containerLogFiles = inputOption.container_log_files, workload = inputOption.workload.name, workloadType = inputOption.workload.type; @@ -203,8 +200,8 @@ export const restActions = { payload: workloadType }); //拉取数据 - let resourceInfo = resourceConfig(clusterVersion)[workloadType]; - let responseWorkloadList: RecordSet = await CommonAPI.fetchResourceList({ + const resourceInfo = resourceConfig(clusterVersion)[workloadType]; + const responseWorkloadList: RecordSet = await CommonAPI.fetchResourceList({ resourceInfo, query: { filter: { @@ -237,10 +234,10 @@ export const restActions = { isCanFetchPodList: namespace && workload ? true : false }) ); - let containerFilePathArr = []; + const containerFilePathArr = []; Object.keys(containerLogFiles).forEach(item => { containerLogFiles[item].forEach(element => { - let containerFilePath = cloneDeep(initContainerFilePath); + const containerFilePath = cloneDeep(initContainerFilePath); containerFilePath.containerName = item; containerFilePath.containerFilePath = element.path; containerFilePathArr.push(containerFilePath); @@ -253,11 +250,22 @@ export const restActions = { } else if (inputMode === inputTypeMap['host-log']) { //如果为主机文件路径 inputOption = log.spec.input.host_log_input; - dispatch(editLogStashActions.inputNodeLogPath(inputOption.path)); - let metedataKeys = Object.keys(inputOption.labels); + + let inputPath = inputOption?.path ?? ''; + + const nodeInputPathType = inputPath.includes(HOST_LOG_INPUT_PATH_PREFIX) ? 'container' : 'host'; + + dispatch(editLogStashActions.setNodeLogPathType(nodeInputPathType)); + + if (nodeInputPathType === 'container') { + inputPath = inputPath.replace(HOST_LOG_INPUT_PATH_PREFIX, ''); + } + + dispatch(editLogStashActions.inputNodeLogPath(inputPath)); + const metedataKeys = Object.keys(inputOption.labels); if (metedataKeys.length) { - let labels = metedataKeys.map((key, index) => { - let newLabel = Object.assign({}, initMetadata, { + const labels = metedataKeys.map((key, index) => { + const newLabel = Object.assign({}, initMetadata, { id: uuid(), metadataKey: key, metadataValue: inputOption.labels[key] diff --git a/web/console/src/modules/logStash/components/EditLogStashPanel.tsx b/web/console/src/modules/logStash/components/EditLogStashPanel.tsx index b71d728dba..34b8a886d1 100644 --- a/web/console/src/modules/logStash/components/EditLogStashPanel.tsx +++ b/web/console/src/modules/logStash/components/EditLogStashPanel.tsx @@ -21,9 +21,7 @@ import { CreateResource } from 'src/modules/cluster/models'; import { Button, Bubble, ExternalLink, Segment, Text } from '@tea/component'; import { FormPanel } from '@tencent/ff-component'; -import { - bindActionCreators, FetchState, isSuccessWorkflow, OperationState, uuid -} from '@tencent/ff-redux'; +import { bindActionCreators, FetchState, isSuccessWorkflow, OperationState, uuid } from '@tencent/ff-redux'; import { t, Trans } from '@tencent/tea-app/lib/i18n'; import { SegmentOption } from '@tencent/tea-component/lib/segment/SegmentOption'; @@ -34,8 +32,13 @@ import { allActions } from '../actions'; import { validatorActions } from '../actions/validatorActions'; import { logModeList } from '../constants/Config'; import { - ContainerLogInput, ContainerLogNamespace, ElasticsearchOutput, HostLogInput, KafkaOutpot, - LogStashEditYaml, PodLogInput + ContainerLogInput, + ContainerLogNamespace, + ElasticsearchOutput, + HostLogInput, + KafkaOutpot, + LogStashEditYaml, + PodLogInput } from '../models/LogStashEdit'; import { router } from '../router'; import { EditConsumerPanel } from './EditConsumerPanel'; @@ -45,6 +48,7 @@ import { EditOriginNodePanel } from './EditOriginNodePanel'; import { isCanCreateLogStash } from './LogStashActionPanel'; import { RootProps } from './LogStashApp'; import { Base64 } from 'js-base64'; +import { HOST_LOG_INPUT_PATH_PREFIX } from '../constants/Config'; /** 日志采集类型的提示 */ const logModeTip = { @@ -83,7 +87,7 @@ export class EditLogStashPanel extends React.Component { } componentWillUnmount() { - let { actions, route } = this.props; + const { actions, route } = this.props; // 清理logStashEdit的内容 actions.editLogStash.clearLogStashEdit(); // 重置workflow @@ -109,13 +113,13 @@ export class EditLogStashPanel extends React.Component { { logStashName, v_logStashName, v_clusterSelection, logMode } = logStashEdit, urlParams = router.resolve(route); // 当前的类型 create | update - let { mode } = urlParams; - let byProject = window.location.href.includes('/tkestack-project'); + const { mode } = urlParams; + const byProject = window.location.href.includes('/tkestack-project'); - let isCreateMode: boolean = mode === 'create'; + const isCreateMode: boolean = mode === 'create'; // 判断当前是否能够新建日志收集规则 - let { canCreate, tip, ifLogDaemonset } = isCanCreateLogStash( + const { canCreate, tip, ifLogDaemonset } = isCanCreateLogStash( clusterSelection[0], logList.data.records, isDaemonsetNormal, @@ -123,12 +127,12 @@ export class EditLogStashPanel extends React.Component { ); /** 渲染日志类型 */ - let selectedLogMode = Object.values(logModeList).find(item => item.value === logMode); + const selectedLogMode = Object.values(logModeList).find(item => item.value === logMode); - let ifLogDaemonsetNeedLoading = logDaemonset.fetchState === FetchState.Fetching; + const ifLogDaemonsetNeedLoading = logDaemonset.fetchState === FetchState.Fetching; /** 创建日志采集规则失败 */ - let failed = modifyLogStashFlow.operationState === OperationState.Done && !isSuccessWorkflow(modifyLogStashFlow); + const failed = modifyLogStashFlow.operationState === OperationState.Done && !isSuccessWorkflow(modifyLogStashFlow); //渲染集群列表selectList选择项 const selectClusterList = cloneDeep(clusterList); @@ -152,7 +156,7 @@ export class EditLogStashPanel extends React.Component { } // 根据当前是平台侧/业务侧返回业务/集群选择器，或者显示业务/集群信息（修改） - let getSelector = () => { + const getSelector = () => { if (byProject) { if (!isCreateMode) { return ( @@ -161,28 +165,30 @@ export class EditLogStashPanel extends React.Component { ); } - let projectListOptions = projectList.map((p, index) => ({ + const projectListOptions = projectList.map((p, index) => ({ text: p.displayName, value: p.name })); - return (<> - - { - actions.cluster.selectProject(value); - }} - > - - ); + return ( + <> + + { + actions.cluster.selectProject(value); + }} + > + + + ); } if (!isCreateMode) { return ( {clusterSelection[0] && - clusterSelection[0].metadata.name + '(' + clusterSelection[0].spec.displayName + ')'} + clusterSelection[0].metadata.name + '(' + clusterSelection[0].spec.displayName + ')'} ); } @@ -192,19 +198,10 @@ export class EditLogStashPanel extends React.Component { label={t('所属集群')} message={ - - - 如现有的集群不合适，您可以去控制台 - - 导入集群 - - 或者 - - 新建一个独立集群 - - - - {!(clusterSelection && clusterSelection[0] && clusterSelection[0].spec.logAgentName || isOpenLogStash) && ( + {!( + (clusterSelection && clusterSelection[0] && clusterSelection[0].spec.logAgentName) || + isOpenLogStash + ) && ( 该集群未开启日志收集功能， @@ -298,7 +295,10 @@ export class EditLogStashPanel extends React.Component { - +