Merge pull request #128 from paralus/web-kubectl

Added web kubectl in cluster list page and removed type agent columns
paralus · Oct 10, 2022 · 49e5269 · 49e5269
2 parents 1978b91 + bf58895
commit 49e5269
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 79 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 
 ## Unreleased
 
+- Added web kubectl in cluster list page and removed type agent columns from auditlogs from [niravparikh05](https://github.com/niravparikh05)
+
 ## [0.1.2] - 2022-09-30
 ### Fixed
 - Fix download kubeconfig file name issue from [akshay196](https://github.com/akshay196)

diff --git a/src/app/routes/edges/routes/PrivateEdgeList/index.js b/src/app/routes/edges/routes/PrivateEdgeList/index.js
@@ -52,6 +52,7 @@ import SettingsIcon from "@material-ui/icons/Settings";
 import DeleteIconComponent from "components/DeleteIconComponent";
 import KubectlSettings from "components/ClusterActions/KubectlSettings";
 import ClusterActionDialog from "components/ClusterActions/ClusterActionDialog";
+import KubeCtlShellAccess from "components/KubeCtlShellAccess";
 
 const styles = (theme) => ({
   clusterHeading: {
@@ -1223,6 +1224,32 @@ class PrivateEdgeList extends React.Component {
     const { history } = this.props;
     const cluster_type = cluster?.cluster_type || null;
 
+    const isClusterReady = (cluster) => {
+      let ready = false;
+      if (
+        cluster?.spec.clusterData &&
+        cluster?.spec.clusterData.cluster_status &&
+        cluster?.spec.clusterData.cluster_status.conditions &&
+        cluster?.spec.clusterData.cluster_status.conditions.length > 0
+      ) {
+        for (
+          let index = 0;
+          index < cluster?.spec.clusterData?.cluster_status?.conditions?.length;
+          index++
+        ) {
+          ready =
+            cluster.spec.clusterData.cluster_status.conditions[index].type ===
+              "ClusterReady" &&
+            cluster.spec.clusterData.cluster_status.conditions[index].status ===
+              "Success";
+          if (ready) {
+            return ready;
+          }
+        }
+      }
+      return ready;
+    };
+
     return (
       <Spinner loading={!this.state.edgesLoaded} hideChildren addHeight>
         <div>
@@ -1314,37 +1341,46 @@ class PrivateEdgeList extends React.Component {
                             </div>
                           </TableCell>
                           <TableCell data={n}>
-                            {this.state.userRole !== "READ_ONLY_OPS" && (
-                              <Tooltip title="Kubectl Settings">
-                                <IconButton
-                                  aria-label="edit"
-                                  className="m-0"
-                                  onClick={(event) => {
-                                    this.handleKubectlSettings(null, n);
+                            <div className="row">
+                              {isClusterReady(n) && (
+                                <KubeCtlShellAccess
+                                  projectId={n.metadata.project}
+                                  clusterName={n.metadata.name}
+                                  iconOnly={true}
+                                />
+                              )}
+                              {this.state.userRole !== "READ_ONLY_OPS" && (
+                                <Tooltip title="Kubectl Settings">
+                                  <IconButton
+                                    aria-label="edit"
+                                    className="m-0"
+                                    onClick={(event) => {
+                                      this.handleKubectlSettings(null, n);
+                                    }}
+                                  >
+                                    <SettingsIcon />
+                                  </IconButton>
+                                </Tooltip>
+                              )}
+                              {this.state.userRole !== "READ_ONLY_OPS" && (
+                                <DeleteIconComponent
+                                  key={n.metadata.name}
+                                  button={{
+                                    type: "danger-icon",
+                                    label: "Delete",
+                                    confirmText: (
+                                      <span>
+                                        Are you sure you want to delete
+                                        <b> {n.metadata.name} </b>?
+                                      </span>
+                                    ),
+                                    handleClick: () => {
+                                      this.handleRemoveEdge(n, true);
+                                    },
                                   }}
-                                >
-                                  <SettingsIcon />
-                                </IconButton>
-                              </Tooltip>
-                            )}
-                            {this.state.userRole !== "READ_ONLY_OPS" && (
-                              <DeleteIconComponent
-                                key={n.metadata.name}
-                                button={{
-                                  type: "danger-icon",
-                                  label: "Delete",
-                                  confirmText: (
-                                    <span>
-                                      Are you sure you want to delete
-                                      <b> {n.metadata.name} </b>?
-                                    </span>
-                                  ),
-                                  handleClick: () => {
-                                    this.handleRemoveEdge(n, true);
-                                  },
-                                }}
-                              />
-                            )}
+                                />
+                              )}
+                            </div>
                           </TableCell>
                         </TableRow>
                       ))}

diff --git a/src/appMain/routes/auditLogs/components/LogsDataTable/index.js b/src/appMain/routes/auditLogs/components/LogsDataTable/index.js
@@ -74,18 +74,10 @@ const LogsDataTable = (props) => {
         type: "regular",
         value: data._source.json.client.type,
       },
-      {
-        type: "regular",
-        value: data._source.json.type,
-      },
       {
         type: "regular",
         value: data._source.json.detail.message,
       },
-      {
-        type: "regular",
-        value: data._source.json.client.user_agent,
-      },
     ].filter(Boolean);
 
   const columnLabels = [
@@ -96,9 +88,7 @@ const LogsDataTable = (props) => {
     { label: "Groups", style: { minWidth: "170px" } },
     props.isRelayCommands && { label: "Cluster" },
     { label: "Client" },
-    { label: "Type" },
     { label: "Message" },
-    { label: "Agent" },
   ].filter(Boolean);
 
   const parseExpandedRow = (data) => {

diff --git a/src/components/KubeCtlShellAccess.js b/src/components/KubeCtlShellAccess.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { openKubectlDrawer, closeKubectlDrawer } from "actions/index";
-import { makeStyles } from "@material-ui/core";
+import { makeStyles, Tooltip } from "@material-ui/core";
 
 const useStyles = makeStyles((theme) => ({
   icon: {
@@ -16,6 +16,7 @@ const useStyles = makeStyles((theme) => ({
     marginRight: "5px",
     marginTop: "4px",
     lineHeight: "10px",
+    height: "20px",
   },
   label: {
     marginTop: "4px",
@@ -24,11 +25,14 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: "2px",
   },
   root: {
-    marginTop: 42,
+    marginTop: 12,
+  },
+  hover: {
+    cursor: "pointer",
   },
 }));
 
-function KubeCtlShellAccess({ projectId, clusterName }) {
+function KubeCtlShellAccess({ projectId, clusterName, iconOnly }) {
   const classes = useStyles();
   const dispatch = useDispatch();
   const KubectlConfig = useSelector((s) => s.Kubectl?.kubectlConfig);
@@ -38,6 +42,20 @@ function KubeCtlShellAccess({ projectId, clusterName }) {
   };
   if (KubectlConfig?.disableWebKubectl) return null;
 
+  if (iconOnly) {
+    return (
+      <Tooltip title="Web Kubectl">
+        <div className={`text-teal d-flex ml-4 ${classes.root}`}>
+          <div
+            onClick={handleOpenKubectl}
+            className={`${classes.icon} ${classes.hover}`}
+          >
+            {">_"}
+          </div>
+        </div>
+      </Tooltip>
+    );
+  }
   return (
     <div className={`text-teal d-flex ml-4 ${classes.root}`}>
       <div className={classes.icon}>{">_"}</div>

diff --git a/src/containers/Auth/Login/index.js b/src/containers/Auth/Login/index.js
@@ -466,28 +466,12 @@ class Login extends Component {
   }
 
   render() {
-    const {
-      partnerDetail,
-      isTotpRequired,
-      isTotpVerified,
-      isLoginFailed,
-      isLoginSuccess,
-      userAndRoleDetail,
-      UserSession,
-    } = this.props;
+    const { partnerDetail, isLoginSuccess, userAndRoleDetail, UserSession } =
+      this.props;
     const { isResponseError } = this.state;
 
     let formContent = this.renderLoginForm();
 
-    // if (
-    //   isLoginFailed &&
-    //   ["AUTH003", "AUTH004", "AUTH006"].includes(
-    //     this.props.auth.error.details[0].error_code
-    //   )
-    // ) {
-    //   return <Redirect to="/loginerror" />;
-    // }
-
     if (isLoginSuccess) {
       if (userAndRoleDetail?.account?.require_change_password) {
         this.state.password = "";
@@ -502,18 +486,6 @@ class Login extends Component {
           />
         );
       }
-      // TODO: Hidden. What do we do here? Why are we doing this? Also no READ_ONLY anymore
-      // if (userAndRoleDetail && userAndRoleDetail.role.name === "READ_ONLY") {
-      //   return <Redirect to="/app/workloads" />;
-      // }
-
-      // if (
-      //   userAndRoleDetail &&
-      //   userAndRoleDetail.roles &&
-      //   userAndRoleDetail.roles.length === 0
-      // ) {
-      //   return <Redirect to="/loginerror" />;
-      // }
       // Make an API call after 12hrs(+1min) which will trigger user session expiry
       setTimeout(
         this.props.getUserSessionInfo.bind(this),
@@ -522,12 +494,6 @@ class Login extends Component {
       if (UserSession.noRolesUser) {
         return <Redirect to="/app/noaccess" />;
       }
-      // if (UserSession.visibleInfra || UserSession.visibleAdmin) {
-      //   return <Redirect to="/app/edges" />;
-      // }
-      // if (UserSession.visibleApps) {
-      //   return <Redirect to="/app/workloads" />;
-      // }
       return <Redirect to="/main" />;
     }
 

diff --git a/src/views/ClusterView/components/ClusterHeader.js b/src/views/ClusterView/components/ClusterHeader.js
@@ -188,6 +188,7 @@ export default function ClusterHeader({
           <KubeCtlShellAccess
             projectId={edge.metadata.project}
             clusterName={edge.metadata.name}
+            iconOnly={false}
           />
         </Grid>
       </Box>