yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-01 11:09:14 +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

58
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 { ColumnType } from 'antd/lib/table';
import { ExpandableConfig } from 'antd/lib/table/interface';
import classNamesFunc from 'classnames';
import { isEmpty, startCase } from 'lodash';
import React, {
FunctionComponent,
@ -136,7 +137,7 @@ export const IngestionRecentRuns: FunctionComponent<Props> = ({
setLoading(true);
try {
const response = await getRunHistoryForPipeline(
ingestion.fullyQualifiedName || '',
ingestion.fullyQualifiedName ?? '',
queryParams
);
@ -163,44 +164,38 @@ export const IngestionRecentRuns: FunctionComponent<Props> = ({
setSelectedStatus(status);
};
if (loading) {
return <Skeleton.Input size="small" />;
}
return (
<Space className={classNames} size={2}>
{loading ? (
<Skeleton.Input size="small" />
) : isEmpty(recentRunStatus) ? (
{isEmpty(recentRunStatus) ? (
<p data-testid="pipeline-status">--</p>
) : (
recentRunStatus.map((r, i) => {
const status =
i === recentRunStatus.length - 1 ? (
<Tag
className="ingestion-run-badge latest cursor-pointer"
color={
PIPELINE_INGESTION_RUN_STATUS[r?.pipelineState ?? 'success']
}
data-testid="pipeline-status"
key={i}
onClick={() => handleRunStatusClick(r)}>
{startCase(r?.pipelineState)}
</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 status = (
<Tag
className={classNamesFunc('ingestion-run-badge', {
latest: i === recentRunStatus.length - 1,
})}
color={
PIPELINE_INGESTION_RUN_STATUS[r?.pipelineState ?? 'success']
}
data-testid="pipeline-status"
key={`${r.runId}-status`}
onClick={() => handleRunStatusClick(r)}>
{i === recentRunStatus.length - 1
? startCase(r?.pipelineState)
: ''}
</Tag>
);
const showTooltip = r?.endDate || r?.startDate || r?.timestamp;
const showTooltip = r?.endDate ?? r?.startDate ?? r?.timestamp;
return showTooltip ? (
<Popover
key={i}
title={
content={
<div className="text-left">
{r.timestamp && (
<p>
@ -220,7 +215,8 @@ export const IngestionRecentRuns: FunctionComponent<Props> = ({
</p>
)}
</div>
}>
}
key={`${r.runId}-timestamp`}>
{status}
</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
* limitations under the License.
*/
.ingestion-run-badge {
.ant-tag.ingestion-run-badge {
display: block;
border-radius: 0.125rem;
font-size: 14px;
@ -18,6 +18,7 @@
height: 1.25rem;
width: 1rem;
margin: 0;
cursor: pointer;
&.latest {
width: auto;