Remove Console Field from Operator UI (#931)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
2021-08-09 15:54:18 -07:00
parent 33610a5269
commit 4e38a54dd8
16 changed files with 76 additions and 121 deletions
--- a/portal-ui/build/asset-manifest.json
+++ b/portal-ui/build/asset-manifest.json
@@ -1,25 +1,25 @@
 {
  "files": {
    "main.css": "./static/css/main.8cfac526.chunk.css",
-    "main.js": "./static/js/main.68a3e691.chunk.js",
-    "main.js.map": "./static/js/main.68a3e691.chunk.js.map",
+    "main.js": "./static/js/main.79a74acc.chunk.js",
+    "main.js.map": "./static/js/main.79a74acc.chunk.js.map",
    "runtime-main.js": "./static/js/runtime-main.3fe0c1ac.js",
    "runtime-main.js.map": "./static/js/runtime-main.3fe0c1ac.js.map",
    "static/css/2.60e04a19.chunk.css": "./static/css/2.60e04a19.chunk.css",
-    "static/js/2.0c6e2c61.chunk.js": "./static/js/2.0c6e2c61.chunk.js",
-    "static/js/2.0c6e2c61.chunk.js.map": "./static/js/2.0c6e2c61.chunk.js.map",
+    "static/js/2.3c2c5fbe.chunk.js": "./static/js/2.3c2c5fbe.chunk.js",
+    "static/js/2.3c2c5fbe.chunk.js.map": "./static/js/2.3c2c5fbe.chunk.js.map",
    "index.html": "./index.html",
    "static/css/2.60e04a19.chunk.css.map": "./static/css/2.60e04a19.chunk.css.map",
    "static/css/main.8cfac526.chunk.css.map": "./static/css/main.8cfac526.chunk.css.map",
-    "static/js/2.0c6e2c61.chunk.js.LICENSE.txt": "./static/js/2.0c6e2c61.chunk.js.LICENSE.txt",
+    "static/js/2.3c2c5fbe.chunk.js.LICENSE.txt": "./static/js/2.3c2c5fbe.chunk.js.LICENSE.txt",
    "static/media/minio_console_logo.0837460e.svg": "./static/media/minio_console_logo.0837460e.svg",
    "static/media/minio_operator_logo.1312b7c9.svg": "./static/media/minio_operator_logo.1312b7c9.svg"
  },
  "entrypoints": [
    "static/js/runtime-main.3fe0c1ac.js",
    "static/css/2.60e04a19.chunk.css",
-    "static/js/2.0c6e2c61.chunk.js",
+    "static/js/2.3c2c5fbe.chunk.js",
    "static/css/main.8cfac526.chunk.css",
-    "static/js/main.68a3e691.chunk.js"
+    "static/js/main.79a74acc.chunk.js"
  ]
 }
--- a/portal-ui/build/index.html
+++ b/portal-ui/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="MinIO Console"/><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;900&display=swap" rel="stylesheet"/><link href="./styles/root-styles.css" rel="stylesheet"/><link rel="apple-touch-icon" sizes="180x180" href="./apple-icon-180x180.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"/><link rel="icon" type="image/png" sizes="96x96" href="./favicon-96x96.png"/><link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png"/><link rel="manifest" href="./manifest.json"/><link rel="mask-icon" href="./safari-pinned-tab.svg" color="#3a4e54"/><title>MinIO Console</title><link href="./static/css/2.60e04a19.chunk.css" rel="stylesheet"><link href="./static/css/main.8cfac526.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div id="loader-block"><svg class="loader-svg-container" viewBox="22 22 44 44"><circle class="loader-style MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate" cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle></svg></div></div><script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="./";var i=this["webpackJsonpportal-ui"]=this["webpackJsonpportal-ui"]||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="./static/js/2.0c6e2c61.chunk.js"></script><script src="./static/js/main.68a3e691.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="MinIO Console"/><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;900&display=swap" rel="stylesheet"/><link href="./styles/root-styles.css" rel="stylesheet"/><link rel="apple-touch-icon" sizes="180x180" href="./apple-icon-180x180.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"/><link rel="icon" type="image/png" sizes="96x96" href="./favicon-96x96.png"/><link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png"/><link rel="manifest" href="./manifest.json"/><link rel="mask-icon" href="./safari-pinned-tab.svg" color="#3a4e54"/><title>MinIO Console</title><link href="./static/css/2.60e04a19.chunk.css" rel="stylesheet"><link href="./static/css/main.8cfac526.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div id="loader-block"><svg class="loader-svg-container" viewBox="22 22 44 44"><circle class="loader-style MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate" cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle></svg></div></div><script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="./";var i=this["webpackJsonpportal-ui"]=this["webpackJsonpportal-ui"]||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="./static/js/2.3c2c5fbe.chunk.js"></script><script src="./static/js/main.79a74acc.chunk.js"></script></body></html>
--- a/portal-ui/build/static/js/2.3c2c5fbe.chunk.js
+++ b/portal-ui/build/static/js/2.3c2c5fbe.chunk.js
--- a/portal-ui/build/static/js/2.3c2c5fbe.chunk.js.LICENSE.txt
+++ b/portal-ui/build/static/js/2.3c2c5fbe.chunk.js.LICENSE.txt
--- a/portal-ui/build/static/js/2.3c2c5fbe.chunk.js.map
+++ b/portal-ui/build/static/js/2.3c2c5fbe.chunk.js.map
--- a/portal-ui/build/static/js/main.68a3e691.chunk.js.map
+++ b/portal-ui/build/static/js/main.68a3e691.chunk.js.map
--- a/portal-ui/build/static/js/main.79a74acc.chunk.js
+++ b/portal-ui/build/static/js/main.79a74acc.chunk.js
--- a/portal-ui/build/static/js/main.79a74acc.chunk.js.map
+++ b/portal-ui/build/static/js/main.79a74acc.chunk.js.map
--- a/portal-ui/src/screens/Console/Console.tsx
+++ b/portal-ui/src/screens/Console/Console.tsx
@@ -335,7 +335,7 @@ const Console = ({
      path: "/namespaces/:tenantNamespace/tenants/:tenantName/hop",
    },
    {
-      component: PodDetails,
+      component: TenantDetails,
      path: "/namespaces/:tenantNamespace/tenants/:tenantName/pods/:podName",
    },
    {
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
@@ -321,20 +321,6 @@ const Configure = ({
              placeholder="E.g. minio/minio:RELEASE.2021-06-17T00-10-46Z"
            />
          </Grid>
-          <Grid item xs={12}>
-            <InputBoxWrapper
-              id="consoleImage"
-              name="consoleImage"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                updateField("consoleImage", e.target.value);
-                cleanValidation("consoleImage");
-              }}
-              label="Console's Image"
-              value={consoleImage}
-              error={validationErrors["consoleImage"] || ""}
-              placeholder="E.g. minio/console:v0.8.3"
-            />
-          </Grid>
          <Grid item xs={12}>
            <InputBoxWrapper
              id="logSearchImage"
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -51,6 +51,7 @@ import ListItemText from "@material-ui/core/ListItemText";
 import { DeleteIcon } from "../../../../icons";
 import DeleteTenant from "../ListTenants/DeleteTenant";
 import PencilIcon from "../../Common/TableWrapper/TableActionIcons/PencilIcon";
+import PodDetails from "./pods/PodDetails";

 interface ITenantDetailsProps {
  classes: any;
@@ -163,6 +164,7 @@ const TenantDetails = ({
    switch (section) {
      case "pools":
      case "pods":
+      case ":podName":
      case "metrics":
      case "license":
      case "security":
@@ -311,7 +313,7 @@ const TenantDetails = ({
            </ListItem>
            <ListItem
              button
-              selected={currentTab === "pods"}
+              selected={currentTab === "pods" || currentTab === ":podName"}
              onClick={() => {
                changeRoute("pods");
              }}
@@ -348,6 +350,10 @@ const TenantDetails = ({
                path="/namespaces/:tenantNamespace/tenants/:tenantName/pools"
                component={PoolsSummary}
              />
+              <Route
+                path="/namespaces/:tenantNamespace/tenants/:tenantName/pods/:podName"
+                component={PodDetails}
+              />
              <Route
                path="/namespaces/:tenantNamespace/tenants/:tenantName/pods"
                component={PodsSummary}
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
@@ -199,34 +199,8 @@ const TenantSummary = ({
                    <tr>
                      <td className={classes.titleCol}>Capacity:</td>
                      <td>{niceBytes(capacity.toString(10))}</td>
-                      <td className={classes.titleCol}>MinIO:</td>
-                      <td>
-                        <Button
-                          color="primary"
-                          className={classes.anchorButton}
-                          onClick={() => {
-                            setUpdateMinioVersion(true);
-                          }}
-                        >
-                          {tenant ? tenant.image : ""}
-                        </Button>
-                      </td>
-                    </tr>
-                    <tr>
                      <td className={classes.titleCol}>Clusters:</td>
                      <td>{poolCount}</td>
-                      <td className={classes.titleCol}>Console:</td>
-                      <td>
-                        <Button
-                          color="primary"
-                          className={classes.anchorButton}
-                          onClick={() => {
-                            setUpdateMinioVersion(true);
-                          }}
-                        >
-                          {tenant ? tenant.console_image : ""}
-                        </Button>
-                      </td>
                    </tr>
                    <tr>
                      <td className={classes.titleCol}>Instances:</td>
@@ -258,6 +232,20 @@ const TenantSummary = ({
                        </td>
                      </tr>
                    )}
+                    <tr>
+                      <td className={classes.titleCol}>MinIO:</td>
+                      <td colSpan={3}>
+                        <Button
+                          color="primary"
+                          className={classes.anchorButton}
+                          onClick={() => {
+                            setUpdateMinioVersion(true);
+                          }}
+                        >
+                          {tenant ? tenant.image : ""}
+                        </Button>
+                      </td>
+                    </tr>
                    <tr>
                      <td className={classes.titleCol}>State:</td>
                      <td colSpan={3}>{tenant?.currentState}</td>
@@ -333,7 +321,7 @@ const TenantSummary = ({
                    );
                  }}
                >
-                  Management UI
+                  Manage Tenant
                </Button>
              </Fragment>
            )}
@@ -391,23 +379,6 @@ const TenantSummary = ({
                          {minioTLS ? "Enabled" : "Disabled"}
                        </Button>
                      </td>
-                      {consoleEnabled ? (
-                        <Fragment>
-                          <td className={classes.titleCol}>Console TLS:</td>
-                          <td>
-                            <Button
-                              color="primary"
-                              className={classes.anchorButton}
-                            >
-                              {consoleTLS ? "Enabled" : "Disabled"}
-                            </Button>
-                          </td>
-                        </Fragment>
-                      ) : (
-                        <td />
-                      )}
-                    </tr>
-                    <tr>
                      <td className={classes.titleCol}>Encryption:</td>
                      <td>
                        <Button
@@ -417,8 +388,6 @@ const TenantSummary = ({
                          {encryptionEnabled ? "Enabled" : "Disabled"}
                        </Button>
                      </td>
-                      <td></td>
-                      <td></td>
                    </tr>
                    <tr>
                      <React.Fragment>
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx
@@ -166,18 +166,6 @@ const UpdateTenantModal = ({
              }}
            />
          </Grid>
-          <Grid item xs={12}>
-            <InputBoxWrapper
-              value={consoleImage}
-              label={"Console's Image"}
-              id={"consoleImage"}
-              name={"consoleImage"}
-              placeholder={"E.g. minio/console:v0.3.13"}
-              onChange={(e) => {
-                setConsoleImage(e.target.value);
-              }}
-            />
-          </Grid>
          <Grid item xs={12}>
            <FormSwitchWrapper
              value="imageRegistry"
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx
@@ -65,36 +65,18 @@ const PodDetails = ({ classes, match }: IPodDetailsProps) => {

  return (
    <React.Fragment>
-      <PageHeader
-        label={
-          <Fragment>
-            <Link to={"/tenants"} className={classes.breadcrumLink}>
-              Tenants
-            </Link>
-            {" > "}
-            <Link
-              to={`/namespaces/${tenantNamespace}/tenants/${tenantName}`}
-              className={classes.breadcrumLink}
-            >
-              {tenantName}
-            </Link>
-            {` > Pods > ${podName}`}
-          </Fragment>
-        }
-        actions={
-          <IconButton
-            color="primary"
-            aria-label="Refresh List"
-            component="span"
-            onClick={() => {
-              setLoading(true);
-            }}
+      <Grid item xs={12}>
+        <div className={classes.topSpacer} />
+        <h1 className={classes.sectionTitle}>
+          <Link
+            to={`/namespaces/${tenantNamespace}/tenants/${tenantName}/pods`}
+            className={classes.breadcrumLink}
          >
-            <RefreshIcon />
-          </IconButton>
-        }
-      />
-      <Grid item xs={12} className={classes.container} />
+            Pods
+          </Link>{" "}
+          &gt; {podName}
+        </h1>
+      </Grid>
      <Grid container>
        <Grid item xs={9}>
          <Tabs
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodEvents.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodEvents.tsx
@@ -30,6 +30,7 @@ import { niceDays } from "../../../../../common/utils";
 import { ErrorResponseHandler } from "../../../../../common/types";
 import TableWrapper from "../../../Common/TableWrapper/TableWrapper";
 import api from "../../../../../common/api";
+import { AppState } from "../../../../../store";

 interface IPodEventsProps {
  classes: any;
@@ -38,6 +39,7 @@ interface IPodEventsProps {
  podName: string;
  propLoading: boolean;
  setErrorSnackMessage: typeof setErrorSnackMessage;
+  loadingTenant: boolean;
 }

 const styles = (theme: Theme) =>
@@ -59,6 +61,7 @@ const PodEvents = ({
  podName,
  propLoading,
  setErrorSnackMessage,
+  loadingTenant,
 }: IPodEventsProps) => {
  const [event, setEvent] = useState<IEvent[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
@@ -69,6 +72,12 @@ const PodEvents = ({
    }
  }, [propLoading]);

+  useEffect(() => {
+    if (loadingTenant) {
+      setLoading(true);
+    }
+  }, [loadingTenant]);
+
  useEffect(() => {
    if (loading) {
      api
@@ -113,8 +122,10 @@ const PodEvents = ({
    </React.Fragment>
  );
 };
-
-const connector = connect(null, {
+const mapState = (state: AppState) => ({
+  loadingTenant: state.tenants.tenantDetails.loadingTenant,
+});
+const connector = connect(mapState, {
  setErrorSnackMessage,
 });

--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx
@@ -31,6 +31,7 @@ import {
 } from "../../../Common/FormComponents/common/styleLibrary";
 import { setErrorSnackMessage } from "../../../../../actions";
 import { ErrorResponseHandler } from "../../../../../common/types";
+import { AppState } from "../../../../../store";

 interface IPodLogsProps {
  classes: any;
@@ -39,6 +40,7 @@ interface IPodLogsProps {
  podName: string;
  propLoading: boolean;
  setErrorSnackMessage: typeof setErrorSnackMessage;
+  loadingTenant: boolean;
 }

 const styles = (theme: Theme) =>
@@ -84,6 +86,7 @@ const PodLogs = ({
  podName,
  propLoading,
  setErrorSnackMessage,
+  loadingTenant,
 }: IPodLogsProps) => {
  const [highlight, setHighlight] = useState<string>("");
  const [logLines, setLogLines] = useState<string[]>([]);
@@ -95,6 +98,12 @@ const PodLogs = ({
    }
  }, [propLoading]);

+  useEffect(() => {
+    if (loadingTenant) {
+      setLoading(true);
+    }
+  }, [loadingTenant]);
+
  const renderLog = (logMessage: string, index: number) => {
    // remove any non ascii characters, exclude any control codes
    logMessage = logMessage.replace(/([^\x20-\x7F])/g, "");
@@ -191,7 +200,11 @@ const PodLogs = ({
  );
 };

-const connector = connect(null, {
+const mapState = (state: AppState) => ({
+  loadingTenant: state.tenants.tenantDetails.loadingTenant,
+});
+
+const connector = connect(mapState, {
  setErrorSnackMessage,
 });