Skip to content

Commit

Permalink
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 8c753b6 commit 31f935f
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 77 deletions.
2 changes: 1 addition & 1 deletion kotsadm/web/src/components/apps/AppDetailPage.jsx
View file
Expand Up @@ -265,7 +265,7 @@ class AppDetailPage extends Component {
/>}
/>

<Route exact path="/app/:slug/tree/:sequence" render={props => <DownstreamTree {...props} app={app} appNameSpace={this.props.appNameSpace} />} />
<Route exact path="/app/:slug/tree/:sequence?" render={props => <DownstreamTree {...props} app={app} appNameSpace={this.props.appNameSpace} />} />

<Route exact path={["/app/:slug/version-history", "/app/:slug/version-history/diff/:firstSequence/:secondSequence"]} render={() =>
<AppVersionHistory
Expand Down
97 changes: 62 additions & 35 deletions kotsadm/web/src/components/apps/AppVersionHistory.jsx
View file
Expand Up @@ -61,7 +61,8 @@ class AppVersionHistory extends Component {
showUpdateCheckerModal: false,
displayShowDetailsModal: false,
yamlErrorDetails: [],
deployView: false
deployView: false,
versionSequence: ""
}

componentDidMount() {
Expand Down Expand Up @@ -149,43 +150,67 @@ class AppVersionHistory extends Component {
return (
<div>
{diffSummary ?
(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>
(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>
</div>
: yamlErrorsDetails ?
<div className="flex flex1 alignItems--center">
: 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>
<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)}> 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)}> See details </span>
<span className="replicated-link u-marginLeft--5 u-fontSize--small" onClick={() => this.toggleShowDetailsModal(yamlErrorsDetails, version.sequence)}> See details </span>
</div>
: <span>&nbsp;</span>}
</div>
Expand Down Expand Up @@ -396,10 +421,10 @@ class AppVersionHistory extends Component {

if (!force) {
if (yamlErrorDetails) {
this.setState({
this.setState({
displayShowDetailsModal: !this.state.displayShowDetailsModal,
deployView: true,
yamlErrorDetails
deployView: true,
yamlErrorDetails
});
}
if (version.status === "pending_preflight") {
Expand Down Expand Up @@ -774,8 +799,8 @@ class AppVersionHistory extends Component {
}
}

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

render() {
Expand Down Expand Up @@ -1229,6 +1254,8 @@ class AppVersionHistory extends Component {
forceDeploy={this.onForceDeployClick}
showDeployWarningModal={this.state.showDeployWarningModal}
showSkipModal={this.state.showSkipModal}
slug={this.props.match.params.slug}
sequence={this.state.versionSequence}
/>}
</div>
);
Expand Down
8 changes: 6 additions & 2 deletions kotsadm/web/src/components/modals/ShowDetailsModal.jsx
View file
@@ -1,8 +1,9 @@
import React from "react";
import Modal from "react-modal";
import { Link } from "react-router-dom";

export default function ShowDetailsModal(props) {
const { displayShowDetailsModal, toggleShowDetailsModal, yamlErrorDetails, deployView, showDeployWarningModal, showSkipModal, forceDeploy } = props;
const { displayShowDetailsModal, toggleShowDetailsModal, yamlErrorDetails, deployView, showDeployWarningModal, showSkipModal, forceDeploy, slug, sequence } = props;

return (
<Modal
Expand All @@ -27,7 +28,10 @@ export default function ShowDetailsModal(props) {
<span className="icon invalid-yaml-icon" />
</div>
<div className="flex flex-column u-marginLeft--10">
<span className="u-fontSize--large u-fontWeight--bold u-color--tuna u-lineHeight--normal"> {err.path} </span>
<div className="flex flex1 alignItems--center">
<span className="u-fontSize--large u-fontWeight--bold u-color--tuna u-lineHeight--normal"> {err.path} </span>
<Link to={`/app/${slug}/tree/${sequence}?${err.path}`}className="replicated-link u-marginLeft--5 u-marginTop--5 u-fontSize--small"> View </Link>
</div>
<span className="u-fontSize--small u-fontWeight--medium u-color--red u-lineHeight--normal"> error: {err.error} </span>
</div>
</div>
Expand Down
37 changes: 2 additions & 35 deletions kotsadm/web/src/components/shared/FileTree.jsx
View file
Expand Up @@ -25,45 +25,12 @@ export default class FileTree extends React.Component {
arePathsSame = (path1, path2) => {
const newPath1 = rootPath(path1);
const newPath2 = rootPath(path2);
return newPath1.split(/\//).slice(1, 2+this.getLevel()).join("/") === newPath2.split(/\//).slice(1, 2+this.getLevel()).join("/")
}

componentDidUpdate(lastProps) {
const { isRoot, topLevelPaths, keepOpenPaths = [] } = this.props;
const { initialOpenComplete } = this.state;

if (isRoot && !initialOpenComplete && topLevelPaths && topLevelPaths !== lastProps.topLevelPaths) {
const defaultSelected = topLevelPaths.reduce((current, path) => {
let expand = true;
if (keepOpenPaths?.length) {
for (let i = 0; i < keepOpenPaths.length; i++) {
const str = keepOpenPaths[i];
expand = path.startsWith(str);
if (expand) {
break;
}
}
}
current[path] = expand;
return current;
}, {});

let didInitialOpen = false;

// The root folder(s) have already set themselves to be open.
// Do not open root level folders anymore.
if (Object.keys(defaultSelected).length) {
didInitialOpen = true;
}
this.setState({
selected: defaultSelected,
initialOpenComplete: didInitialOpen
});
}
return newPath1.split(/\//).slice(1, 2 + this.getLevel()).join("/") === newPath2.split(/\//).slice(1, 2 + this.getLevel()).join("/")
}

render() {
const { files, selectedFile, handleFileSelect, isRoot } = this.props;

return (
<ul className={`${isRoot ? "FileTree-wrapper" : "u-marginLeft--10"}`}>
{files && files.map((file, i) => (
Expand Down
8 changes: 4 additions & 4 deletions kotsadm/web/src/components/tree/KotsApplicationTree.jsx
View file
Expand Up @@ -37,6 +37,9 @@ class KotsApplicationTree extends React.Component {
const files = res?.files || {};
const paths = keys(files);
const applicationTree = Utilities.arrangeIntoApplicationTree(paths);
if (this.props.history.location.search) {
this.setState({ selectedFile: `/skippedFiles/${this.props.history.location.search.slice(1)}`})
}
this.setState({
files,
applicationTree,
Expand Down Expand Up @@ -65,7 +68,7 @@ class KotsApplicationTree extends React.Component {

setSelectedFile = (path) => {
this.setState({
selectedFile: path,
selectedFile: path
});
}

Expand All @@ -77,7 +80,6 @@ class KotsApplicationTree extends React.Component {
const { displayInstructionsModal, files, applicationTree, selectedFile } = this.state;

const contents = files[selectedFile] ? new Buffer(files[selectedFile], "base64").toString() : "";
const topLevelPaths = applicationTree.map(f => f.path);

return (
<div className="flex-column flex1 ApplicationTree--wrapper container u-paddingTop--50 u-paddingBottom--30">
Expand All @@ -92,8 +94,6 @@ class KotsApplicationTree extends React.Component {
<FileTree
files={applicationTree}
isRoot={true}
keepOpenPaths={["overlays", "base"]}
topLevelPaths={topLevelPaths}
handleFileSelect={this.setSelectedFile}
selectedFile={this.state.selectedFile}
/>
Expand Down

0 comments on commit 31f935f

Please sign in to comment.