Merge pull request #334 from snetsystems:dev-k8s-yongsik

Dev k8s yongsik

.vscode/launch.json

@@ -25,6 +25,7 @@
         "-u=oncue:<port>",
         "-u=vsphere:on",
         "-u=aws:on",
+        "-u=k8s:on",
         "-u=ipmi-secret-key:<Seed key using for the encryption of ipmi password>",
         "-c=./cloudhub-canned/",
         "--protoboards-path=./cloudhub-protoboards/",

Makefile

@@ -1,4 +1,4 @@
-VERSION = 1.1.1
+VERSION = 1.2.0
 ifeq ($(OS), Windows_NT)
 	GOBINDATA := $(shell go-bindata.exe --version 2>nil)
 else

README.md

@@ -45,7 +45,7 @@ You should use [Forked **Snetsystems/salt**](https://github.com/snetsystems/salt
 - Optionable Addon features.
   - **_VMWare_ Infrastructure** Viewer.
     - via **_VSphere_** API and **_Salt_**
-  - **_K8s Infrastructure_** Diagram & Viewer. (Pending in dev-k8s branch)
+  - **_K8s Infrastructure_** Diagram & Viewer.
     - via customized `Salt Kuberetes` Module.
   - **_AWS_** Instances Monitoring.
   - SWAN Router & SDPlex(Oncue) Features.
@@ -54,6 +54,7 @@ You should use [Forked **Snetsystems/salt**](https://github.com/snetsystems/salt
     <img src="./docs/images/infrastructure.png"/>
     <img src="./docs/images/topology_map.png"/>
     <img src="./docs/images/VMWare.png"/>
+    <img src="./docs/images/k8s.png"/>
     <img src="./docs/images/AWS_01.png"/>
     <img src="./docs/images/AWS_02.png"/>
     <img src="./docs/images/AWS_03.png"/>

backend/server/server.go

@@ -65,8 +65,8 @@ type Server struct {
 	KapacitorUsername string `long:"kapacitor-username" description:"Username of your Kapacitor instance" env:"KAPACITOR_USERNAME"`
 	KapacitorPassword string `long:"kapacitor-password" description:"Password of your Kapacitor instance" env:"KAPACITOR_PASSWORD"`
 
-	AddonURLs   map[string]string `short:"u" long:"addon-url" description:"Support addon is [salt, swan, oncue, ipmi-secret-key]. Actually, this is a key-value extensional options, Not only url But for everywhere to be used the key-value extensional options. Multiple URL can be added by using multiple of the same flag with different 'name:url' values, or as an environment variable with comma-separated 'name:url' values. E.g. via flags: '--addon-url=salt:{url} --addon-url=swan:{url} --addon-url=ipmi-secret-key:{seed key}'. E.g. via environment variable: 'export ADDON_URL=salt:{url},swan:{url}'" env:"ADDON_URL" env-delim:","`
-	AddonTokens map[string]string `short:"k" long:"addon-tokens" description:"Support addon is [salt, swan]. API tokens to be used to the client for a request to addon API servers. Multiple tokens can be added by using multiple of the same flag with different 'name:token' values, or as an environment variable with comma-separated 'name:token' values. E.g. via flags: '--addon-tokens=salt:{token} --addon-tokens=swan:{token}'. E.g. via environment variable: 'export ADDON_TOKENS=salt:{token},swan:{token}'" env:"ADDON_TOKENS" env-delim:","`
+	AddonURLs   map[string]string `short:"u" long:"addon-url" description:"Support addon is [salt, aws, k8s, swan, oncue, ipmi-secret-key]. Actually, this is a key-value extensional options, Not only url But for everywhere to be used the key-value extensional options. Multiple values can be added by using multiple of the same flag with different 'name:{value}', or as an environment variable with comma-separated 'name:{value}'. E.g. via flags: '-u=salt:{url} -u=aws:on[off] -u=k8s:on[off] -u=swan:{url} -u=oncue:{port number} -u=ipmi-secret-key:{seed key}'. E.g. via environment variable: 'export ADDON_URL=salt:{url},swan:{url}'" env:"ADDON_URL" env-delim:","`
+	AddonTokens map[string]string `short:"k" long:"addon-tokens" description:"The token associated with addon [salt, swan]. E.g. via flags: '-k=salt:{token} -k=swan:{token}'. E.g. via environment variable: 'export ADDON_TOKENS=salt:{token},swan:{token}'" env:"ADDON_TOKENS" env-delim:","`
 
 	Develop            bool          `short:"d" long:"develop" description:"Run server in develop mode."`
 	BoltPath           string        `short:"b" long:"bolt-path" description:"Full path to boltDB file (e.g. './cloudhub-v1.db')" env:"BOLT_PATH" default:"cloudhub-v1.db"`
@@ -125,8 +125,8 @@ type Server struct {
 
 	LoginAuthType         string   `long:"login-auth-type" description:"Login auth type (mix, oauth, basic)" env:"LOGIN_AUTH_TYPE" default:"oauth"`
 
-	PasswordPolicy        string   `long:"password-policy" description:"Password validity rules" env:"PASSWORD_POLICY"`
-	PasswordPolicyMessage string   `long:"password-policy-message" description:"Password validity rule description" env:"PASSWORD_POLICY_MESSAGE"`
+	PasswordPolicy        string   `long:"password-policy" description:"Regular expression to validate password strength" env:"PASSWORD_POLICY"`
+	PasswordPolicyMessage string   `long:"password-policy-message" description:"The description about password-policy set" env:"PASSWORD_POLICY_MESSAGE"`
 
 	MailSubject           string   `long:"mail-subject" description:"Mail subject" env:"MAIL_SUBJECT"`
 	MailBodyMessage       string   `long:"mail-body-message" description:"Mail body message" env:"MAIL_BODY_MESSAGE"`

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "private": true,
   "description": "This is CloudHub's User interface made in React & Typescript",
   "author": "Jack Kim",
@@ -40,16 +40,16 @@
     "@types/react-dnd-html5-backend": "^2.1.9",
     "@types/react-dom": "^16.0.7",
     "@types/react-onclickoutside": "^6.7.3",
+    "@types/react-resizable": "^1.7.3",
     "@types/react-router": "^3.0.15",
     "@types/react-router-redux": "4",
-    "@types/react-resizable": "^1.7.3",
     "@types/react-virtualized": "^9.18.3",
+    "@types/redux": "^3.3.1",
     "@types/redux-auth-wrapper": "^2.0.9",
     "@types/text-encoding": "^0.0.32",
     "@types/uuid": "^3.4.3",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
-    "@types/redux": "^3.3.1",
     "autoprefixer": "^6.3.1",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^10.0.1",

frontend/src/agent_admin/containers/AgentConfiguration.tsx

@@ -157,6 +157,7 @@ interface State {
   isPluginModalVisible: boolean
 }
 interface Plugin {
+  inoutType: string
   name: string
   isActivity: boolean
 }
@@ -309,10 +310,12 @@ export class AgentConfiguration extends PureComponent<Props, State> {
     outputPlugin.shift()
 
     const inputPluginList = _.map(inputPlugin, input => ({
+      inoutType: 'IN',
       name: input,
       isActivity: false,
     }))
     const outputPluginList = _.map(outputPlugin, output => ({
+      inoutType: 'OUT',
       name: output,
       isActivity: false,
     }))
@@ -826,48 +829,27 @@ export class AgentConfiguration extends PureComponent<Props, State> {
       saltMasterToken,
       getRunnerSaltCmdTelegraf,
     } = this.props
-    const {inputPluginList, outputPluginList, searchTerm} = this.state
-    const {idx, name, inoutkind} = _thisProps
+    const {inputPluginList, outputPluginList} = this.state
+    const {name, inoutkind} = _thisProps
 
     this.setState({
       isPluginModalVisible: true,
       focusedMeasure: name,
       description: '',
     })
 
-    const sortedInputPlugin = this.getSortedPlugin(
-      inputPluginList,
-      searchTerm,
-      'name',
-      SortDirection.ASC
-    )
-
-    const sortedOutputPlugin = this.getSortedPlugin(
-      outputPluginList,
-      searchTerm,
-      'name',
-      SortDirection.ASC
-    )
-
-    const mapInputPlugin = sortedInputPlugin.map(m => {
-      m.isActivity = false
+    const mapInputPlugin = inputPluginList.map(m => {
+      if (m.inoutType === inoutkind && m.name === name) m.isActivity = true
+      else m.isActivity = false
       return m
     })
 
-    const mapOutputPlugin = sortedOutputPlugin.map(m => {
-      m.isActivity = false
+    const mapOutputPlugin = outputPluginList.map(m => {
+      if (m.inoutType === inoutkind && m.name === name) m.isActivity = true
+      else m.isActivity = false
       return m
     })
 
-    if (inoutkind === 'IN') {
-      mapInputPlugin[idx].isActivity === false
-        ? (mapInputPlugin[idx].isActivity = true)
-        : (mapInputPlugin[idx].isActivity = false)
-    } else {
-      mapOutputPlugin[idx].isActivity === false
-        ? (mapOutputPlugin[idx].isActivity = true)
-        : (mapOutputPlugin[idx].isActivity = false)
-    }
     try {
       const {data} = await getRunnerSaltCmdTelegraf(
         saltMasterUrl,
@@ -885,28 +867,14 @@ export class AgentConfiguration extends PureComponent<Props, State> {
   }
 
   private handlePluginClose = (): void => {
-    const {inputPluginList, outputPluginList, searchTerm} = this.state
-
-    const sortedInputPlugin = this.getSortedPlugin(
-      inputPluginList,
-      searchTerm,
-      'name',
-      SortDirection.ASC
-    )
-
-    const sortedOutputPlugin = this.getSortedPlugin(
-      outputPluginList,
-      searchTerm,
-      'name',
-      SortDirection.ASC
-    )
+    const {inputPluginList, outputPluginList} = this.state
 
-    const mapInputPlugin = sortedInputPlugin.map(m => {
+    const mapInputPlugin = inputPluginList.map(m => {
       m.isActivity = false
       return m
     })
 
-    const mapOutputPlugin = sortedOutputPlugin.map(m => {
+    const mapOutputPlugin = outputPluginList.map(m => {
       m.isActivity = false
       return m
     })

frontend/src/hosts/components/KubernetesContents.tsx

@@ -31,7 +31,6 @@ import {Source, TimeRange, Cell, Template, RemoteDataState} from 'src/types'
 
 interface Props {
   handleOnSetActiveEditorTab: (tab: string) => void
-  handleOnClickPodName: () => void
   handleOnClickVisualizePod: (data: any) => void
   handleDBClick: (data: any) => void
   handleResize: (proportions: number[]) => void
@@ -118,7 +117,6 @@ class KubernetesContents extends PureComponent<Props, State> {
       kubernetesObject,
       kubernetesD3Data,
       handleDBClick,
-      handleOnClickPodName,
       handleOnClickVisualizePod,
       handleResize,
       handleOpenTooltip,
@@ -134,7 +132,6 @@ class KubernetesContents extends PureComponent<Props, State> {
             focuseNode={focuseNode}
             pinNode={pinNode}
             handleDBClick={handleDBClick}
-            handleOnClickPodName={handleOnClickPodName}
             handleOnClickVisualizePod={handleOnClickVisualizePod}
             handleResize={handleResize}
             handleOpenTooltip={handleOpenTooltip}
@@ -206,7 +203,7 @@ class KubernetesContents extends PureComponent<Props, State> {
                   className={'hosts-table--th align--start'}
                   style={{width: HeaderWidth, padding: '4px 8px'}}
                 >
-                  Label
+                  Name
                 </div>
                 <TableBodyRowItem
                   title={
@@ -218,7 +215,7 @@ class KubernetesContents extends PureComponent<Props, State> {
               </div>
             </>
           </TableBody>
-          <div className={'kubernetes-detail-title'}>Raw Data</div>
+          <div className={'kubernetes-detail-title'}>Details</div>
           {activeTab === 'Basic' ? (
             <KubernetesBasicsTable />
           ) : (

frontend/src/hosts/components/KubernetesHeader.tsx

@@ -130,7 +130,7 @@ class KubernetesHeader extends PureComponent<Props> {
               icon={IconFont.Filter}
               onClick={handleClickFilter}
               shape={ButtonShape.Square}
-              titleText="Filter alert text"
+              titleText="Apply Filter"
             />
           </div>
         </div>

frontend/src/hosts/components/KubernetesHexagon.tsx

@@ -19,7 +19,6 @@ import {D3K8sData, FocuseNode, KubernetesObject} from 'src/hosts/types'
 import {RemoteDataState} from 'src/types'
 
 interface Props {
-  handleOnClickPodName: () => void
   handleOnClickVisualizePod: (data: any) => void
   handleDBClick: (data: any) => void
   handleResize: (proportions: number[]) => void
@@ -202,7 +201,6 @@ class KubernetesHexagon extends PureComponent<Props, State> {
       .attr('r', d => d.r)
       .attr('fill', d => clusterTypeColorset[d.data.type])
       .attr('stroke', 'black')
-      .attr('pointer-events', d => (d.children ? 'all' : 'none'))
       .on('mouseover', function () {
         onMouseOver(this)
       })
@@ -280,7 +278,13 @@ class KubernetesHexagon extends PureComponent<Props, State> {
       .attr('transform', d => `translate(${d.x},${d.y})`)
 
     textNode
-      .filter(d => d.height > 0)
+      .filter(
+        d =>
+          !(
+            d.depth === 3 ||
+            (d.depth === 2 && (d.data.type === 'CR' || d.data.type === 'CRB'))
+          )
+      )
       .append('text')
       .attr('fill', 'white')
       .append('textPath')
@@ -430,16 +434,16 @@ class KubernetesHexagon extends PureComponent<Props, State> {
     this.clickedTarget = null
   }
 
-  private runOnDBClick = (target: SVGSVGElement, data: any) => {
+  private runOnDBClick = (data: any) => {
     this.clickedOnce = false
     this.clickedTarget = null
     clearTimeout(this.timeout)
-    this.onMouseDBClick(target, data)
+    this.onMouseDBClick(data)
   }
 
   private onMouseClick = (target: SVGSVGElement, data: D3K8sData) => {
     if (this.clickedTarget === target && this.clickedOnce) {
-      this.runOnDBClick(target, data)
+      this.runOnDBClick(data)
     } else if (
       (this.clickedTarget === null && !this.clickedOnce) ||
       (this.clickedTarget !== target && this.clickedOnce)
@@ -453,7 +457,7 @@ class KubernetesHexagon extends PureComponent<Props, State> {
     }
   }
 
-  private onMouseDBClick = (target: SVGSVGElement, data: any) => {
+  private onMouseDBClick = (data: any) => {
     this.props.handleDBClick(data)
     this.props.handleOnClickVisualizePod(data)
   }

frontend/src/hosts/containers/InventoryTopology.tsx

@@ -388,7 +388,10 @@ class InventoryTopology extends PureComponent<Props, State> {
       const {
         links: {addons},
       } = this.props
-      const findItem = _.find(addons, addon => addon.name === template.provider)
+      const findItem = _.find(
+        addons,
+        addon => addon.name === template.provider && addon.url === 'on'
+      )
       const isFind = !_.isEmpty(findItem)
 
       if (isFind) {

frontend/src/hosts/containers/KubernetesPage.tsx

@@ -2786,6 +2786,7 @@ class KubernetesPage extends PureComponent<Props, State> {
       selectMinion,
       proportions,
       selectedAutoRefresh,
+      remoteDataState: RemoteDataState.Loading,
     })
   }
 
@@ -2964,7 +2965,6 @@ class KubernetesPage extends PureComponent<Props, State> {
           proportions={proportions}
           activeTab={activeEditorTab}
           handleOnSetActiveEditorTab={this.onSetActiveEditorTab}
-          handleOnClickPodName={this.onClickPodName}
           handleOnClickVisualizePod={this.onClickVisualizePod}
           handleResize={this.handleResize}
           focuseNode={focuseNode}
@@ -3193,10 +3193,6 @@ class KubernetesPage extends PureComponent<Props, State> {
     })
   }
 
-  private onClickPodName = (): void => {
-    console.log('onClick Pod Name')
-  }
-
   private onClickVisualizePod = async (data: any) => {
     const {selectMinion} = this.state
     const focuseNodeName = _.get(data, 'data.name')
@@ -3265,12 +3261,19 @@ class KubernetesPage extends PureComponent<Props, State> {
   }
 
   private handlePinNode = (data: any) => {
-    const pinNode = this.parentNavigation(data)
-    const target = d3.select(`[data-name=${pinNode[0]}]`)
-    const isNull = _.isNull(_.flatMapDeep(target._groups)[0])
-    const isPin = isNull || target.classed('kubernetes-pin')
-
-    this.setState({pinNode: isPin ? [] : pinNode})
+    if (
+      data.depth === 3 ||
+      (data.depth === 2 &&
+        (data.data.type === 'CR' || data.data.type === 'CRB'))
+    ) {
+      const pinNode = this.parentNavigation(data)
+      const target = d3.select(`[data-name=${pinNode[0]}]`)
+      const isNull = _.isNull(_.flatMapDeep(target._groups)[0])
+      const isPin = isNull || target.classed('kubernetes-pin')
+      this.setState({pinNode: isPin ? [] : pinNode})
+    } else {
+      this.setState({pinNode: []})
+    }
   }
 
   private debouncedResizeTrigger = _.debounce(() => {

frontend/src/shared/apis/saltStack.ts

@@ -81,8 +81,7 @@ const apiRequest = async (
       'Content-type': 'application/json',
     }
 
-    const param = JSON.stringify(Object.assign(dParams, pParams))
-
+    const param = Object.assign(dParams, pParams)
     const ajaxResult = await AJAX({
       method: 'POST',
       url: url,
@@ -118,7 +117,7 @@ const apiRequestMulti = async (
       'Content-type': 'application/json',
     }
 
-    const param = JSON.stringify(pParams)
+    const param = pParams
 
     const ajaxResult = await AJAX({
       method: 'POST',