Skip to content

Commit

Permalink
Updates on viewing invalid yaml files
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgruica
jgruica committed Jul 27, 2020
1 parent 31f935f commit 81e593d
Showing 1 changed file with 45 additions and 68 deletions.
113 changes: 45 additions & 68 deletions kotsadm/web/src/components/apps/AppVersionHistory.jsx
View file
Expand Up @@ -62,7 +62,7 @@ class AppVersionHistory extends Component {
displayShowDetailsModal: false,
yamlErrorDetails: [],
deployView: false,
versionSequence: ""
selectedSequence: ""
}

componentDidMount() {
Expand Down Expand Up @@ -141,78 +141,47 @@ class AppVersionHistory extends Component {
);
}

renderYamlErrors = (yamlErrorsDetails, version) => {
return (
<div className="flex flex1 alignItems--center u-marginLeft--10">
<span className="icon error-small" />
<span className="u-fontSize--small u-fontWeight--medium u-lineHeight--normal u-marginLeft--5 u-color--red">{yamlErrorsDetails?.length} Invalid files </span>
<span className="replicated-link u-marginLeft--5 u-fontSize--small" onClick={() => this.toggleShowDetailsModal(yamlErrorsDetails, version.sequence)}> See details </span>
</div>
)
}

renderSourceAndDiff = version => {
const { app } = this.props;
const downstream = app.downstreams?.length && app.downstreams[0];
const diffSummary = this.getVersionDiffSummary(version);
const yamlErrorsDetails = this.yamlErrorsDetails(downstream, version);

return (
<div>
{diffSummary ?
(diffSummary.filesChanged > 0 && yamlErrorsDetails ?
<div className="flex flex1 alignItems--center">
<div
className="DiffSummary u-cursor--pointer"
onClick={() => {
if (!downstream.gitops?.enabled) {
this.setState({
showDiffOverlay: true,
firstSequence: version.parentSequence - 1,
secondSequence: version.parentSequence
});
}
}}
>
<span className="files">{diffSummary.filesChanged} files changed </span>
<span className="lines-added">+{diffSummary.linesAdded} </span>
<span className="lines-removed">-{diffSummary.linesRemoved}</span>
</div>
<div className="flex flex1 alignItems--center u-marginLeft--10">
<span className="icon error-small" />
<span className="u-fontSize--small u-fontWeight--medium u-lineHeight--normal u-marginLeft--5 u-color--red">{yamlErrorsDetails?.length} Invalid files </span>
<span className="replicated-link u-marginLeft--5 u-fontSize--small" onClick={() => this.toggleShowDetailsModal(yamlErrorsDetails, version.sequence)}> See details </span>
</div>
(diffSummary.filesChanged > 0 ?
<div
className="DiffSummary u-cursor--pointer"
onClick={() => {
if (!downstream.gitops?.enabled) {
this.setState({
showDiffOverlay: true,
firstSequence: version.parentSequence - 1,
secondSequence: version.parentSequence
});
}
}}
>
<span className="files">{diffSummary.filesChanged} files changed </span>
<span className="lines-added">+{diffSummary.linesAdded} </span>
<span className="lines-removed">-{diffSummary.linesRemoved}</span>
</div>
: diffSummary.filesChanged > 0 ?
<div
className="DiffSummary u-cursor--pointer"
onClick={() => {
if (!downstream.gitops?.enabled) {
this.setState({
showDiffOverlay: true,
firstSequence: version.parentSequence - 1,
secondSequence: version.parentSequence
});
}
}}
>
<span className="files">{diffSummary.filesChanged} files changed </span>
<span className="lines-added">+{diffSummary.linesAdded} </span>
<span className="lines-removed">-{diffSummary.linesRemoved}</span>
</div>
: yamlErrorsDetails ?
<div className="flex flex1 alignItems--center">
<div className="DiffSummary">
<span className="files">No changes</span>
</div>
<div className="flex flex1 alignItems--center u-marginLeft--10">
<span className="icon error-small" />
<span className="u-fontSize--small u-fontWeight--medium u-lineHeight--normal u-marginLeft--5 u-color--red">{yamlErrorsDetails?.length} Invalid files </span>
<span className="replicated-link u-marginLeft--5 u-fontSize--small" onClick={() => this.toggleShowDetailsModal(yamlErrorsDetails, version.sequence)}> See details </span>
</div>
</div>
:
<div className="DiffSummary">
<span className="files">No changes</span>
</div>
) : yamlErrorsDetails ?
<div className="flex flex1 alignItems--center">
<span className="icon error-small" />
<span className="u-fontSize--small u-fontWeight--medium u-lineHeight--normal u-marginLeft--5 u-color--red">{yamlErrorsDetails?.length} Invalid files </span>
<span className="replicated-link u-marginLeft--5 u-fontSize--small" onClick={() => this.toggleShowDetailsModal(yamlErrorsDetails, version.sequence)}> See details </span>
:
<div className="DiffSummary">
<span className="files">No changes</span>
</div>
: <span>&nbsp;</span>}
)
: <span>&nbsp;</span>}
</div>
);
}
Expand Down Expand Up @@ -799,8 +768,8 @@ class AppVersionHistory extends Component {
}
}

toggleShowDetailsModal = (yamlErrorDetails, versionSequence) => {
this.setState({ displayShowDetailsModal: !this.state.displayShowDetailsModal, deployView: false, yamlErrorDetails, versionSequence });
toggleShowDetailsModal = (yamlErrorDetails, selectedSequence) => {
this.setState({ displayShowDetailsModal: !this.state.displayShowDetailsModal, deployView: false, yamlErrorDetails, selectedSequence });
}

render() {
Expand Down Expand Up @@ -911,6 +880,7 @@ class AppVersionHistory extends Component {
const gitopsEnabled = downstream.gitops?.enabled;
const currentDownstreamVersion = downstream?.currentVersion;
const versionHistory = data?.getKotsDownstreamHistory?.length ? data.getKotsDownstreamHistory : [];
const yamlErrorsDetails = this.yamlErrorsDetails(downstream, currentDownstreamVersion);

if (isAwaitingResults(versionHistory)) {
data?.startPolling(2000);
Expand Down Expand Up @@ -999,7 +969,10 @@ class AppVersionHistory extends Component {
<div className="flex-column flex1">
<div>
<p className="u-fontSize--normal u-color--dustyGray">Source: <span className="u-fontWeight--bold u-color--tuna">{currentDownstreamVersion.source}</span></p>
<div className="u-fontSize--small u-marginTop--10 u-color--dustyGray">{this.renderSourceAndDiff(currentDownstreamVersion)}</div>
<div className="flex alignItems--center u-fontSize--small u-marginTop--10 u-color--dustyGray">
{this.renderSourceAndDiff(currentDownstreamVersion)}
{yamlErrorsDetails && this.renderYamlErrors(yamlErrorsDetails, currentDownstreamVersion)}
</div>
</div>
<div className="flex flex1 u-fontSize--normal u-color--dustyGray u-marginTop--15 alignItems--center">Status:<span className="u-marginLeft--5">{gitopsEnabled ? this.renderViewPreflights(currentDownstreamVersion) : this.renderVersionStatus(currentDownstreamVersion)}</span></div>
</div>
Expand All @@ -1025,6 +998,7 @@ class AppVersionHistory extends Component {
const isChecked = !!checkedReleasesToDiff.find(diffRelease => diffRelease.parentSequence === version.parentSequence);
const isNew = secondsAgo(version.createdOn) < 10;
const nothingToCommit = gitopsEnabled && !version.commitUrl;
const yamlErrorsDetails = this.yamlErrorsDetails(downstream, version);
return (
<div
key={version.sequence}
Expand All @@ -1045,7 +1019,10 @@ class AppVersionHistory extends Component {
<div className={`${nothingToCommit && selectedDiffReleases && "u-opacity--half"} flex-column flex1`}>
<div>
<p className="u-fontSize--normal u-color--dustyGray">Source: <span className="u-fontWeight--bold u-color--tuna">{version.source}</span></p>
<div className="u-fontSize--small u-marginTop--10 u-color--dustyGray">{this.renderSourceAndDiff(version)}</div>
<div className="flex alignItems--center u-fontSize--small u-marginTop--10 u-color--dustyGray">
{this.renderSourceAndDiff(version)}
{yamlErrorsDetails && this.renderYamlErrors(yamlErrorsDetails, version)}
</div>
</div>
<div className="flex flex1 u-fontSize--normal u-color--dustyGray u-marginTop--15 alignItems--center">Status: <span className="u-marginLeft--5">{gitopsEnabled ? this.renderViewPreflights(version) : this.renderVersionStatus(version)}</span></div>
</div>
Expand Down Expand Up @@ -1255,7 +1232,7 @@ class AppVersionHistory extends Component {
showDeployWarningModal={this.state.showDeployWarningModal}
showSkipModal={this.state.showSkipModal}
slug={this.props.match.params.slug}
sequence={this.state.versionSequence}
sequence={this.state.selectedSequence}
/>}
</div>
);
Expand Down

0 comments on commit 81e593d

Please sign in to comment.