Skip to content

Commit

Permalink
Create update
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgruica
jgruica committed May 22, 2020
1 parent e78547a commit 99c0d68
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 102 deletions.
2 changes: 1 addition & 1 deletion kotsadm/web/src/Root.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ class Root extends Component {
<ProtectedRoute path="/snapshots" render={(props) => <Snapshots {...props} appName={this.state.selectedAppName} />} />
<ProtectedRoute exact path="/redactors" render={(props) => <Redactors {...props} appName={this.state.selectedAppName} />} />
<ProtectedRoute exact path="/redactors/new" render={(props) => <EditRedactor {...props} appName={this.state.selectedAppName} />} />
<ProtectedRoute exact path="/redactors/:id" render={(props) => <EditRedactor {...props} appName={this.state.selectedAppName} />} />
<ProtectedRoute exact path="/redactors/:slug" render={(props) => <EditRedactor {...props} appName={this.state.selectedAppName} />} />
<ProtectedRoute
path={["/apps", "/app/:slug/:tab?"]}
render={
Expand Down
88 changes: 24 additions & 64 deletions kotsadm/web/src/components/redactors/EditRedactor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,28 @@ import "brace/theme/chrome";

import { Utilities } from "../../utilities/utilities";

const redactor = {
id: "1",
name: "my-demo-redactor",
createdAt: "2020-05-10T21:17:37.002Z",
updatedOn: "2020-05-18T22:17:37.002Z",
details: "Redact all AWS secrets",
status: "enabled",
yaml: `apiVersion: troubleshoot.replicated.com/v1beta1
kind: Redactor
metadata:
name: my-application-name
spec:
redactors:
- name: example replacement
values:
- abc123`
}
// const redactor = {
// id: "1",
// name: "my-demo-redactor",
// createdAt: "2020-05-10T21:17:37.002Z",
// updatedOn: "2020-05-18T22:17:37.002Z",
// details: "Redact all AWS secrets",
// status: "enabled",
// yaml: `apiVersion: troubleshoot.replicated.com/v1beta1
// kind: Redactor
// metadata:
// name: my-application-name
// spec:
// redactors:
// - name: example replacement
// values:
// - abc123`
// }

class EditRedactor extends Component {
state = {
redactorEnabled: false,
redactorYaml: "",
isEditingRedactorName: false,
redactorName: "",
creatingRedactor: false,
createErrMsg: ""
Expand Down Expand Up @@ -68,7 +67,9 @@ class EditRedactor extends Component {

if (createResponse.success) {
this.setState({
newRedactor: createResponse,
redactorYaml: createResponse.redactor,
redactorName: createResponse.redactorMetadata.name,
redactorEnabled: createResponse.redactorMetadata.enabled,
creatingRedactor: false,
createConfirm: true,
createErrMsg: ""
Expand Down Expand Up @@ -99,8 +100,8 @@ class EditRedactor extends Component {

componentDidMount() {
//TODO get redactor for id
if (this.props.match.params.id) {
this.setState({ redactorEnabled: redactor.status === "enabled" ? true : false, redactorYaml: redactor.yaml, redactorName: redactor.name });
if (this.props.match.params.slug) {
// this.setState({ redactorEnabled: redactor.status === "enabled" ? true : false, redactorYaml: redactor.yaml, redactorName: redactor.name });
} else {
this.setState({ redactorEnabled: false, redactorYaml: "", redactorName: "New redactor" });
}
Expand All @@ -111,37 +112,13 @@ class EditRedactor extends Component {
}

onSaveRedactor = () => {
if (this.props.match.params.id) {
if (this.props.match.params.slug) {
console.log("a")
} else {
this.createRedactor("", "", this.state.redactorEnabled, true, this.state.redactorYaml)
}
}

toggleEditRedactorName = () => {
const isEditingRedactorName = !this.state.isEditingRedactorName;
if (isEditingRedactorName) {
this.tempName = this.state.redactorName;
this.createRedactor(this.state.redactorName, "", this.state.redactorEnabled, true, this.state.redactorYaml)
}
this.setState({ isEditingRedactorName });
}

handleFormChange = (field, e) => {
let nextState = {};
nextState[field] = e.target.value;
this.setState(nextState);
}

onEditRedactorName = () => {
console.log("editing name")
const sameRedactorName = this.state.redactorName === this.tempName;
this.tempName = "";

if (sameRedactorName) {
this.setState({ isEditingRedactorName: false });
return;
}
}

render() {
return (
Expand All @@ -155,26 +132,9 @@ class EditRedactor extends Component {
Back to redactors
</Link>
<div className="flex flex-auto alignItems--flexStart justifyContent--spaceBetween u-marginTop--10">
{this.state.isEditingRedactorName ?
<div className="flex flex-auto u-paddingTop--more u-paddingBottom--more">
<div className="flex">
<input
type="text"
className="Input"
placeholder="Redactor Name"
value={this.state.redactorName}
onChange={(e) => { this.handleFormChange("redactorName", e); }}
/>
<button className="btn primary blue flex-auto u-marginLeft--5" onClick={() => this.onEditRedactorName()}>Done</button>
</div>
</div> :
<div className="flex flex1 alignItems--center">
<p className="u-fontWeight--bold u-color--tuna u-fontSize--jumbo u-lineHeight--normal u-marginRight--10"> {this.state.redactorName} </p>
{this.props.match.params.id &&
<span className="replicated-link u-fontSize--normal" onClick={this.toggleEditRedactorName}> Edit </span>}
</div>

}
<div className="flex justifyContent--flexEnd">
<div className="toggle flex flex1">
<div className="flex flex1">
Expand Down
12 changes: 6 additions & 6 deletions kotsadm/web/src/components/redactors/RedactorRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ class RedactorRow extends React.Component {

componentDidMount() {
if (this.props.redactor) {
this.setState({ redactorEnabled: this.props.redactor.status === "enabled" ? true : false });
this.setState({ redactorEnabled: this.props.redactor.enabled ? true : false });
}
}

Expand All @@ -27,17 +27,17 @@ class RedactorRow extends React.Component {
const { redactor } = this.props;

return (
<div className="flex flex-auto ActiveDownstreamVersionRow--wrapper" key={redactor.name}>
<div className="flex flex-auto ActiveDownstreamVersionRow--wrapper" key={redactor?.name}>
<div className="flex-column flex1">
<div className="flex flex1 alignItems--center u-marginBottom--small">
<span className={`status-indicator u-marginBottom--10 ${this.state.redactorEnabled ? "enabled" : "disabled"}`} />
<p className="u-fontSize--large u-lineHeight--normal u-fontWeight--bold u-color--tuna u-marginRight--10">{redactor.name}</p>
<span className="u-fontSize--small u-color--dustyGray u-fontWeight--medium u-lineHeight--normal u-marginTop--5"> Last updated on {dayjs(redactor.updatedOn).format("MM/DD/YY @ hh:mm a")} </span>
<p className="u-fontSize--large u-lineHeight--normal u-fontWeight--bold u-color--tuna u-marginRight--10">{redactor?.name}</p>
<span className="u-fontSize--small u-color--dustyGray u-fontWeight--medium u-lineHeight--normal u-marginTop--5"> Last updated on {dayjs(redactor?.updatedOn).format("MM/DD/YY @ hh:mm a")} </span>
</div>
<p className="u-fontSize--small u-fontWeight--medium u-lineHeight--normal u-color--nevada u-marginLeft--10"> {redactor.details} </p>
<p className="u-fontSize--small u-fontWeight--medium u-lineHeight--normal u-color--nevada u-marginLeft--10"> {redactor?.description} </p>
</div>
<div className="flex alignItems--center">
<Link to={`/redactors/${redactor.id}`} className="u-fontSize--normal u-fontWeight--medium u-color--royalBlue u-textDecoration--underlineOnHover u-marginRight--20">Edit redactor</Link>
<Link to={`/redactors/${redactor?.id}`} className="u-fontSize--normal u-fontWeight--medium u-color--royalBlue u-textDecoration--underlineOnHover u-marginRight--20">Edit redactor</Link>
<span className="u-fontSize--normal u-fontWeight--medium u-color--chestnut u-textDecoration--underlineOnHover u-marginRight--20" onClick={() => this.handleDeleteClick(redactor)}>Delete</span>
<div className={`Checkbox--switch ${this.state.redactorEnabled ? "is-checked" : "is-notChecked"}`}>
<input
Expand Down
48 changes: 17 additions & 31 deletions kotsadm/web/src/components/redactors/Redactors.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,10 @@ import Select from "react-select";

import RedactorRow from "./RedactorRow";
import DeleteRedactorModal from "../modals/DeleteRedactorModal";
import Loader from "../shared/Loader";

import { Utilities } from "../../utilities/utilities";

const redactors = [
{
id: "1",
name: "my-demo-redactor",
createdAt: "2020-05-10T21:17:37.002Z",
updatedOn: "2020-05-18T22:17:37.002Z",
details: "Redact all AWS secrets",
status: "enabled"
},
{
id: "2",
name: "my-other-redactor",
createdAt: "2020-05-11T21:20:37.002Z",
updatedOn: "2020-05-16T19:17:30.002Z",
details: "Redact ip address’s from 10.0.0.0 - 10.255.255.255",
status: "disabled"
},
]

class Redactors extends Component {
state = {
Expand Down Expand Up @@ -59,11 +42,14 @@ class Redactors extends Component {
.then(res => res.json())
.then(result => {
if (result.success) {
console.log(result)
this.setState({
redactors: result.redactors,
isLoadingRedactors: false,
redactorsErrMsg: "",
}, () => {
if (this.state.selectedOption) {
this.sortRedactors(this.state.selectedOption.value);
}
})
} else {
this.setState({
Expand All @@ -88,16 +74,14 @@ class Redactors extends Component {

componentDidMount() {
this.getRedactors();
if (this.state.selectedOption) {
this.sortRedactors(this.state.selectedOption.value);
}
}

sortRedactors = value => {
if (value === "createdAt") {
this.setState({ sortedRedactors: redactors.sort((a, b) => dayjs(b.createdAt) - dayjs(a.createdAt)) });
console.log(this.state.redactors)
this.setState({ sortedRedactors: this.state.redactors.sort((a, b) => dayjs(b.createdAt) - dayjs(a.createdAt)) });
} else {
this.setState({ sortedRedactors: redactors.sort((a, b) => dayjs(b.updatedOn) - dayjs(a.updatedOn)) });
this.setState({ sortedRedactors: this.state.redactors.sort((a, b) => dayjs(b.updatedOn) - dayjs(a.updatedOn)) });
}
}

Expand All @@ -115,13 +99,15 @@ class Redactors extends Component {


render() {
const { sortedRedactors, selectedOption, deleteRedactorModal } = this.state;
// Name string `json:"name"`
// Slug string `json:"slug"`
// Created time.Time `json:"createdAt"`
// Updated time.Time `json:"updatedAt"`
// Enabled bool `json:"enabled"`
// Description string `json:"description"`
const { sortedRedactors, selectedOption, deleteRedactorModal, isLoadingRedactors } = this.state;

if (isLoadingRedactors) {
return (
<div className="flex-column flex1 alignItems--center justifyContent--center">
<Loader size="60" />
</div>
)
}

const selectOptions = [
{
Expand Down

0 comments on commit 99c0d68

Please sign in to comment.