import { ReactComponent as Img } from '@/assets/not-integrated.svg';
import {
CreditCardOutlined,
DownOutlined,
AppstoreOutlined,
CloudOutlined,
ProfileOutlined,
FolderOpenOutlined,
InfoCircleOutlined,
CheckCircleFilled,
} from '@ant-design/icons';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import {
Tree,
Tabs,
Descriptions,
Table,
notification,
Alert,
Typography,
Tooltip,
Card,
Tag,
Badge,
} from 'antd';
import type { DirectoryTreeProps } from 'antd/es/tree';
import { useEffect, useState } from 'react';
import './services.less';
const yaml = require('js-yaml');
function traverse(data, treeData, expandedKeys) {
if (data.kube_deployment) {
treeData.title = data.kube_deployment.name;
} else {
treeData.title = data.name;
}
treeData.kind = data.kind;
treeData.key = data.kind + '.' + data.name;
if (treeData.kind === 'application') {
treeData.icon = ;
treeData.title += ` (${data.children.length})`;
// treeData.selectable = false;
} else if (treeData.kind === 'service') {
treeData.icon = ;
if (data.kube_deployment) {
let status =
data.kube_deployment.available_replicas <
data.kube_deployment.desired_replicas
? 'error'
: 'success';
treeData.title = ;
}
} else if (treeData.kind === 'business') {
treeData.icon = ;
treeData.selectable = false;
expandedKeys.push(treeData.key);
} else {
treeData.icon = ;
treeData.selectable = false;
expandedKeys.push(treeData.key);
}
treeData.children = [];
if (data.children === null) {
return treeData;
}
data.children.sort((a, b) => a.name.localeCompare(b.name));
for (let child of data.children) {
let node = {};
treeData.children.push(traverse(child, node, expandedKeys));
}
return treeData;
}
function openRequestErrorNotification(url, statusText) {
notification.error({
message: 'Error',
description: 'fetch ' + url + ' got ' + statusText,
});
}
function openBackendNotification(error) {
notification.error({
message: 'Error',
description: error,
});
}
function getWeekday(numDay: number): string {
switch (numDay) {
case 1:
return "Monday";
case 2:
return "Tuesday";
case 3:
return "Wednesday"
case 4:
return "Thursday";
case 5:
return "Friday";
case 6:
return "Saturday";
case 7:
return "Sunday";
default:
return "Unknown";
}
}
function getReleaseWindow(result) {
if (result.windowStartAt == null || result.windowEndAt == null) {
return "NA"
}
let startWeekday = getWeekday(result.windowStartAt.weekday)
let endWeekday = getWeekday(result.windowEndAt.weekday)
let releaseWindow = `${startWeekday} ${result.windowStartAt.hour}:${result.windowStartAt.minute} ~ ${endWeekday} ${result.windowEndAt.hour}:${result.windowEndAt.minute}`
return releaseWindow
}
function renderApplicationTab(result, items) {
let releaseWindow = getReleaseWindow(result)
let owners = yaml.dump(result.owners);
let slis = yaml.dump(result.slis);
items.push({
label: 'Application',
key: 'applicaion',
children: (
{owners}
{result.cdType}
{releaseWindow}
{slis}
)
})
}
function renderMetaTab(result, items) {
let hasRPC = result.repo_rpc != null && result.repo_rpc.length > 0;
let notIntegrated = (
Not integrated yet
);
items.push({
label: 'Meta',
key: 'meta',
children: (
Service{' '}
}
>
{result.kube_deployment
? `${result.kube_deployment.name}`
: `${result.service_name}`}
{result.business}
{result.application}
{result.kube_deployment ? (
{`[${result.kube_deployment.available_replicas}/${result.kube_deployment.desired_replicas}]`}
}
/>
) : (
)}
Kubernetes Service Name{' '}
}
>
{result.kube_service == '' ? notIntegrated : result.kube_service}
{result.repo}
{result.pulumi_path}
Trace{' '}
}
>
{result.jaeger_service == '' ? (
notIntegrated
) : (
Jaeger
)}
Pod Overview
RPC Monitoring{' '}
}
>
{!hasRPC ? (
notIntegrated
) : (
TiInf gRPC
)}
HTTP Monitoring{' '}
}
>
{result.kube_service == '' ? (
notIntegrated
) : (
API Gateway
)}
Loki
API Gateway Logs{' '}
}
>
{result.kube_service == '' ? (
notIntegrated
) : (
Loki(API Gateway)
)}
),
});
}
function renderRpcTab(result, items) {
let hasRPC = result.repo_rpc != null && result.repo_rpc.length > 0;
if (hasRPC) {
let dataSource = [];
let grpcMethods = [];
let grpcServices = [];
for (let repo of result.repo_rpc) {
for (let rpc of repo.rpcs) {
for (let rm of rpc.request_methods) {
dataSource.push({
method: rm.method,
service: rpc.service,
key: rpc.service + '.' + rm.method,
max_qps: rm.max_qps,
requests_count: rm.requests_count,
state:
rm.requests_count > 0 ? online : '-',
});
if (!grpcMethods.includes(rm.method)) {
grpcMethods.push({
text: rm.method,
value: rm.method,
});
}
}
if (!grpcServices.includes(rpc.service)) {
grpcServices.push({
text: rpc.service,
value: rpc.service,
});
}
}
}
let columns = [
{
title: 'gRPC Method',
dataIndex: 'method',
filters: grpcMethods,
filterSearch: true,
onFilter: (value: string, record) => record.method == value,
},
{
title: 'gRPC Service',
dataIndex: 'service',
filters: grpcServices,
filterSearch: true,
onFilter: (value: string, record) => record.service == value,
},
{
title: 'State',
dataIndex: 'state',
},
{
title: (
Max QPS{' '}
),
dataIndex: 'max_qps',
sorter: (a, b) => a.max_qps - b.max_qps,
},
{
title: (
Requests Count{' '}
),
dataIndex: 'requests_count',
defaultSortOrder: 'descend',
sorter: (a, b) => a.requests_count - b.requests_count,
},
];
items.push({
label: 'RPC',
key: 'rpc',
children: (
),
});
} else {
items.push({
label: 'RPC',
key: 'rpc',
children: (
![]()
Not integrated yet
),
});
}
}
function renderHttpTab(result, items) {
let hasHTTP = result.repo_http != null && result.repo_http.length > 0;
if (hasHTTP) {
let dataSource = [];
for (let repo of result.repo_http) {
for (let http of repo.apis) {
dataSource.push({
path: http.path,
method: http.method,
key: http.method + '.' + http.path,
max_qps: http.max_qps,
requests_count: http.requests_count,
state:
http.requests_count > 0 ? online : '-',
});
}
}
dataSource.sort((a, b) => b.requests_count - a.requests_count);
let deduplicated = [];
let paths = [];
// use two pointer to handle row span.
let l = null;
let r = null;
let t = 1;
for (let item of dataSource) {
let rowSpan = {};
if (
r &&
r.requests_count === item.requests_count &&
item.requests_count > 0
) {
rowSpan = { rowSpan: 0 };
t += 1;
} else {
if (l) {
l.rowSpan = { rowSpan: t };
}
l = item;
t = 1;
}
item.rowSpan = rowSpan;
r = item;
if (!deduplicated.includes(item.path)) {
deduplicated.push(item.path);
paths.push({
text: item.path,
value: item.requests_count > 0 ? item.requests_count : item.path,
});
}
}
// corner case, all items have the same requests count.
if (dataSource[0].requests_count == r.requests_count) {
dataSource[0].rowSpan = { rowSpan: t };
}
let columns = [
{
title: (
Path{' '}
),
dataIndex: 'path',
filters: paths,
filterSearch: true,
onFilter: (value: string, record) => {
if (value.startsWith('/')) {
return record.path == value;
} else {
return record.requests_count == value;
}
},
},
{
title: 'HTTP Method',
dataIndex: 'method',
},
{
title: 'State',
dataIndex: 'state',
onCell: (record, index) => {
return record.rowSpan;
},
},
{
title: (
Max QPS{' '}
),
dataIndex: 'max_qps',
onCell: (record, index) => {
return record.rowSpan;
},
},
{
title: (
Requests Count{' '}
),
dataIndex: 'requests_count',
onCell: (record, index) => {
return record.rowSpan;
},
},
];
items.push({
label: 'HTTP',
key: 'http',
children: (
),
});
} else {
items.push({
label: 'HTTP',
key: 'http',
children: (
![]()
Not integrated yet
),
});
}
}
export default () => {
const [treeData, setTreeData] = useState([]);
const [tabItems, setTabItems] = useState([]);
const [expandedKeys, setExpandedKeys] = useState([]);
const [selectedKeys, setSelectedKeys] = useState([]);
const renderDetails = (keys) => {
if (!keys[0]) {
return;
}
fetch('/api/services/' + keys[0].replace('service.', ''))
.then((res) => {
if (res.status != 200) {
res.json().then(
(result) => {
openBackendNotification(result.error);
},
(error) => {
openRequestErrorNotification(res.url, res.statusText);
},
);
throw new Error('Request Error');
}
return res.json();
})
.then(
(result) => {
let items = [];
renderMetaTab(result, items);
renderRpcTab(result, items);
renderHttpTab(result, items);
setTabItems(items);
setSelectedKeys(keys);
localStorage.setItem('lastSelectedKeys', JSON.stringify(keys));
},
(error) => {
console.log(error);
},
);
};
const renderApplication = (keys) => {
if (!keys[0]) {
return;
}
fetch('/api/applications/' + keys[0].replace('application.', ''))
.then((res) => {
if (res.status != 200) {
res.json().then(
(result) => {
openBackendNotification(result.error);
},
(error) => {
openRequestErrorNotification(res.url, res.statusText);
},
);
throw new Error('Request Error');
}
return res.json();
})
.then(
(result) => {
let items = [];
renderApplicationTab(result, items);
setTabItems(items);
},
(error) => {
console.log(error);
},
);
};
const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
if (info.node.kind === 'service') {
renderDetails(keys);
} else if (info.node.kind === 'application') {
renderApplication(keys);
}
};
const onExpand: DirectoryTreeProps['onExpand'] = (keys, info) => {
setExpandedKeys(keys);
localStorage.setItem('lastExpandedKeys', JSON.stringify(keys));
};
useEffect(() => {
fetch('/api/services')
.then((res) => {
if (res.status != 200) {
res.json().then(
(result) => {
openBackendNotification(result.error);
},
(error) => {
openRequestErrorNotification(res.url, res.statusText);
},
);
throw new Error('Request Error');
}
return res.json();
})
.then(
(result) => {
let treeData = {};
let defaultExpandedKeys = [];
treeData = traverse(result, treeData, defaultExpandedKeys);
// Expand first application to show meta data of first Service
defaultExpandedKeys.push(treeData.children[0].children[0].key);
// Use first service as the default Service
let firstService = treeData.children[0].children[0].children[0].key;
let expandedKeys = defaultExpandedKeys;
let selectedKeys = [firstService];
let eKeys = localStorage.getItem('lastExpandedKeys');
let sKeys = localStorage.getItem('lastSelectedKeys');
if (eKeys && sKeys) {
expandedKeys = JSON.parse(eKeys);
selectedKeys = JSON.parse(sKeys);
}
setTreeData([treeData]);
setExpandedKeys(expandedKeys);
setSelectedKeys(selectedKeys);
renderDetails(selectedKeys);
},
(error) => {
console.log(error);
},
);
}, []);
return (
Service Tree{' '}
);
};