mirror of
https://github.com/didi/KnowStreaming.git
synced 2025-12-24 11:52:08 +08:00
feat: Cluster 图表去掉放大功能
This commit is contained in:
GraceWalk
@@ -1,53 +1,20 @@
|
||||
.cluster-container-border {
|
||||
background: #ffffff;
|
||||
.cluster-detail-container-border {
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.cluster-detail-container {
|
||||
width: 100%;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
|
||||
.refresh-icon-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 14px;
|
||||
color: #74788d;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #21252904;
|
||||
|
||||
.refresh-icon {
|
||||
color: #495057;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
.header-chart-container {
|
||||
width: 100%;
|
||||
height: 244px;
|
||||
margin-bottom: 12px;
|
||||
.cluster-container-border();
|
||||
.cluster-detail-container-border();
|
||||
.dcloud-spin.dcloud-spin-spinning {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 244px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,7 +28,7 @@
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.cluster-container-border();
|
||||
.cluster-detail-container-border();
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -73,65 +40,64 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 244px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
|
||||
.expand-icon-box {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 14px;
|
||||
right: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
.expand-icon {
|
||||
color: #adb5bc;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(33, 37, 41, 0.06);
|
||||
.expand-icon {
|
||||
color: #74788d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-change-records-container {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
margin-left: 12px;
|
||||
.cluster-container-border();
|
||||
.cluster-detail-container-border();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-box-title {
|
||||
padding: 18px 0 0 20px;
|
||||
font-family: @font-family-bold;
|
||||
line-height: 16px;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #212529;
|
||||
.cluster-detail-chart-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 244px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
|
||||
.expand-icon-box {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 14px;
|
||||
right: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
.expand-icon {
|
||||
color: #adb5bc;
|
||||
line-height: 24px;
|
||||
}
|
||||
.unit {
|
||||
font-size: 12px;
|
||||
color: #495057;
|
||||
}
|
||||
> span {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(33, 37, 41, 0.06);
|
||||
.expand-icon {
|
||||
color: #74788d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cluster-detail-chart-box-title {
|
||||
padding: 18px 0 0 20px;
|
||||
font-family: @font-family-bold;
|
||||
line-height: 16px;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #212529;
|
||||
}
|
||||
.unit {
|
||||
font-size: 12px;
|
||||
color: #495057;
|
||||
}
|
||||
> span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,6 +15,7 @@ import { getDataNumberUnit, getUnit } from '@src/constants/chartConfig';
|
||||
import SingleChartHeader, { KsHeaderOptions } from '@src/components/SingleChartHeader';
|
||||
import { MAX_TIME_RANGE_WITH_SMALL_POINT_INTERVAL } from '@src/constants/common';
|
||||
import RenderEmpty from '@src/components/RenderEmpty';
|
||||
import DragGroup from '@src/components/DragGroup';
|
||||
|
||||
type ChartFilterOptions = Omit<KsHeaderOptions, 'gridNum'>;
|
||||
interface MetricInfo {
|
||||
@@ -279,7 +280,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="cluster-detail-container">
|
||||
<div className="chart-panel cluster-detail-container">
|
||||
<SingleChartHeader
|
||||
onChange={ksHeaderChange}
|
||||
hideNodeScope={true}
|
||||
@@ -306,7 +307,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
|
||||
<Spin spinning={defaultChartLoading}>
|
||||
{messagesInMetricData.data && (
|
||||
<>
|
||||
<div className="chart-box-title">
|
||||
<div className="cluster-detail-chart-box-title">
|
||||
<Tooltip
|
||||
placement="topLeft"
|
||||
title={() => {
|
||||
@@ -354,14 +355,25 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
|
||||
<div className="multiple-chart-container">
|
||||
<div className={!metricDataList.length ? 'multiple-chart-container-loading' : ''}>
|
||||
<Spin spinning={chartLoading}>
|
||||
<Row gutter={[16, 16]}>
|
||||
{metricDataList.length ? (
|
||||
metricDataList.map((data: any, i: number) => {
|
||||
const { metricName, metricUnit, metricLines } = data;
|
||||
return (
|
||||
<Col key={metricName} span={12}>
|
||||
<div className="chart-box">
|
||||
<div className="chart-box-title">
|
||||
{metricDataList.length ? (
|
||||
<div className="no-group-con">
|
||||
<DragGroup
|
||||
sortableContainerProps={{
|
||||
onSortStart: () => 0,
|
||||
onSortEnd: () => 0,
|
||||
axis: 'xy',
|
||||
useDragHandle: false,
|
||||
}}
|
||||
gridProps={{
|
||||
span: 12,
|
||||
gutter: [16, 16],
|
||||
}}
|
||||
>
|
||||
{metricDataList.map((data: any, i: number) => {
|
||||
const { metricName, metricUnit, metricLines } = data;
|
||||
return (
|
||||
<div key={metricName} className="cluster-detail-chart-box">
|
||||
<div className="cluster-detail-chart-box-title">
|
||||
<Tooltip
|
||||
placement="topLeft"
|
||||
title={() => {
|
||||
@@ -379,15 +391,6 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className="expand-icon-box"
|
||||
onClick={() => {
|
||||
setChartDetail(data);
|
||||
setShowChartDetailModal(true);
|
||||
}}
|
||||
>
|
||||
<IconFont type="icon-chuangkoufangda" className="expand-icon" />
|
||||
</div>
|
||||
<SingleChart
|
||||
chartKey={metricName}
|
||||
showHeader={false}
|
||||
@@ -405,15 +408,15 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
})
|
||||
) : chartLoading ? (
|
||||
<></>
|
||||
) : (
|
||||
<RenderEmpty message="请先选择指标或刷新" />
|
||||
)}
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
</DragGroup>
|
||||
</div>
|
||||
) : chartLoading ? (
|
||||
<></>
|
||||
) : (
|
||||
<RenderEmpty message="请先选择指标或刷新" />
|
||||
)}
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
@@ -421,35 +424,6 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
|
||||
<div className="config-change-records-container">{props.children}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 图表详情 */}
|
||||
<Modal
|
||||
width={1080}
|
||||
visible={showChartDetailModal}
|
||||
centered={true}
|
||||
footer={null}
|
||||
closable={false}
|
||||
onCancel={() => setShowChartDetailModal(false)}
|
||||
>
|
||||
<div className="chart-detail-modal-container">
|
||||
<div className="expand-icon-box" onClick={() => setShowChartDetailModal(false)}>
|
||||
<IconFont type="icon-chuangkousuoxiao" className="expand-icon" />
|
||||
</div>
|
||||
{chartDetail && (
|
||||
<SingleChart
|
||||
chartTypeProp="line"
|
||||
wrapStyle={{
|
||||
width: 'auto',
|
||||
height: 462,
|
||||
}}
|
||||
propChartData={chartDetail.metricLines}
|
||||
{...getChartConfig({
|
||||
metricName: `${chartDetail.metricName}{unit|（${chartDetail.metricUnit}）}`,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -231,9 +231,10 @@
|
||||
}
|
||||
|
||||
.chart-panel {
|
||||
flex: 1;
|
||||
flex: auto;
|
||||
margin-left: 12px;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.change-log-panel {
|
||||
|
||||
@@ -21,11 +21,9 @@ const SingleClusterDetail = (): JSX.Element => {
|
||||
</div>
|
||||
<div className="cluster-detail">
|
||||
<LeftSider />
|
||||
<div className="chart-panel">
|
||||
<ChartPanel>
|
||||
<ChangeLog />
|
||||
</ChartPanel>
|
||||
</div>
|
||||
<ChartPanel>
|
||||
<ChangeLog />
|
||||
</ChartPanel>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user