yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-09 07:23:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix the styling of ingestion pipeline status (#15715)

Browse Source
This commit is contained in:
Aniket Katkar 2024-04-01 18:51:06 +05:30 committed by GitHub
parent 740480fe28
commit ac7828fffe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 29 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionRecentRun/IngestionRecentRuns.component.tsx
View File

@ -15,6 +15,7 @@ import { Button, Popover, Skeleton, Space, Tag } from 'antd';
import Modal from 'antd/lib/modal/Modal'; import Modal from 'antd/lib/modal/Modal';
import { ColumnType } from 'antd/lib/table'; import { ColumnType } from 'antd/lib/table';
import { ExpandableConfig } from 'antd/lib/table/interface'; import { ExpandableConfig } from 'antd/lib/table/interface';
import classNamesFunc from 'classnames';
import { isEmpty, startCase } from 'lodash'; import { isEmpty, startCase } from 'lodash';
import React, { import React, {
FunctionComponent, FunctionComponent,
@ -136,7 +137,7 @@ export const IngestionRecentRuns: FunctionComponent<Props> = ({
setLoading(true); setLoading(true);
try { try {
const response = await getRunHistoryForPipeline( const response = await getRunHistoryForPipeline(
ingestion.fullyQualifiedName || '', ingestion.fullyQualifiedName ?? '',
queryParams queryParams
); );
@ -163,44 +164,38 @@ export const IngestionRecentRuns: FunctionComponent<Props> = ({
setSelectedStatus(status); setSelectedStatus(status);
}; };
if (loading) {
return <Skeleton.Input size="small" />;
}
return ( return (
<Space className={classNames} size={2}> <Space className={classNames} size={2}>
{loading ? ( {isEmpty(recentRunStatus) ? (
<Skeleton.Input size="small" />
) : isEmpty(recentRunStatus) ? (
<p data-testid="pipeline-status">--</p> <p data-testid="pipeline-status">--</p>
) : ( ) : (
recentRunStatus.map((r, i) => { recentRunStatus.map((r, i) => {
const status = const status = (
i === recentRunStatus.length - 1 ? (
<Tag <Tag
className="ingestion-run-badge latest cursor-pointer" className={classNamesFunc('ingestion-run-badge', {
latest: i === recentRunStatus.length - 1,
})}
color={ color={
PIPELINE_INGESTION_RUN_STATUS[r?.pipelineState ?? 'success'] PIPELINE_INGESTION_RUN_STATUS[r?.pipelineState ?? 'success']
} }
data-testid="pipeline-status" data-testid="pipeline-status"
key={i} key={`${r.runId}-status`}
onClick={() => handleRunStatusClick(r)}> onClick={() => handleRunStatusClick(r)}>
{startCase(r?.pipelineState)} {i === recentRunStatus.length - 1
? startCase(r?.pipelineState)
: ''}
</Tag> </Tag>
) : (
<Tag
className="ingestion-run-badge cursor-pointer"
color={
PIPELINE_INGESTION_RUN_STATUS[r?.pipelineState ?? 'success']
}
data-testid="pipeline-status"
key={i}
onClick={() => handleRunStatusClick(r)}
/>
); );
const showTooltip = r?.endDate || r?.startDate || r?.timestamp; const showTooltip = r?.endDate ?? r?.startDate ?? r?.timestamp;
return showTooltip ? ( return showTooltip ? (
<Popover <Popover
key={i} content={
title={
<div className="text-left"> <div className="text-left">
{r.timestamp && ( {r.timestamp && (
<p> <p>
@ -220,7 +215,8 @@ export const IngestionRecentRuns: FunctionComponent<Props> = ({
</p> </p>
)} )}
</div> </div>
}> }
key={`${r.runId}-timestamp`}>
{status} {status}
</Popover> </Popover>
) : ( ) : (

3
openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionRecentRun/ingestion-recent-run.style.less
View File

@ -10,7 +10,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
.ingestion-run-badge { .ant-tag.ingestion-run-badge {
display: block; display: block;
border-radius: 0.125rem; border-radius: 0.125rem;
font-size: 14px; font-size: 14px;
@ -18,6 +18,7 @@
height: 1.25rem; height: 1.25rem;
width: 1rem; width: 1rem;
margin: 0; margin: 0;
cursor: pointer;
&.latest { &.latest {
width: auto; width: auto;