/* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ import React, { useState, useEffect } from "react"; import { useHistory } from "react-router-dom"; import CreateStep from "components/CreateStep"; import SpecifySettings from "./steps/SpecifySettings"; import SpecifyOpenSearchCluster, { AOSInputValidRes, checkOpenSearchInput, covertParametersByKeyAndConditions, } from "../common/SpecifyCluster"; import CreateTags from "../common/CreateTags"; import Button from "components/Button"; import Breadcrumb from "components/Breadcrumb"; import { appSyncRequestMutation } from "assets/js/request"; import { createServicePipeline } from "graphql/mutations"; import { CODEC, DestinationType, EngineType, ServiceType, Tag } from "API"; import { SupportPlugin, WarmTransitionType, YesNo, AmplifyConfigType, SERVICE_LOG_INDEX_SUFFIX, } from "types"; import { OptionType } from "components/AutoComplete/autoComplete"; import { CreateLogMethod, ServiceLogType } from "assets/js/const"; import HelpPanel from "components/HelpPanel"; import SideMenu from "components/SideMenu"; import { AppStateProps } from "reducer/appReducer"; import { useSelector } from "react-redux"; import { useTranslation } from "react-i18next"; import { Alert } from "assets/js/alert"; import LogProcessing from "../common/LogProcessing"; import { bucketNameIsValid, splitStringToBucketAndPrefix, } from "assets/js/utils"; const EXCLUDE_PARAMS = [ "esDomainId", "elbObj", "taskType", "manualBucketELBPath", "manualBucketName", "warmEnable", "coldEnable", "needCreateLogging", "geoPlugin", "userAgentPlugin", "rolloverSizeNotSupport", ]; export interface ELBTaskProps { type: ServiceType; tags: Tag[]; arnId: string; source: string; target: string; logSourceAccountId: string; logSourceRegion: string; destinationType: string; params: { // [index: string]: string | any; needCreateLogging: boolean; engineType: string; warmEnable: boolean; coldEnable: boolean; logBucketName: string; elbObj: OptionType | null; taskType: string; manualBucketELBPath: string; manualBucketName: string; logBucketPrefix: string; endpoint: string; domainName: string; esDomainId: string; indexPrefix: string; createDashboard: string; vpcId: string; subnetIds: string; securityGroupId: string; geoPlugin: boolean; userAgentPlugin: boolean; shardNumbers: string; replicaNumbers: string; enableRolloverByCapacity: boolean; warmTransitionType: string; warmAge: string; coldAge: string; retainAge: string; rolloverSize: string; indexSuffix: string; codec: string; refreshInterval: string; rolloverSizeNotSupport: boolean; }; } const DEFAULT_TASK_VALUE: ELBTaskProps = { type: ServiceType.ELB, source: "", target: "", arnId: "", tags: [], logSourceAccountId: "", logSourceRegion: "", destinationType: DestinationType.S3, params: { needCreateLogging: false, engineType: "", warmEnable: false, coldEnable: false, logBucketName: "", elbObj: null, taskType: CreateLogMethod.Automatic, manualBucketELBPath: "", manualBucketName: "", logBucketPrefix: "", endpoint: "", domainName: "", esDomainId: "", indexPrefix: "", createDashboard: YesNo.Yes, vpcId: "", subnetIds: "", securityGroupId: "", geoPlugin: false, userAgentPlugin: false, shardNumbers: "1", replicaNumbers: "1", enableRolloverByCapacity: true, warmTransitionType: WarmTransitionType.IMMEDIATELY, warmAge: "0", coldAge: "60", retainAge: "180", rolloverSize: "30", indexSuffix: SERVICE_LOG_INDEX_SUFFIX.yyyy_MM_dd, codec: CODEC.best_compression, refreshInterval: "1s", rolloverSizeNotSupport: false, }, }; const CreateELB: React.FC = () => { const { t } = useTranslation(); const breadCrumbList = [ { name: t("name"), link: "/" }, { name: t("servicelog:name"), link: "/log-pipeline/service-log", }, { name: t("servicelog:create.name"), link: "/log-pipeline/service-log/create", }, { name: t("servicelog:create.service.elb") }, ]; const amplifyConfig: AmplifyConfigType = useSelector( (state: AppStateProps) => state.amplifyConfig ); const [curStep, setCurStep] = useState(0); const history = useHistory(); const [loadingCreate, setLoadingCreate] = useState(false); const [elbPipelineTask, setELBPipelineTask] = useState(DEFAULT_TASK_VALUE); const [autoELBEmptyError, setAutoELBEmptyError] = useState(false); const [manualELBEmpryError, setManualELBEmpryError] = useState(false); const [manualS3PathInvalid, setManualS3PathInvalid] = useState(false); const [esDomainEmptyError, setEsDomainEmptyError] = useState(false); const [nextStepDisable, setNextStepDisable] = useState(false); const [elbISChanging, setELBISChanging] = useState(false); const [needEnableAccessLog, setNeedEnableAccessLog] = useState(false); const [domainListIsLoading, setDomainListIsLoading] = useState(false); const [aosInputValidRes, setAosInputValidRes] = useState({ shardsInvalidError: false, warmLogInvalidError: false, coldLogInvalidError: false, logRetentionInvalidError: false, coldMustLargeThanWarm: false, logRetentionMustThanColdAndWarm: false, capacityInvalidError: false, indexEmptyError: false, indexNameFormatError: false, }); const confirmCreatePipeline = async () => { console.info("elbPipelineTask:", elbPipelineTask); const createPipelineParams: any = {}; createPipelineParams.type = ServiceType.ELB; createPipelineParams.source = elbPipelineTask.source; createPipelineParams.target = elbPipelineTask.target; createPipelineParams.tags = elbPipelineTask.tags; createPipelineParams.logSourceAccountId = elbPipelineTask.logSourceAccountId; createPipelineParams.logSourceRegion = amplifyConfig.aws_project_region; createPipelineParams.destinationType = elbPipelineTask.destinationType; const tmpParamList: any = covertParametersByKeyAndConditions( elbPipelineTask, EXCLUDE_PARAMS ); // Add Plugin in parameters const pluginList = []; if (elbPipelineTask.params.geoPlugin) { pluginList.push(SupportPlugin.Geo); } if (elbPipelineTask.params.userAgentPlugin) { pluginList.push(SupportPlugin.UserAgent); } if (pluginList.length > 0) { tmpParamList.push({ parameterKey: "plugins", parameterValue: pluginList.join(","), }); } // Add Default Failed Log Bucket tmpParamList.push({ parameterKey: "backupBucketName", parameterValue: amplifyConfig.default_logging_bucket, }); // Add defaultCmkArnParam tmpParamList.push({ parameterKey: "defaultCmkArnParam", parameterValue: amplifyConfig.default_cmk_arn, }); createPipelineParams.parameters = tmpParamList; try { setLoadingCreate(true); const createRes = await appSyncRequestMutation( createServicePipeline, createPipelineParams ); console.info("createRes:", createRes); setLoadingCreate(false); history.push({ pathname: "/log-pipeline/service-log", }); } catch (error) { setLoadingCreate(false); console.error(error); } }; useEffect(() => { console.info("elbPipelineTask:", elbPipelineTask); }, [elbPipelineTask]); return (
{curStep === 0 && ( { setELBISChanging(status); }} manualELBEmptyError={manualELBEmpryError} manualS3PathInvalid={manualS3PathInvalid} autoELBEmptyError={autoELBEmptyError} changeNeedEnableLogging={(need: boolean) => { setNeedEnableAccessLog(need); }} changeCrossAccount={(id) => { setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, logSourceAccountId: id, }; }); }} manualChangeBucket={(srcBucketName) => { setAosInputValidRes((prev) => { return { ...prev, indexEmptyError: false, indexNameFormatError: false, }; }); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, source: srcBucketName, params: { ...prev.params, manualBucketName: srcBucketName, indexPrefix: srcBucketName.toLowerCase(), }, }; }); }} changeTaskType={(taskType) => { console.info("taskType:", taskType); setAutoELBEmptyError(false); setManualELBEmpryError(false); setELBPipelineTask({ ...DEFAULT_TASK_VALUE, params: { ...DEFAULT_TASK_VALUE.params, taskType: taskType, }, }); }} changeELBObj={(elbObj) => { setAutoELBEmptyError(false); setAosInputValidRes((prev) => { return { ...prev, indexEmptyError: false, indexNameFormatError: false, }; }); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, source: elbObj?.name || "", arnId: elbObj?.value || "", params: { ...prev.params, indexPrefix: elbObj?.name?.toLowerCase() || "", elbObj: elbObj, }, }; }); }} changeELBBucket={(bucketName) => { setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, logBucketName: bucketName, }, }; }); }} changeLogPath={(logPath) => { if ( elbPipelineTask.params.taskType === CreateLogMethod.Manual ) { setManualELBEmpryError(false); setManualS3PathInvalid(false); const { bucket, prefix } = splitStringToBucketAndPrefix(logPath); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, manualBucketELBPath: logPath, logBucketName: bucket, logBucketPrefix: prefix, }, }; }); } else { setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, logBucketPrefix: logPath, }, }; }); } }} setNextStepDisableStatus={(status) => { setNextStepDisable(status); }} /> )} {curStep === 1 && ( { if (plugin === SupportPlugin.Geo) { setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, geoPlugin: enable, }, }; }); } if (plugin === SupportPlugin.UserAgent) { setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, userAgentPlugin: enable, }, }; }); } }} pipelineTask={elbPipelineTask} /> )} {curStep === 2 && ( { setDomainListIsLoading(loading); }} aosInputValidRes={aosInputValidRes} changeShards={(shards) => { setAosInputValidRes((prev) => { return { ...prev, shardsInvalidError: false, }; }); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, shardNumbers: shards, }, }; }); }} changeReplicas={(replicas) => { setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, replicaNumbers: replicas, }, }; }); }} changeBucketIndex={(indexPrefix) => { setAosInputValidRes((prev) => { return { ...prev, indexEmptyError: false, indexNameFormatError: false, }; }); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, indexPrefix: indexPrefix, }, }; }); }} changeOpenSearchCluster={(cluster) => { const NOT_SUPPORT_VERSION = cluster?.engine === EngineType.Elasticsearch || parseFloat(cluster?.version || "") < 1.3; setEsDomainEmptyError(false); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, target: cluster?.domainName || "", engine: cluster?.engine || "", params: { ...prev.params, engineType: cluster?.engine || "", domainName: cluster?.domainName || "", esDomainId: cluster?.id || "", endpoint: cluster?.endpoint || "", securityGroupId: cluster?.vpc?.securityGroupId || "", subnetIds: cluster?.vpc?.privateSubnetIds || "", vpcId: cluster?.vpc?.vpcId || "", warmEnable: cluster?.nodes?.warmEnabled || false, coldEnable: cluster?.nodes?.coldEnabled || false, rolloverSizeNotSupport: NOT_SUPPORT_VERSION, enableRolloverByCapacity: !NOT_SUPPORT_VERSION, rolloverSize: NOT_SUPPORT_VERSION ? "" : "30", }, }; }); }} changeSampleDashboard={(yesNo) => { setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, createDashboard: yesNo, }, }; }); }} changeWarnLogTransition={(value: string) => { setAosInputValidRes((prev) => { return { ...prev, warmLogInvalidError: false, }; }); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, warmAge: value, }, }; }); }} changeColdLogTransition={(value: string) => { setAosInputValidRes((prev) => { return { ...prev, coldLogInvalidError: false, coldMustLargeThanWarm: false, }; }); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, coldAge: value, }, }; }); }} changeLogRetention={(value: string) => { setAosInputValidRes((prev) => { return { ...prev, logRetentionInvalidError: false, logRetentionMustThanColdAndWarm: false, }; }); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, retainAge: value, }, }; }); }} changeIndexSuffix={(suffix: string) => { setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, indexSuffix: suffix, }, }; }); }} changeEnableRollover={(enable: boolean) => { setAosInputValidRes((prev) => { return { ...prev, capacityInvalidError: false, }; }); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, enableRolloverByCapacity: enable, }, }; }); }} changeRolloverSize={(size: string) => { setAosInputValidRes((prev) => { return { ...prev, capacityInvalidError: false, }; }); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, rolloverSize: size, }, }; }); }} changeCompressionType={(codec: string) => { setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, codec: codec, }, }; }); }} changeWarmSettings={(type: string) => { setAosInputValidRes((prev) => { return { ...prev, coldMustLargeThanWarm: false, }; }); setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, params: { ...prev.params, warmTransitionType: type, }, }; }); }} /> )} {curStep === 3 && ( { setELBPipelineTask((prev: ELBTaskProps) => { return { ...prev, tags: tags }; }); }} /> )}
{curStep > 0 && ( )} {curStep < 3 && ( )} {curStep === 3 && ( )}
); }; export default CreateELB;