Skip to content

Commit

Permalink
Fix [UI] Preview table is hidden from view 1.4.x (#1807)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ilan7empest
ilan7empest authored Jul 17, 2023
1 parent 3d52088 commit a058bf9
Show file tree
Hide file tree
Showing 6 changed files with 234 additions and 255 deletions.
25 changes: 17 additions & 8 deletions src/components/ArtifactsPreview/ArtifactsPreview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,13 @@ import React, { useState } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

import Accordion from '../../common/Accordion/Accordion'
import ArtifactsPreviewView from './ArtifactsPreviewView'
import Loader from '../../common/Loader/Loader'
import NoData from '../../common/NoData/NoData'

import { ReactComponent as Arrow } from 'igz-controls/images/arrow.svg'

const ArtifactsPreview = ({ className, extraData, noData, preview, showExtraDataLoader }) => {
const [showErrorBody, setShowErrorBody] = useState(false)
const artifactsPreviewClasses = classnames('artifact-preview', className)
Expand All @@ -50,14 +53,20 @@ const ArtifactsPreview = ({ className, extraData, noData, preview, showExtraData
<div className="artifact-extra-data">
<h1 className="artifact-extra-data__header">Extra Data</h1>
{extraData.map((extraDataItem, index) => (
<ArtifactsPreviewView
className={artifactsPreviewClasses}
key={index}
preview={extraDataItem}
setShowErrorBody={setShowErrorBody}
showAccordion
showErrorBody={showErrorBody}
/>
<Accordion
icon={<Arrow />}
iconClassName="expand-icon"
alwaysOpened={false}
openByDefault={false}
>
<ArtifactsPreviewView
className={artifactsPreviewClasses}
key={index}
preview={extraDataItem}
setShowErrorBody={setShowErrorBody}
showErrorBody={showErrorBody}
/>
</Accordion>
))}
</div>
)}
Expand Down
221 changes: 97 additions & 124 deletions src/components/ArtifactsPreview/ArtifactsPreviewView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,24 +21,15 @@ import React, { useMemo } from 'react'
import PropTypes from 'prop-types'
import Prism from 'prismjs'

import Accordion from '../../common/Accordion/Accordion'
import DetailsResults from '../DetailsResults/DetailsResults'
import PreviewError from './PreviewError/PreviewError'
import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'

import { ReactComponent as Arrow } from 'igz-controls/images/arrow.svg'

import { ARTIFACT_PREVIEW_TABLE_ROW_LIMIT } from '../../constants'

import './artifactsPreview.scss'

const ArtifactsPreviewView = ({
className,
preview,
setShowErrorBody,
showAccordion,
showErrorBody
}) => {
const ArtifactsPreviewView = ({ className, preview, setShowErrorBody, showErrorBody }) => {
const content = useMemo(
() =>
preview.data && preview.data.content
Expand All @@ -49,127 +40,109 @@ const ArtifactsPreviewView = ({

return (
!preview?.hidden && (
<Accordion
icon={showAccordion ? <Arrow /> : null}
iconClassName="expand-icon"
alwaysOpened={!showAccordion}
openByDefault={!showAccordion}
>
<div className="artifact-preview__wrapper">
{preview.header && (
<div className="artifact-preview__header">
<h5 className="artifact-preview__header-title">{preview.header}</h5>
</div>
)}
<div className={className}>
{preview?.type === 'error' ? (
<PreviewError
error={preview.error}
setShowErrorBody={setShowErrorBody}
showErrorBody={showErrorBody}
/>
) : (
<>
{preview?.type === 'table-results' && (
<div className="artifact-preview__table">
<DetailsResults job={preview} excludeSortBy="state" defaultDirection="desc" />
<div className="artifact-preview__wrapper">
{preview.header && (
<div className="artifact-preview__header">
<h5 className="artifact-preview__header-title">{preview.header}</h5>
</div>
)}
<div className={className}>
{preview?.type === 'error' ? (
<PreviewError
error={preview.error}
setShowErrorBody={setShowErrorBody}
showErrorBody={showErrorBody}
/>
) : (
<>
{preview?.type === 'table-results' && (
<div className="artifact-preview__table">
<DetailsResults job={preview} excludeSortBy="state" defaultDirection="desc" />
</div>
)}
{preview?.type === 'table' && (
<div className="artifact-preview__table">
<div className="artifact-preview__table-row artifact-preview__table-header">
{preview.data.headers.map((header, index) => {
return (
<div key={`${header}${index}`} className="artifact-preview__table-content">
<Tooltip template={<TextTooltipTemplate text={header} />}>
{header}
</Tooltip>
</div>
)
})}
</div>
)}
{preview?.type === 'table' && (
<div className="artifact-preview__table">
<div className="artifact-preview__table-row artifact-preview__table-header">
{preview.data.headers.map((header, index) => {
return (
<div
key={`${header}${index}`}
className="artifact-preview__table-content"
>
<Tooltip template={<TextTooltipTemplate text={header} />}>
{header}
</Tooltip>
</div>
)
})}
</div>
<div className="artifact-preview__table-body">
{content.map((contentItem, index) => (
<div key={index} className="artifact-preview__table-row">
{Array.isArray(contentItem) ? (
contentItem.map(value => (
<Tooltip
className="artifact-preview__table-content"
key={`${value}${Math.random()}`}
template={<TextTooltipTemplate text={`${value}`} />}
>
{typeof value === 'object' && value !== null
? JSON.stringify(value)
: String(value)}
</Tooltip>
))
) : (
<div className="artifact-preview__table-body">
{content.map((contentItem, index) => (
<div key={index} className="artifact-preview__table-row">
{Array.isArray(contentItem) ? (
contentItem.map(value => (
<Tooltip
className="artifact-preview__table-content"
template={<TextTooltipTemplate text={contentItem} />}
key={`${value}${Math.random()}`}
template={<TextTooltipTemplate text={`${value}`} />}
>
{contentItem}
{typeof value === 'object' && value !== null
? JSON.stringify(value)
: String(value)}
</Tooltip>
)}
</div>
))}
</div>
</div>
)}
{preview?.type === 'text' && <div>{preview?.data.content}</div>}
{preview?.type === 'html' && (
<iframe srcDoc={preview?.data.content} frameBorder="0" title="Preview" />
)}
{preview?.type === 'json' && (
<div className="json">
<pre className="json-content">
<code
dangerouslySetInnerHTML={{
__html: Prism.highlight(
preview?.data.content,
Prism.languages.json,
'json'
)
}}
/>
</pre>
</div>
)}
{preview?.type === 'yaml' && (
<div className="json">
<pre className="json-content">
<code
dangerouslySetInnerHTML={{
__html: Prism.highlight(
preview?.data.content,
Prism.languages.yaml,
'yaml'
)
}}
/>
</pre>
</div>
)}
{preview?.type === 'image' && (
<img
className="artifact-preview__image"
src={preview?.data?.content}
alt="preview"
/>
)}
{preview?.type === 'unknown' && (
<div className="artifact-preview__no-data">
{preview?.data?.content ? preview?.data.content : 'No preview'}
))
) : (
<Tooltip
className="artifact-preview__table-content"
template={<TextTooltipTemplate text={contentItem} />}
>
{contentItem}
</Tooltip>
)}
</div>
))}
</div>
)}
</>
)}
</div>
</div>
)}
{preview?.type === 'text' && <div>{preview?.data.content}</div>}
{preview?.type === 'html' && (
<iframe srcDoc={preview?.data.content} frameBorder="0" title="Preview" />
)}
{preview?.type === 'json' && (
<div className="json">
<pre className="json-content">
<code
dangerouslySetInnerHTML={{
__html: Prism.highlight(preview?.data.content, Prism.languages.json, 'json')
}}
/>
</pre>
</div>
)}
{preview?.type === 'yaml' && (
<div className="json">
<pre className="json-content">
<code
dangerouslySetInnerHTML={{
__html: Prism.highlight(preview?.data.content, Prism.languages.yaml, 'yaml')
}}
/>
</pre>
</div>
)}
{preview?.type === 'image' && (
<img
className="artifact-preview__image"
src={preview?.data?.content}
alt="preview"
/>
)}
{preview?.type === 'unknown' && (
<div className="artifact-preview__no-data">
{preview?.data?.content ? preview?.data.content : 'No preview'}
</div>
)}
</>
)}
</div>
</Accordion>
</div>
)
)
}
Expand Down
4 changes: 3 additions & 1 deletion src/components/DetailsPreview/DetailsPreview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,9 @@ const DetailsPreview = ({ artifact, handlePreview }) => {
extraData={extraData}
noData={noData}
preview={preview}
showExtraDataLoader={artifact.extra_data && extraData.length !== artifact.extra_data.length}
showExtraDataLoader={
artifact.extra_data && extraData.length !== artifact.extra_data.length
}
/>
</div>
</div>
Expand Down
Loading

0 comments on commit a058bf9

Please sign in to comment.