changed icon (#920 )

Co-authored-by: Leon <>
TRA-4122 oas gui grooming (#915 )
2026-02-16 19:10:17 +00:00 · 2022-03-24 10:43:35 +02:00 · 2022-03-23 22:15:04 +02:00 · 2022-03-23 22:02:29 +02:00
14 changed files with 155 additions and 114 deletions
--- a/cli/cmd/check/kubernetesPermissions.go
+++ b/cli/cmd/check/kubernetesPermissions.go
@@ -111,9 +111,9 @@ func checkRulesPermissions(ctx context.Context, kubernetesProvider *kubernetes.P
 func checkPermissionExist(group string, resource string, verb string, namespace string, exist bool, err error) bool {
 	var groupAndNamespace string
 	if group != "" && namespace != "" {
-		groupAndNamespace = fmt.Sprintf("in group '%v' and namespace '%v'", group, namespace)
+		groupAndNamespace = fmt.Sprintf("in api group '%v' and namespace '%v'", group, namespace)
 	} else if group != "" {
-		groupAndNamespace = fmt.Sprintf("in group '%v'", group)
+		groupAndNamespace = fmt.Sprintf("in api group '%v'", group)
 	} else if namespace != "" {
 		groupAndNamespace = fmt.Sprintf("in namespace '%v'", namespace)
 	}
--- a/cli/cmd/checkRunner.go
+++ b/cli/cmd/checkRunner.go
@@ -27,13 +27,21 @@ func runMizuCheck() {
 		checkPassed = check.KubernetesVersion(kubernetesVersion)
 	}

-	if config.Config.Check.PreTap {
-		if checkPassed {
-			checkPassed = check.TapKubernetesPermissions(ctx, embedFS, kubernetesProvider)
+	if config.Config.Check.PreTap || config.Config.Check.PreInstall || config.Config.Check.ImagePull {
+		if config.Config.Check.PreTap {
+			if checkPassed {
+				checkPassed = check.TapKubernetesPermissions(ctx, embedFS, kubernetesProvider)
+			}
+		} else if config.Config.Check.PreInstall {
+			if checkPassed {
+				checkPassed = check.InstallKubernetesPermissions(ctx, kubernetesProvider)
+			}
 		}
-	} else if config.Config.Check.PreInstall {
-		if checkPassed {
-			checkPassed = check.InstallKubernetesPermissions(ctx, kubernetesProvider)
+
+		if config.Config.Check.ImagePull {
+			if checkPassed {
+				checkPassed = check.ImagePullInCluster(ctx, kubernetesProvider)
+			}
 		}
 	} else {
 		if checkPassed {
@@ -45,12 +53,6 @@ func runMizuCheck() {
 		}
 	}

-	if config.Config.Check.ImagePull {
-		if checkPassed {
-			checkPassed = check.ImagePullInCluster(ctx, kubernetesProvider)
-		}
-	}
-
 	if checkPassed {
 		logger.Log.Infof("\nStatus check results are %v", fmt.Sprintf(uiUtils.Green, "√"))
 	} else {
--- a/ui-common/example/src/App.tsx
+++ b/ui-common/example/src/App.tsx
@@ -1,4 +1,4 @@
-import TrafficViewer,{useWS, DEFAULT_QUERY} from '@up9/mizu-common';
+import TrafficViewer,{useWS, DEFAULT_QUERY, OasModal} from '@up9/mizu-common';
 import "@up9/mizu-common/dist/index.css"
 import {useEffect} from 'react';
 import Api, {getWebsocketUrl} from "./api";
@@ -17,8 +17,7 @@ const App = () => {
  },[])

  return <>
-    <TrafficViewer message={message} error={error} isWebSocketOpen={isOpen}
-                   trafficViewerApiProp={trafficViewerApi} ></TrafficViewer>
+
  </>
 }

--- a/ui-common/package.json
+++ b/ui-common/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@up9/mizu-common",
-  "version": "1.0.133",
+  "version": "1.0.135",
  "description": "Made with create-react-library",
  "author": "",
  "license": "MIT",
--- a/ui-common/src/components/OasModal/OasModal.module.sass
+++ b/ui-common/src/components/OasModal/OasModal.module.sass
@@ -6,23 +6,32 @@
    padding: 10px

 .selectHeader
+    font-family: Source Sans Pro,Lucida Grande,Tahoma,sans-serif
    display: flex
    align-items: center
+    font-weight: 900
    width: 100%
    margin-top: -1%

 .openApilogo
-    width: 36px
+    width: 43px

 .title
    color:#494677
-    font-family: Lato
-    font-size: 20px
+    font-family: Source Sans Pro,Lucida Grande,Tahoma,sans-serif
+    font-size: 28px
    font-weight: 600

 .selectContainer
-    margin-left: 1%
+    width: 14%
+    margin-bottom: 1%
+    margin-top: 1%

 .redoc
-    height: 98%
-    overflow-y: scroll
+    height: 85%
+    overflow-y: scroll
+
+.borderLine
+  border-top: 1px solid #dee6fe
+  margin-bottom: 1%
+
--- a/ui-common/src/components/OasModal/OasModal.tsx
+++ b/ui-common/src/components/OasModal/OasModal.tsx
@@ -7,7 +7,7 @@ import style from './OasModal.module.sass';
 import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
-import { Select } from "../UI/Select";
+import { UI } from "../..";

 const modalStyle = {
  position: 'absolute',
@@ -25,17 +25,17 @@ const modalStyle = {

 const ipAddressWithPortRegex = new RegExp('([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}):([0-9]{1,5})');

-const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService}) => { 
+const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService }) => {
  const [oasServices, setOasServices] = useState([] as string[])
  const [selectedServiceName, setSelectedServiceName] = useState("");
  const [selectedServiceSpec, setSelectedServiceSpec] = useState(null);
  const [resolvedServices, setResolvedServices] = useState([]);
  const [unResolvedServices, setUnResolvedServices] = useState([]);

-  const onSelectedOASService = useCallback( async (selectedService) => {
-    if (!!selectedService){
+  const onSelectedOASService = useCallback(async (selectedService) => {
+    if (!!selectedService) {
      setSelectedServiceName(selectedService);
-      if(oasServices.length === 0){
+      if (oasServices.length === 0) {
        return
      }
      try {
@@ -46,13 +46,13 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
        console.error(e);
      }
    }
-  },[oasServices.length])
+  }, [oasServices.length])

-  const resolvedArrayBuilder = useCallback(async(services) => {
+  const resolvedArrayBuilder = useCallback(async (services) => {
    const resServices = [];
    const unResServices = [];
    services.forEach(s => {
-      if(ipAddressWithPortRegex.test(s)){
+      if (ipAddressWithPortRegex.test(s)) {
        unResServices.push(s);
      }
      else {
@@ -62,10 +62,16 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService

    resServices.sort();
    unResServices.sort();
-    onSelectedOASService(resServices[0]);
+    if (resServices.length > 0) {
+      onSelectedOASService(resServices[0]);
+    }
+    else {
+      onSelectedOASService(unResServices[0]);
+    }
+
    setResolvedServices(resServices);
    setUnResolvedServices(unResServices);
-  },[onSelectedOASService])
+  }, [onSelectedOASService])

  useEffect(() => {
    (async () => {
@@ -77,8 +83,7 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
        console.error(e);
      }
    })();
-  }, [openModal,resolvedArrayBuilder]);
-
+  }, [openModal, resolvedArrayBuilder]);


  return (
@@ -90,48 +95,48 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
      closeAfterTransition
      BackdropComponent={Backdrop}
      BackdropProps={{
-          timeout: 500,
+        timeout: 500,
      }}
    >
      <Fade in={openModal}>
        <Box sx={modalStyle}>
          <div className={style.boxContainer}>
            <div className={style.selectHeader}>
-              <div><img src={openApiLogo} alt="openApi" className={style.openApilogo}/></div>
-                <div className={style.title}>OpenAPI selected service: </div>
-                <div className={style.selectContainer} >
-                  <FormControl>
-                    <Select
-                      labelId="service-select-label"
-                      id="service-select"
-                      placeholder="Show OAS"
-                      value={selectedServiceName}
-                      onChangeCb={onSelectedOASService}
-                    >
-                      <ListSubheader disableSticky={true}>Resolved</ListSubheader>
-                      {resolvedServices.map((service) => (
-                        <MenuItem key={service} value={service}>
-                          {service}
-                        </MenuItem>
-                      ))}
-                      <ListSubheader disableSticky={true}>UnResolved</ListSubheader>
-                      {unResolvedServices.map((service) => (
-                        <MenuItem key={service} value={service}>
-                          {service}
-                        </MenuItem>
-                      ))} 
-                    </Select>
-                  </FormControl>
-                </div>
+              <div><img src={openApiLogo} alt="openApi" className={style.openApilogo} /></div>
+              <div className={style.title}>OpenApi </div>
            </div>
            <div style={{ cursor: "pointer" }}>
-              <img src={closeIcon} alt="close" onClick={handleCloseModal} />
-            </div>
+                <img src={closeIcon} alt="close" onClick={handleCloseModal} />
+              </div>
          </div>
+          <div className={style.selectContainer} >
+              <FormControl>
+                <UI.Select
+                  labelId="service-select-label"
+                  id="service-select"
+                  value={selectedServiceName}
+                  onChangeCb={onSelectedOASService}
+                >
+                  <ListSubheader disableSticky={true}>Resolved</ListSubheader>
+                  {resolvedServices.map((service) => (
+                    <MenuItem key={service} value={service}>
+                      {service}
+                    </MenuItem>
+                  ))}
+                  <ListSubheader disableSticky={true}>UnResolved</ListSubheader>
+                  {unResolvedServices.map((service) => (
+                    <MenuItem key={service} value={service}>
+                      {service}
+                    </MenuItem>
+                  ))}
+                </UI.Select>
+              </FormControl>
+            </div>
+          <div className={style.borderLine}></div>
          <div className={style.redoc}>
-          {selectedServiceSpec && <RedocStandalone 
-                                    spec={selectedServiceSpec}   
-                                    options={redocThemeOptions}/>}
+            {selectedServiceSpec && <RedocStandalone
+              spec={selectedServiceSpec}
+              options={redocThemeOptions} />}
          </div>
        </Box>
      </Fade>
--- a/ui-common/src/components/OasModal/redocThemeOptions.ts
+++ b/ui-common/src/components/OasModal/redocThemeOptions.ts
@@ -1,35 +1,52 @@
-export const redocThemeOptions = {    
-       theme:{
-         codeBlock:{
-           backgroundColor:"#11171a",
-         },
-         colors:{
-           responses:{
-             error:{
-               tabTextColor:"#1b1b29"
-             },
-             info:{
-               tabTextColor:"#1b1b29",
-             },
-             success:{
-               tabTextColor:"#0c0b1a"
-             },
-           },
-           text:{
-             primary:"#1b1b29",
-             secondary:"#4d4d4d"
-           }
-         },
-         rightPanel:{
-           backgroundColor:"#253237",
-         },
-         sidebar:{
-           backgroundColor:"#ffffff"
-         },
-         typography:{
-           code:{
-             color:"#0c0b1a"
-           }
-         }
-       }
-     }
+const fontFamilyVar = "Source Sans Pro, Lucida Grande, Tahoma, sans-serif"
+
+export const redocThemeOptions = {
+  theme: {
+    codeBlock: {
+      backgroundColor: "#14161c",
+    },
+    components: {
+      buttons: {
+        fontFamily: fontFamilyVar,
+      },
+      httpBadges: {
+        fontFamily: fontFamilyVar,
+      }
+    },
+    colors: {
+      responses: {
+        error: {
+          tabTextColor: "#1b1b29"
+        },
+        info: {
+          tabTextColor: "#1b1b29",
+        },
+        success: {
+          tabTextColor: "#0c0b1a"
+        },
+      },
+      text: {
+        primary: "#1b1b29",
+        secondary: "#4d4d4d"
+      }
+    },
+    rightPanel: {
+      backgroundColor: "#0D0B1D",
+    },
+    sidebar: {
+      backgroundColor: "#ffffff"
+    },
+    typography: {
+      code: {
+        color: "#0c0b1a",
+        fontFamily: fontFamilyVar
+      },
+      fontFamily: fontFamilyVar,
+      fontSize: "90%",
+      fontWieght: "normal",
+      headings: {
+        fontFamily: fontFamilyVar
+      }
+    }
+  }
+}
--- a/ui-common/src/components/UI/InformationIcon.tsx
+++ b/ui-common/src/components/UI/InformationIcon.tsx
@@ -11,8 +11,7 @@ export interface InformationIconProps{

 export const InformationIcon: React.FC<InformationIconProps> = ({link,style}) => {
    return <React.Fragment>
-        
-        <a href={DEFUALT_LINK ? DEFUALT_LINK : link} style={style} className={styles.flex}>
+        <a href={DEFUALT_LINK ? DEFUALT_LINK : link} style={style} className={styles.flex} title="documentation">
            <img className="headerIcon"  src={infoImg} alt="Info icon"/>
        </a>
    </React.Fragment>
--- a/ui-common/src/components/UI/Select.tsx
+++ b/ui-common/src/components/UI/Select.tsx
@@ -19,7 +19,7 @@ const menuProps: any = {
 };

 // icons styles are not overwritten from the Props, only as a separate object
-const classes = {icon: styles.icon, selectMenu: styles.list};
+const classes = {icon: styles.icon, selectMenu: styles.list, select: styles.oasSelect, root:styles.root};

 const defaultProps = {
    MenuProps: menuProps,
--- a/ui-common/src/components/UI/Tabs.tsx
+++ b/ui-common/src/components/UI/Tabs.tsx
@@ -76,6 +76,7 @@ const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, color, onChange, l
        {tabs.map(({tab, disabled, disabledMessage, highlight, badge}, index) => {
            const active = currentTab === tab;
            const tabLink = <span
+                data-cy={"tab-" + tab}
                key={tab}
                className={`${_classes.tab} ${active ? _classes.active : ''} ${disabled ? _classes.disabled : ''} ${highlight ? _classes.highlight : ''} ${dark ? 'dark' : ''}`}
                onClick={() => !disabled && onChange(tab)}
--- a/ui-common/src/components/UI/assets/info.svg
+++ b/ui-common/src/components/UI/assets/info.svg
@@ -1,6 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#627EF7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.1C12.5522 10.1 13 10.5477 13 11.1V14.6H13.8C14.3522 14.6 14.8 15.0477 14.8 15.6C14.8 16.1523 14.3522 16.6 13.8 16.6H10.2C9.64767 16.6 9.19995 16.1523 9.19995 15.6C9.19995 15.0477 9.64767 14.6 10.2 14.6H11V11.1C11 10.5477 11.4477 10.1 12 10.1Z" fill="#627EF7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13 11C13 11.5523 12.5523 12 12 12L10 12C9.44772 12 9 11.5523 9 11C9 10.4477 9.44772 10 10 10L12 10C12.5523 10 13 10.4477 13 11Z" fill="#627EF7"/>
-<circle cx="12" cy="8" r="1" fill="#627EF7"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path fill="#627EF7" d="M12 4.707c-2.938-1.83-7.416-2.567-12-2.707v17.714c3.937.12 7.795.681 10.667 1.995.846.388 1.817.388 2.667 0 2.872-1.314 6.729-1.875 10.666-1.995v-17.714c-4.584.14-9.062.877-12 2.707zm-10 13.104v-13.704c5.157.389 7.527 1.463 9 2.334v13.168c-1.525-.546-4.716-1.505-9-1.798zm20 0c-4.283.293-7.475 1.252-9 1.799v-13.171c1.453-.861 3.83-1.942 9-2.332v13.704z"/>
+</svg>
--- a/ui-common/src/components/UI/style/Select.module.sass
+++ b/ui-common/src/components/UI/style/Select.module.sass
@@ -3,3 +3,15 @@

 .list
    margin-top: 8px
+
+.oasSelect
+    font-weight: normal 
+    padding: 8px 4px 8px 12px !important
+    border: 1px solid #9d9d9d !important
+    border-radius: 9px !important
+    font-family: Source Sans Pro, Lucida Grande, Tahoma, sans-serif !important
+    width: 216px !important
+
+.root
+    font-family: Source Sans Pro, Lucida Grande, Tahoma, sans-serif !important
+
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,7 +13,7 @@
    "@types/jest": "^26.0.22",
    "@types/node": "^12.20.10",
    "@uiw/react-textarea-code-editor": "^1.4.12",
-    "@up9/mizu-common": "1.0.133",
+    "@up9/mizu-common": "1.0.135",
    "axios": "^0.25.0",
    "core-js": "^3.20.2",
    "craco-babel-loader": "^1.0.3",
--- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
+++ b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
@@ -45,7 +45,7 @@ const trafficViewerApi = {...api}
                                className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
                                style={{ marginRight: 25 }}
                                onClick={handleOpenOasModal}>
-                                Show OAS
+                                OpenApi Specs
                              </Button>}
                              {window["isServiceMapEnabled"] && <Button
                                startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{marginRight:"8%"}}></img>}