리트머스 - 우뚝
LitmusChaos 정보
Litmuschoos는 Kubernetes 개발자와 SRE에 필요한 도구를 제공하여 Kubernetes의 원생 방식으로 혼돈 테스트를 쉽게 수행할 수 있다.Litmuschoos는 Kubernetes의 혼돈 프로젝트 프레임워크입니다.
이 프로젝트는'성명성 혼돈'을 기본 설계 목표로 하고 지역사회를 혼돈 실험 성장의 중심에 유지한다.
리트머스는 광범위하게 함유되어 있다
1. 혼돈의 계산
2, 혼돈 CRD
3. 혼돈 실험 또는 혼돈
4. 혼돈 스케줄러
5. 혼돈 도량 도출기
6. 혼돈 이벤트 내보내기
7. 포털
이 블로그에서 우리는 주로 리트머스 분석을 토론할 것이다.
이제 우리는 분석에 대해 광범위한 토론을 진행할 것이다.
1. 실험 분석과 우리의 성장
2. Litmus 사용자가 있는 가장 인기 있는 곳
지도의 구조와 의존 관계
4. React 응용 프로그램에서 라이브러리에서 데이터를 불러오고 기본 지도를 보여줍니다.
5. 참고 문헌과 링크
사용자 분석 정보
우리는 여러분과 공유하게 되어 기쁩니다. 우리 지역사회는 요 며칠 동안 이미 매우 높은 수준에 이르렀습니다. 우리는 이 이정표를 실현하게 되어 기쁩니다. 우리는 우리의 사용자들이 시종일관 우리를 지지해 주셔서 감사합니다.최근에 우리는 사용자로부터 큰 호응을 얻었고 활발한 사용자가 많다.우리는 전 세계적으로 우리의 자원과 업무를 확대하기 위해 노력하고 있다.
주: 상술한 분석 데이터는 2020년 8월 25일에 기록되었다.
현재 상황에서 우리는 조작원이 14k+를 설치하고 총 실험은 108k+를 운행하며 총 실험 35와 Githubstar1k+를 계산하고 있다.
리트머스 생장
다음 그림은 조작원 실험 분석을 바탕으로 하는 리트머스 지역사회의 증가를 보여 준다.
실험
일반: Pod 삭제, 용기 종료, Pod 네트워크 지연, Pod 네트워크 분실, Pod 네트워크 손상, Pod CPU Hog, Pod 메모리 Hog, 디스크 충전, 디스크 분실, 노드 CPU Hog, 노드 메모리 Hog, 노드 소모, Kubelet 서비스 종료, Pod 네트워크 복제, 노드 오염, Docker 서비스 종료, Pod 자동 축소.
Kubernetes: Kubernetes 응용 프로그램 기중기, Kubernetes 응용 프로그램 서비스, Kubernetes 집단급 기중기-kiam, EC2 종료.
오프닝: 목표 용기 고장, 목표 네트워크 지연, 목표 네트워크 분실, 목표 크레인 고장, 탱크 크레인 고장, 탱크 용기 고장, 탱크 네트워크 지연, 탱크 네트워크 분실, 제어 평면 혼돈, cStor 탱크 혼돈, 탱크 디스크 분실, NFS Provisioner Kill.
Kafka:Broker Pod Failure,Broker Disk Failure,CoreDns CoreDns Pod Delete,Cassandra Cassandra Pod Delete.
리트머스 사용자가 있는 가장 인기 있는 곳
우리는 현재 전 세계 170여 개 도시와 35여 개국의 리트머스 사용자 소재지를 넘어섰다.현재 10위권 국가는 인도, 미국, 중국, 네덜란드, 프랑스, 우크라이나, 독일, 일본, 아일랜드와 대만이다.
도시 지능 사용자
여기에는 지도에서 특정 도시의 사용자를 포함한 전 세계 통계 데이터가 표시되어 있다.
국가별 사용자
이곳에서 당신은 지도의 특정 국가의 사용자를 포함한 우리의 전 세계 통계 데이터를 볼 수 있습니다.
지도의 구조와 그 의존 관계
지리 지도를 만들려면 기본적인 React 지식이 필요합니다.React 및 TypeScript를 사용하여 개발되었습니다.
지도에 대해 나는 react-simple-maps
를 사용하여 도시 그림을 그리고 react-google-charts
을 사용하여 국가 그림을 그린다.
나의 방법은 도시 지능을 이용하여 지리지도에 데이터를 그리는 것이기 때문에 지도에 점을 표시하여 적당한 가시화를 하는 것이 가장 좋다.
React 응용 프로그램과 코드에서 라이브러리에서 데이터를 불러오고 기본 지도를 보여줍니다
코드 구조:
┬ Litmus-Portal
├─┬ backend
| └ frontend
| ├─┬ src
| └── components
| ├─┬ GeoMap
│ ├── CityMap.tsx
| ├── CountryMao.tsx
| ├── index.ts
│ └── geo.json
도시 지도
CityMap 구성 요소는 혼돈 실험의 도시 계수를 바탕으로 지도를 렌더링합니다.태그의 투영을 사용자 정의하고 싶어서 태그 속성을 이용했습니다.
먼저 이름에 대한 인터페이스를 정의합니다. 구성 요소가 마운트되면 좌표와 데이터가 비동기적으로 불러옵니다. (useffect ()이 밖에 geo를 가져옵니다.json이 좌표를 비추다.
투영 표식에 대해 나는 모든 원형의 불투명도 색을 동일하게 유지한다.
다음은 필요한 라이브러리입니다. geoURL은 세계지도의 좌표로 그림을 그리는 데 사용됩니다.
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import {
ComposableMap,
Geographies,
Geography,
Marker,
ZoomableGroup,
} from 'react-simple-maps';
import { RootState } from '../../redux/reducers';
import datageo from './geo.json';
const geoUrl = datageo;
React 구성 요소에는 지도 구성 요소에 속하는 속성을 저장하는 내장된 상태 대상이 있습니다.상태 객체가 변경되면 어셈블리가 다시 렌더링됩니다.
const [mapData, setMapData] = useState<CityData[]>([]);
const geoCity = useSelector(
(state: RootState) => state.communityData.google.geoCity
);
useEffect(() => {
const cityData: CityData[] = [];
geoCity.map((e) =>
cityData.push({
name: e.name,
coordinates: [parseFloat(e.longitude), parseFloat(e.latitude)],
})
);
setMapData(cityData);
태그가 있는 맵 추가
모든 도시 지도에 데이터를 표시하기 위해서 나는 이벤트 탐지기와 조합 가능한 지도와 축소 가능한 그룹을 추가했다.
<ComposableMap style={{width: 640, height: 340,}}>
<ZoomableGroup zoom={1.3}>
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map((geo) => (
<Geography
key={geo.rsmKey}
geography={geo}
fill="#CFCFCF"
stroke="#CFCFCF"
/>
))
}
</Geographies>
{mapData &&
mapData.map(({ name, coordinates }) => (
<Marker key={`${name}_${coordinates}`} coordinates={coordinates}>
<g
stroke="#858CDD"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
transform="translate(-12, -24)"
>
<circle cx="12" cy="10" r="4" />
</g>
</Marker>
))}
</ZoomableGroup>
</ComposableMap>
국가 지도
CountryMap 구성 요소는 국가별 실험 계수에 따라 지도를 렌더링합니다.
이 방법은 CityMaps와 마찬가지로 유일한 차이점은 데이터 국가를 나타내고 정지 효과를 추가하는 것이다.
처음에 데이터는 2D 그룹에 저장된 상태에Country와 Users 열을 포함하기 때문에 저는 CountryMap 변수를 사용했습니다. 이 변수는 지도 구성 요소의 속성에 저장됩니다.상태 객체가 변경되면 어셈블리가 다시 렌더링됩니다.
const CountryMap = () => {
const data: string[][] = useSelector(
(state: RootState) => state.communityData.google.geoCountry
);
const parsedData = data.map((item) => [item[0], parseInt(item[1], 10)]);
parsedData.unshift(['Country', 'Count'])
그래디언트 표시
사용자가 데이터의 강도를 이해하도록 하기 위해서 우리는 최소값 = 모든 값의 최소값, 최대값 = 모든 값의 최대값을 선형으로 표시할 수 있다.
각 국가의 정지 데이터를 표시하기 위해서, 우리는 onMouse Center와 onMouse Leave 이벤트 감청기를 추가할 수 있으며, 이 나라와 사용자를 표시할 수 있습니다.
<Chart
style={{ margin: 'auto' }}
width="640px"
height="340px"
chartType="GeoChart"
data={parsedData}
options={{
colorAxis: { colors: ['#2CCA8F', 'gray', '#5B44BA']
},
backgroundColor: '#ffffff',
datalessRegionColor: '#CFCFCF',
defaultColor: '#CFCFCF',
}}
rootProps={{ 'data-testid': '1' }}
/>
우리는 사용자가 우리의 리트머스 지역사회에 공헌하기를 기대하고 있다.
참조 및 링크
LitmusChaos
Litmus ChaosHub
Github Repo Litmus
Connect with us on Slack
우리는 우리의 사용자의 성장에 기여하고 그들이 우리와 함께 부상하고 빛나도록 도와주고 있어서 매우 기쁘다.
Reference
이 문제에 관하여(리트머스 - 우뚝), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/oumkale/litmus-soaring-height-nbd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
┬ Litmus-Portal
├─┬ backend
| └ frontend
| ├─┬ src
| └── components
| ├─┬ GeoMap
│ ├── CityMap.tsx
| ├── CountryMao.tsx
| ├── index.ts
│ └── geo.json
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import {
ComposableMap,
Geographies,
Geography,
Marker,
ZoomableGroup,
} from 'react-simple-maps';
import { RootState } from '../../redux/reducers';
import datageo from './geo.json';
const geoUrl = datageo;
const [mapData, setMapData] = useState<CityData[]>([]);
const geoCity = useSelector(
(state: RootState) => state.communityData.google.geoCity
);
useEffect(() => {
const cityData: CityData[] = [];
geoCity.map((e) =>
cityData.push({
name: e.name,
coordinates: [parseFloat(e.longitude), parseFloat(e.latitude)],
})
);
setMapData(cityData);
<ComposableMap style={{width: 640, height: 340,}}>
<ZoomableGroup zoom={1.3}>
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map((geo) => (
<Geography
key={geo.rsmKey}
geography={geo}
fill="#CFCFCF"
stroke="#CFCFCF"
/>
))
}
</Geographies>
{mapData &&
mapData.map(({ name, coordinates }) => (
<Marker key={`${name}_${coordinates}`} coordinates={coordinates}>
<g
stroke="#858CDD"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
transform="translate(-12, -24)"
>
<circle cx="12" cy="10" r="4" />
</g>
</Marker>
))}
</ZoomableGroup>
</ComposableMap>
const CountryMap = () => {
const data: string[][] = useSelector(
(state: RootState) => state.communityData.google.geoCountry
);
const parsedData = data.map((item) => [item[0], parseInt(item[1], 10)]);
parsedData.unshift(['Country', 'Count'])
<Chart
style={{ margin: 'auto' }}
width="640px"
height="340px"
chartType="GeoChart"
data={parsedData}
options={{
colorAxis: { colors: ['#2CCA8F', 'gray', '#5B44BA']
},
backgroundColor: '#ffffff',
datalessRegionColor: '#CFCFCF',
defaultColor: '#CFCFCF',
}}
rootProps={{ 'data-testid': '1' }}
/>
Reference
이 문제에 관하여(리트머스 - 우뚝), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/oumkale/litmus-soaring-height-nbd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)