basic delete pod frontend

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/ControllerTab.tsx

@@ -29,7 +29,7 @@ export default class ControllerTab extends Component<PropsType, StateType> {
     showTooltip: [] as boolean[]
   };
 
-  componentDidMount() {
+  updatePods = () => {
     let { currentCluster, currentProject, setCurrentError } = this.context;
     let { controller, selectPod, isFirst } = this.props;
 
@@ -64,6 +64,7 @@ export default class ControllerTab extends Component<PropsType, StateType> {
       )
       .then(res => {
         let pods = res?.data?.map((pod: any) => {
+          console.log(pod?.metadata?.namespace)
           return {
             namespace: pod?.metadata?.namespace,
             name: pod?.metadata?.name,
@@ -93,6 +94,10 @@ export default class ControllerTab extends Component<PropsType, StateType> {
       });
   }
 
+  componentDidMount() {
+    this.updatePods();
+  }
+
   getAvailability = (kind: string, c: any) => {
     switch (kind?.toLowerCase()) {
       case "deployment":
@@ -150,6 +155,42 @@ export default class ControllerTab extends Component<PropsType, StateType> {
     }
   };
 
+  handleDeletePod = (pod: any) => {
+    console.log("clusterId", this.context.currentCluster.id);
+    console.log("name", pod.metadata?.name);
+    console.log("namespace", pod.metadata?.namespace);
+    console.log("id", this.context.currentProject.id);
+    api
+      .deletePod(
+        "<token>",
+        {
+          cluster_id: this.context.currentCluster.id
+        },
+        {
+          name: pod.metadata?.name,
+          namespace: pod.metadata?.namespace,
+          id: this.context.currentProject.id,
+        }
+      )
+      .then(res => {
+        this.updatePods();
+      })
+      .catch(err => {
+        this.context.setCurrentError(JSON.stringify(err));
+      });
+  }
+
+  renderDeleteButton = (pod: any) => {
+    return (
+      <CloseIcon 
+        className="material-icons-outlined"
+        onClick={() => this.handleDeletePod(pod)}
+      >
+        close
+      </CloseIcon>
+    );
+  }
+
   render() {
     let { controller, selectedPod, isLast, selectPod, isFirst } = this.props;
     let [available, total] = this.getAvailability(controller.kind, controller);
@@ -205,6 +246,7 @@ export default class ControllerTab extends Component<PropsType, StateType> {
               <Status>
                 <StatusColor status={status} />
                 {status}
+                {status === "failed" && this.renderDeleteButton(pod)}
               </Status>
             </Tab>
           );
@@ -216,6 +258,24 @@ export default class ControllerTab extends Component<PropsType, StateType> {
 
 ControllerTab.contextType = Context;
 
+const CloseIcon = styled.i`
+  font-size: 14px;
+  display: flex;
+  font-weight: bold;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  background: #ffffff22;
+  width: 18px;
+  height: 18px;
+  margin-right: -6px;
+  margin-left: 10px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff44;
+  }
+`;
+
 const Rail = styled.div`
   width: 2px;
   background: ${(props: { lastTab?: boolean }) =>
@@ -245,9 +305,9 @@ const Gutter = styled.div`
 
 const Status = styled.div`
   display: flex;
-  width: 50px;
   font-size: 12px;
   text-transform: capitalize;
+  margin-left: 5px;
   justify-content: flex-end;
   align-items: center;
   font-family: "Work Sans", sans-serif;
@@ -280,7 +340,6 @@ const StatusColor = styled.div`
 `;
 
 const Name = styled.div`
-  max-width: calc(100% - 106px);
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 16px;

dashboard/src/main/home/navbar/Feedback.tsx

@@ -44,8 +44,9 @@ export default class Feedback extends Component<PropsType, StateType> {
       ": " +
       this.state.feedbackText;
     handleSubmitFeedback(msg, () => {
-      this.setState({ feedbackSent: true, feedbackText: "" });
+      // console.log("submitted")
     });
+    this.setState({ feedbackSent: true, feedbackText: "" });
   };
 
   renderFeedbackDropdown = () => {

dashboard/src/main/home/navbar/Navbar.tsx

@@ -44,15 +44,16 @@ export default class Navbar extends Component<PropsType, StateType> {
     return (
       <StyledNavbar>
         <Feedback currentView={this.props.currentView} />
-        <NavButton selected={this.state.showDropdown}>
-          <i
-            className="material-icons-outlined"
-            onClick={() =>
-              this.setState({ showDropdown: !this.state.showDropdown })
-            }
-          >
+        <NavButton 
+          selected={this.state.showDropdown} 
+          onClick={() =>
+            this.setState({ showDropdown: !this.state.showDropdown })
+          }
+        >
+          <I className="material-icons-outlined">
             account_circle
-          </i>
+          </I>
+          {this.context.user.email}
           {this.renderSettingsDropdown()}
         </NavButton>
       </StyledNavbar>
@@ -62,6 +63,10 @@ export default class Navbar extends Component<PropsType, StateType> {
 
 Navbar.contextType = Context;
 
+const I = styled.i`
+  margin-right: 7px;
+`;
+
 const CloseOverlay = styled.div`
   position: fixed;
   width: 100vw;
@@ -191,12 +196,16 @@ const NavButton = styled.a`
   display: flex;
   position: relative;
   align-items: center;
+  font-size: 14px;
+  color: #ffffff88;
+  cursor: pointer;
   justify-content: center;
   margin-right: 15px;
   :hover {
     > i {
       color: #ffffff;
     }
+    color: #ffffff;
   }
 
   > i {