topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-10 19:51:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[improvement][semantic-fe] UI adjustment for metric details page. (#617)

Browse Source 
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab.
[improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions.
[improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager.

* [improvement][semantic-fe] Add time granularity setting in the data source configuration.

* [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility

* [improvement][semantic-fe] Modification of data source creation prompt wording"

* [improvement][semantic-fe] metric market experience optimization

* [improvement][semantic-fe] enhance the analysis of metric trends

* [improvement][semantic-fe] optimize the presentation of metric trend permissions

* [improvement][semantic-fe] add metric trend download functionality

* [improvement][semantic-fe] fix the dimension initialization issue in metric correlation

* [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source.

* [improvement][semantic-fe] Optimizing pagination logic and some CSS styles

* [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum"

* [improvement][semantic-fe] Fixing the default value setting for the indicator list

* [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models

* [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API

* [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators

* [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality

* [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.

* [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not.

* [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas.

* [improvement][semantic-fe] Updating the datePicker component to use dayjs instead.

* [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market.

* [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model.

* [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market.

* [improvement][semantic-fe] Adding the ability to download and transpose data.

* [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity.

* [improvement][semantic-fe] Fixing the logic error in the dimension value setting.

* [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information.

* [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience.

* [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas.

* [improvement][semantic-fe] Changing the line type for canvas connections.

* [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless".

* [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model.

* [improvement][semantic-fe] Updating the logic for the fieldName.

* [improvement][semantic-fe] Adjusting the position of the metrics tab.

* [improvement][semantic-fe] Changing the 字段名称 to 英文名称.

* [improvement][semantic-fe] Fix metric measurement deletion.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI adjustment for metric details page.
This commit is contained in:
tristanliu
2024-01-11 15:20:38 +08:00
committed by GitHub
parent 1e93282c9f
commit 3a5349c916
9 changed files with 234 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
View File

@@ -1,6 +1,6 @@
import { message } from 'antd';
import React, { useState, useEffect } from 'react';
import { getMetricData } from '../service';
import { getMetricData, getDimensionList, getDrillDownDimension } from '../service';
import { connect, useParams } from 'umi';
import type { StateType } from '../model';
import styles from './style.less';
@@ -9,29 +9,21 @@ import { ISemantic } from '../data';
import DimensionAndMetricRelationModal from '../components/DimensionAndMetricRelationModal';
import MetricInfoSider from './MetricInfoSider';
type Props = {
metircData: any;
domainManger: StateType;
onNodeChange: (params?: { eventName?: string }) => void;
onEditBtnClick?: (metircData: any) => void;
[key: string]: any;
};
type Props = Record<string, any>;
const siderStyle: React.CSSProperties = {
backgroundColor: '#fff',
width: 450,
minHeight: '100vh',
boxShadow:
'6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05)',
};
const MetricDetail: React.FC<Props> = ({ domainManger }) => {
const MetricDetail: React.FC<Props> = () => {
const params: any = useParams();
const metricId = params.metricId;
const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
const [relationDimensionOptions, setRelationDimensionOptions] = useState<
{ value: string; label: string; modelId: number }[]
>([]);
useEffect(() => {
queryMetricData(metricId);
queryDrillDownDimension(metricId);
}, [metricId]);
const queryMetricData = async (metricId: string) => {
@@ -43,15 +35,56 @@ const MetricDetail: React.FC<Props> = ({ domainManger }) => {
message.error(msg);
};
const queryDrillDownDimension = async (metricId: number) => {
const { code, data, msg } = await getDrillDownDimension(metricId);
if (code === 200 && Array.isArray(data)) {
const ids = data.map((item) => item.dimensionId);
queryDimensionList(ids);
return data;
} else {
setDimensionList([]);
setRelationDimensionOptions([]);
}
if (code !== 200) {
message.error(msg);
}
return [];
};
const queryDimensionList = async (ids: number[]) => {
if (!(Array.isArray(ids) && ids.length > 0)) {
setRelationDimensionOptions([]);
return;
}
const { code, data, msg } = await getDimensionList({ ids });
if (code === 200 && Array.isArray(data?.list)) {
setDimensionList(data.list);
setRelationDimensionOptions(
data.list.map((item: ISemantic.IMetricItem) => {
return { label: item.name, value: item.bizName, modelId: item.modelId };
}),
);
return data.list;
}
message.error(msg);
return [];
};
return (
<>
<div className={styles.metricDetailWrapper}>
<div className={styles.metricDetail}>
<div className={styles.tabContainer}>
<MetricTrendSection metircData={metircData} />
<MetricTrendSection
metircData={metircData}
relationDimensionOptions={relationDimensionOptions}
dimensionList={dimensionList}
/>
</div>
<div style={siderStyle}>
<div className={styles.siderContainer}>
<MetricInfoSider
relationDimensionOptions={relationDimensionOptions}
metircData={metircData}
onDimensionRelationBtnClick={() => {
setMetricRelationModalOpenState(true);
}}
@@ -68,6 +101,7 @@ const MetricDetail: React.FC<Props> = ({ domainManger }) => {
}}
onSubmit={(relations) => {
queryMetricData(metricId);
queryDrillDownDimension(metricId);
setMetricRelationModalOpenState(false);
}}
/>

8
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
View File

@@ -310,14 +310,16 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const handleFilterChange = async (filterParams: {
key: string;
sensitiveLevel: string;
sensitiveLevel: string[];
showFilter: string[];
type: string;
}) => {
const { sensitiveLevel, type } = filterParams;
const { sensitiveLevel, type, showFilter } = filterParams;
const params: QueryMetricListParams = { ...filterParams };
const sensitiveLevelValue = sensitiveLevel?.[0];
const showFilterValue = showFilter?.[0];
const typeValue = type?.[0];
showFilterValue ? (params[showFilterValue] = true) : null;
params.sensitiveLevel = sensitiveLevelValue;
params.type = typeValue;
setFilterParams(params);

122
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/MetricInfoSider.tsx
View File

@@ -1,15 +1,16 @@
import { message, Tag, Space, Tooltip } from 'antd';
import React, { useState, useEffect, ReactNode } from 'react';
import { getMetricData } from '../service';
import { connect, useParams } from 'umi';
import { Tag, Space, Tooltip } from 'antd';
import React from 'react';
import { connect } from 'umi';
import type { StateType } from '../model';
import { isArrayOfValues } from '@/utils/utils';
import dayjs from 'dayjs';
import {
ExportOutlined,
SolutionOutlined,
ContainerOutlined,
PartitionOutlined,
FallOutlined,
PlusOutlined,
AreaChartOutlined,
DeleteOutlined,
} from '@ant-design/icons';
import styles from './style.less';
@@ -18,38 +19,26 @@ import { ISemantic } from '../data';
import MetricStar from './components/MetricStar';
type Props = {
metircData: any;
metircData: ISemantic.IMetricItem;
domainManger: StateType;
relationDimensionOptions: { value: string; label: string; modelId: number }[];
onNodeChange: (params?: { eventName?: string }) => void;
onEditBtnClick?: (metircData: any) => void;
onDimensionRelationBtnClick?: () => void;
[key: string]: any;
};
const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
const params: any = useParams();
const metricId = params.metricId;
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
useEffect(() => {
queryMetricData(metricId);
}, [metricId]);
const queryMetricData = async (metricId: string) => {
const { code, data, msg } = await getMetricData(metricId);
if (code === 200) {
setMetircData(data);
return;
}
message.error(msg);
};
const MetricInfoSider: React.FC<Props> = ({
metircData,
relationDimensionOptions,
onDimensionRelationBtnClick,
}) => {
return (
<div className={styles.metricInfoSider}>
<div className={styles.title}>
<div className={styles.name}>
<Space>
<MetricStar metricId={metricId} initState={metircData?.isCollect} />
<MetricStar metricId={metircData?.id} initState={metircData?.isCollect} />
{metircData?.name}
{metircData?.alias && `[${metircData.alias}]`}
{metircData?.hasAdminRes && (
@@ -64,20 +53,13 @@ const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
</Tooltip>
</span>
)}
{metircData?.sensitiveLevel !== undefined && (
<span style={{ marginLeft: 25 }}>
<Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
{SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}
</Tag>
</span>
)}
</Space>
</div>
{metircData?.bizName && <div className={styles.bizName}>{metircData.bizName}</div>}
</div>
<div className={styles.sectionContainer}>
<hr className={styles.hr} />
<div className={styles.section}>
<div className={styles.sectionTitleBox}>
<span className={styles.sectionTitle}>
@@ -88,6 +70,19 @@ const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
</span>
</div>
<div className={styles.item}>
<span className={styles.itemLable}>敏感度: </span>
<span className={styles.itemValue}>
{metircData?.sensitiveLevel !== undefined && (
<span>
<Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
{SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}
</Tag>
</span>
)}
</span>
</div>
<div className={styles.item}>
<span className={styles.itemLable}>所属模型: </span>
<span className={styles.itemValue}>
@@ -115,7 +110,7 @@ const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
<span className={styles.itemValue}>{metircData?.description}</span>
</div>
</div>
<hr className={styles.hr} />
<div className={styles.section}>
<div className={styles.sectionTitleBox}>
<span className={styles.sectionTitle}>
@@ -148,22 +143,61 @@ const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
</div>
</div>
<hr className={styles.hr} />
<div className={styles.section}>
<div className={styles.sectionTitleBox}>
<span className={styles.sectionTitle}>
<Space>
<AreaChartOutlined />
应用信息
</Space>
</span>
</div>
{isArrayOfValues(metircData?.tags) && (
<div className={styles.item}>
<span className={styles.itemLable}>标签: </span>
<span className={styles.itemValue}>
<Space size={2} wrap>
{metircData?.tags.map((tag) => (
<Tag color="blue" key={tag}>
{tag}
</Tag>
))}
</Space>
</span>
</div>
)}
</div>
<div className={styles.ctrlBox}>
<ul className={styles.ctrlList}>
<li
onClick={() => {
onDimensionRelationBtnClick?.();
}}
>
<Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
<Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
<li
style={{ display: 'block' }}
onClick={() => {
onDimensionRelationBtnClick?.();
}}
>
<Space style={{ width: '100%' }}>
<div className={styles.subTitle}>下钻维度</div>
<span className={styles.ctrlItemIcon}>
<FallOutlined />
<PlusOutlined />
</span>
<span className={styles.ctrlItemLable}>下钻维度配置</span>
</Space>
</Tooltip>
</li>
{isArrayOfValues(relationDimensionOptions) && (
<div style={{ marginLeft: 0, marginTop: 20 }}>
<Space size={5} wrap>
{relationDimensionOptions.map((item) => (
<Tag color="blue" key={item.value} style={{ marginRight: 0 }}>
{item.label}
</Tag>
))}
</Space>
</div>
)}
</li>
</Tooltip>
{/* <li
onClick={() => {
onDimensionRelationBtnClick?.();

29
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
View File

@@ -33,6 +33,20 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
};
const filterList = [
{
title: '展示类型',
key: 'showFilter',
options: [
{
label: '我创建的',
value: 'onlyShowMe',
},
{
label: '我收藏的',
value: 'hasCollect',
},
],
},
{
title: '敏感度',
key: 'sensitiveLevel',
@@ -89,16 +103,12 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
<Switch size="small" />
</FormItem>
</StandardFormRow>
<StandardFormRow key="onlyShowMe" title="仅显示我的" block>
{/* <StandardFormRow key="onlyShowMe" title="仅显示我的" block>
<FormItem name="onlyShowMe" valuePropName="checked">
<Switch size="small" />
</FormItem>
</StandardFormRow>
<StandardFormRow key="domainIds" title="所属主题域" block>
<FormItem name="domainIds">
<DomainTreeSelect />
</FormItem>
</StandardFormRow>
</StandardFormRow> */}
{filterList.map((item) => {
const { title, key, options } = item;
return (
@@ -115,6 +125,11 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
</StandardFormRow>
);
})}
<StandardFormRow key="domainIds" title="所属主题域" block>
<FormItem name="domainIds">
<DomainTreeSelect />
</FormItem>
</StandardFormRow>
</Space>
</Form>
);

5
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricStar.tsx
View File

@@ -1,5 +1,5 @@
import { Tooltip, message } from 'antd';
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { metricStarState } from '../../service';
import MStar from '@/components/MStar';
@@ -11,6 +11,9 @@ type Props = {
const MetricStar: React.FC<Props> = ({ metricId, initState = false }) => {
const [star, setStar] = useState<boolean>(initState);
useEffect(() => {
setStar(initState);
}, [initState]);
const starStateChange = async (id: number, state: boolean) => {
const { code, msg } = await metricStarState({ id, state });

113
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
View File

@@ -1,12 +1,7 @@
import React, { useState, useEffect, useRef } from 'react';
import { message, Row, Col, Button, Space, Select, Form, Tooltip, Radio } from 'antd';
import {
queryStruct,
getDrillDownDimension,
getDimensionList,
} from '@/pages/SemanticModel/service';
import { InfoCircleOutlined, DownloadOutlined, PoweroffOutlined } from '@ant-design/icons';
import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
import { message, Row, Col, Button, Space, Select, Form, Tooltip } from 'antd';
import { queryStruct } from '@/pages/SemanticModel/service';
import { DownloadOutlined, PoweroffOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend';
import MetricTrendDimensionFilterContainer from './MetricTrendDimensionFilterContainer';
import MDatePicker from '@/components/MDatePicker';
@@ -16,6 +11,7 @@ import StandardFormRow from '@/components/StandardFormRow';
import MetricTable from './Table';
import { ColumnConfig } from '../data';
import dayjs from 'dayjs';
import { history } from 'umi';
import { ISemantic } from '../../data';
import { DateFieldMap } from '@/pages/SemanticModel/constant';
import ProCard from '@ant-design/pro-card';
@@ -25,28 +21,25 @@ import styles from '../style.less';
const FormItem = Form.Item;
type Props = {
relationDimensionOptions: { value: string; label: string; modelId: number }[];
dimensionList: ISemantic.IDimensionItem[];
metircData?: ISemantic.IMetricItem;
[key: string]: any;
};
const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
const MetricTrendSection: React.FC<Props> = ({
metircData,
relationDimensionOptions,
dimensionList,
}) => {
const indicatorFields = useRef<{ name: string; column: string }[]>([]);
const [metricTrendData, setMetricTrendData] = useState<ISemantic.IMetricTrendItem[]>([]);
const [metricTrendLoading, setMetricTrendLoading] = useState<boolean>(false);
const [metricColumnConfig, setMetricColumnConfig] = useState<ISemantic.IMetricTrendColumn>();
const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
const [drillDownDimensions, setDrillDownDimensions] = useState<
ISemantic.IDrillDownDimensionItem[]
>(metircData?.relateDimension?.drillDownDimensions || []);
const [authMessage, setAuthMessage] = useState<string>('');
const [downloadLoding, setDownloadLoding] = useState<boolean>(false);
const [relationDimensionOptions, setRelationDimensionOptions] = useState<
{ value: string; label: string; modelId: number }[]
>([]);
const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
const [queryParams, setQueryParams] = useState<any>({});
const [downloadBtnDisabledState, setDownloadBtnDisabledState] = useState<boolean>(true);
// const [showDimensionOptions, setShowDimensionOptions] = useState<any[]>([]);
const [periodDate, setPeriodDate] = useState<{
startDate: string;
endDate: string;
@@ -57,7 +50,7 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
dateField: DateFieldMap[DateRangeType.DAY],
});
const [rowNumber, setRowNumber] = useState<number>(5);
const [chartType, setChartType] = useState<'chart' | 'table'>('chart');
const [tableColumnConfig, setTableColumnConfig] = useState<ColumnConfig[]>([]);
const [transformState, setTransformState] = useState<boolean>(false);
@@ -138,60 +131,19 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
}
};
const queryDimensionList = async (ids: number[]) => {
if (!(Array.isArray(ids) && ids.length > 0)) {
return;
}
const { code, data, msg } = await getDimensionList({ ids });
if (code === 200 && Array.isArray(data?.list)) {
setDimensionList(data.list);
setRelationDimensionOptions(
data.list.map((item: ISemantic.IMetricItem) => {
return { label: item.name, value: item.bizName, modelId: item.modelId };
}),
);
return data.list;
}
message.error(msg);
return [];
};
const queryDrillDownDimension = async (metricId: number) => {
const { code, data, msg } = await getDrillDownDimension(metricId);
if (code === 200 && Array.isArray(data)) {
const ids = data.map((item) => item.dimensionId);
queryDimensionList(ids);
return data;
} else {
setDimensionList([]);
setRelationDimensionOptions([]);
}
if (code !== 200) {
message.error(msg);
}
return [];
};
const initDimensionData = async (metricItem: ISemantic.IMetricItem) => {
await queryDrillDownDimension(metricItem.id);
};
useEffect(() => {
if (metircData?.id) {
getMetricTrendData({ ...queryParams });
initDimensionData(metircData);
setDrillDownDimensions(metircData?.relateDimension?.drillDownDimensions || []);
}
}, [metircData, periodDate]);
return (
<div className={styles.metricTrendSection}>
<div className={styles.sectionBox}>
<Row>
<Row style={{ padding: '10px 10px 0px 10px' }}>
<Col flex="1 1 200px">
<Form
layout="inline"
// form={form}
colon={false}
onValuesChange={(value, values) => {
if (value.key) {
@@ -269,6 +221,27 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
</Col>
<Col flex="0 1" />
</Row>
<Button
style={{
position: 'absolute',
top: 20,
right: 20,
}}
size="middle"
type="link"
key="backListBtn"
onClick={() => {
history.push('/metric/market');
}}
>
<Space>
<ArrowLeftOutlined />
返回列表页
</Space>
</Button>
{/* <div className={styles.btnWrapper}>
</div> */}
</div>
{authMessage && <div style={{ color: '#d46b08', marginBottom: 15 }}>{authMessage}</div>}
<div className={styles.sectionBox}>
@@ -292,7 +265,7 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
loading={metricTrendLoading}
dateFieldName={periodDate.dateField}
groupByDimensionFieldName={groupByDimensionFieldName}
height={400}
height={350}
renderType="clear"
decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
/>
@@ -302,7 +275,7 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
<div className={styles.sectionBox}>
<ProCard
size="small"
title="源数据"
title="数据明细"
collapsible
extra={
<Space.Compact block>
@@ -345,20 +318,6 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
</div>
</ProCard>
</div>
<DimensionAndMetricRelationModal
metricItem={metircData}
relationsInitialValue={drillDownDimensions}
open={metricRelationModalOpenState}
onCancel={() => {
setMetricRelationModalOpenState(false);
}}
onSubmit={(relations) => {
setDrillDownDimensions(relations);
setMetricRelationModalOpenState(false);
initDimensionData(metircData!);
}}
/>
</div>
);
};

46
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
View File

@@ -2,6 +2,7 @@
margin: 20px;
padding: 20px;
border-radius: 10px;
padding-bottom: 5px;
background: #fff;
}
@@ -154,18 +155,27 @@
}
}
}
.siderContainer {
background-color: rgb(255, 255, 255);
width: 450px;
min-height: 100vh;
margin: 20px 20px 20px 0;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.08) 6px 0px 16px 0px, rgba(0, 0, 0, 0.12) 3px 0px 6px -4px, rgba(0, 0, 0, 0.05) 9px 0px 28px 8px;
}
}
}
.metricTrendSection {
.sectionBox {
margin: 20px;
padding: 20px;
padding: 10px;
box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
background-color: rgb(255, 255, 255);
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border-radius: 6px;
background-image: none;
overflow: hidden;
position: relative;
}
}
@@ -198,10 +208,22 @@
display: block;
color: #7b809a;
}
.subTitle {
margin: 0px;
font-size: 14px;
line-height: 1.25;
letter-spacing: 0.03333em;
opacity: 1;
text-transform: uppercase;
vertical-align: unset;
text-decoration: none;
color: rgb(123, 128, 154);
font-weight: 700;
}
.sectionContainer{
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
// transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border-radius: 6px;
box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
// box-shadow: #888888 0px 0px 1px, rgba(29, 41, 57, 0.08) 0px 1px 3px;
background-image: none;
margin-top: 20px;
overflow: hidden;
@@ -231,19 +253,7 @@
font-weight: 600;
}
}
.subTitle {
margin: 0px;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.25;
letter-spacing: 0.03333em;
opacity: 1;
text-transform: uppercase;
vertical-align: unset;
text-decoration: none;
color: rgb(123, 128, 154);
font-weight: 700;
}
.item {
display: flex;
padding-top: 8px;
@@ -284,7 +294,7 @@
.hr {
margin: 0px;
flex-shrink: 0;
border-width: 0px 0px thin;
// border-width: 0px 0px thin;
border-style: solid;
border-color: rgb(242, 244, 247);
}
@@ -329,7 +339,7 @@
}
.ctrlItemIcon {
flex-shrink: 0;
font-size: 16px;
font-size: 14px;
margin-right: 5px;
min-width: unset;
}

1
webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts vendored
View File

@@ -200,6 +200,7 @@ export declare namespace ISemantic {
modelId: number;
hasAdminRes: boolean;
type: string;
tags: string[];
typeParams: ITypeParams;
fullPath: string;
dataFormatType: string;

7
webapp/packages/supersonic-fe/src/utils/utils.ts
View File

@@ -434,3 +434,10 @@ export function traverseRoutes(routes, env: string, result: any[] = []) {
export function isProd() {
return process.env.NODE_ENV === 'production';
}
export function isArrayOfValues(array: any) {
if (array && Array.isArray(array) && array.length > 0) {
return true;
}
return false;
}