Merge pull request #395 from snetsystems/dev-1.4.0-jinhyeong

OpenStack Dashboard AutoRefresh 주기 변경 & Collector Control 탭에서 지원되지 않는 OS 보여주는 UI 추가
snetsystems · Mar 21, 2023 · 520d7bd · 520d7bd
2 parents 2d195ad + c1a59d6
commit 520d7bd
Show file tree

Hide file tree

Showing 23 changed files with 653 additions and 188 deletions.
diff --git a/backend/server/csp.go b/backend/server/csp.go
@@ -424,17 +424,20 @@ func (s *Service) generateTelegrafConfigForOSP(ctx context.Context, csp *cloudhu
 		return http.StatusInternalServerError, nil, fmt.Errorf("Output plugin(something like influxdb) urls for telegraf are empty or invalid")
 	}
 
+	var influxdbs []influxdb
+	for _, url := range outputURLs {
+		influxdbs = append(influxdbs, influxdb{
+			Urls:     []string{url},
+			Database: csp.NameSpace,
+			Tagpass: tagpass{
+				Tenant: []string{csp.NameSpace},
+			},
+		})
+	}
+
 	telegrafConfig := &telegrafConfig{
 		Outputs: outputs{
-			Influxdb: []influxdb{
-				{
-					Urls:     outputURLs,
-					Database: csp.NameSpace,
-					Tagpass: tagpass{
-						Tenant: []string{csp.NameSpace},
-					},
-				},
-			},
+			Influxdb: influxdbs,
 		},
 		Inputs: inputs{
 			Openstack: []openstack{

diff --git a/frontend/src/admin/components/cloudhub/ProviderOpenStackConfigs.tsx b/frontend/src/admin/components/cloudhub/ProviderOpenStackConfigs.tsx
@@ -150,7 +150,7 @@ export class ProviderOpenStackConfigs extends PureComponent<Props, State> {
               type="button"
             >
               <span className="icon checkmark"></span>
-              {id ? HandleType.Delete : HandleType.Create}
+              {_.isEmpty(id) ? HandleType.Create : HandleType.Delete}
             </button>
 
             <div style={{marginLeft: '1em'}} className="all-users-admin-toggle">
@@ -182,8 +182,7 @@ export class ProviderOpenStackConfigs extends PureComponent<Props, State> {
   private handleSubmit = async e => {
     e.preventDefault()
 
-    const {id} = this.props.cspInput
-
+    const {id, hasProjectOption} = this.props.cspInput
     const properties = {
       id: id || '',
       projectName: this.projectName.value,
@@ -196,5 +195,9 @@ export class ProviderOpenStackConfigs extends PureComponent<Props, State> {
     }
     const handleType = id ? HandleType.Delete : HandleType.Create
     await this.props.onHandleSubmit(properties, handleType)
+    this.setState(prevState => ({
+      ...prevState,
+      isActiveToggle: hasProjectOption,
+    }))
   }
 }
diff --git a/frontend/src/admin/containers/cloudhub/ProviderConfPage.tsx b/frontend/src/admin/containers/cloudhub/ProviderConfPage.tsx
@@ -84,7 +84,7 @@ export class ProviderConfPage extends PureComponent<Props, State> {
         password: storeData['admin-pw'],
         projectDomain: storeData['pj-domain-id'],
         userDomain: storeData['user-domain-id'],
-        hasProjectOption: true,
+        hasProjectOption: false,
       },
     }
     return convertProperties[provider]
@@ -337,9 +337,8 @@ export class ProviderConfPage extends PureComponent<Props, State> {
           return {
             ...preState,
             cspInput: {
-              ...properties,
+              ...this.defaultProperties(ProviderTypes.OpenStack),
               id: cspRes.id,
-              hasProjectOption: true,
             },
           }
         })
@@ -415,7 +414,6 @@ export class ProviderConfPage extends PureComponent<Props, State> {
       [ProviderTypes.OpenStack]: {
         ...defaultProperties,
         id: cspId,
-        hasProjectOption: true,
       } as OpenStackCspInput,
     }
 

diff --git a/frontend/src/agent_admin/components/Agent.scss b/frontend/src/agent_admin/components/Agent.scss
@@ -107,6 +107,11 @@
     cursor: pointer;
   }
 
+  .tooltip--agent-control {
+    line-height: 30px;
+    padding-right: 0.1rem;
+  }
+
   .panel-body--agent-control {
     display: flex;
     flex-direction: row;

diff --git a/frontend/src/agent_admin/components/AgentControlSupportOSVersionToolTip.tsx b/frontend/src/agent_admin/components/AgentControlSupportOSVersionToolTip.tsx
@@ -0,0 +1,65 @@
+// Libraries
+import _ from 'lodash'
+import React, {PureComponent} from 'react'
+import ReactTooltip from 'react-tooltip'
+
+// Constants
+import {
+  SUPPORTED_OS_VERSION_ORDER,
+  SUPPORTED_OS_VERSION,
+} from 'src/agent_admin/constants'
+
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface Props {}
+
+@ErrorHandling
+class AgentControlSupportOSVersionToolTip extends PureComponent<Props> {
+  constructor(props: Props) {
+    super(props)
+  }
+
+  public generateSupportedOSVersionText = osName => {
+    const supportedOSVersions: string[] = SUPPORTED_OS_VERSION[osName]
+    let supportVersionText = ''
+
+    _.map(supportedOSVersions, osVersion => {
+      supportVersionText += `<code>${osVersion}</code><br/>`
+    })
+
+    return supportVersionText
+  }
+
+  render() {
+    const centosSupportVersionText = this.generateSupportedOSVersionText(
+      SUPPORTED_OS_VERSION_ORDER[0]
+    )
+    // const ubuntuSupportVersionText = this.generateSupportedOSVersionText(
+    //   SUPPORTED_OS_VERSION_ORDER[1]
+    // )
+    const redhatSupportVersionText = this.generateSupportedOSVersionText(
+      SUPPORTED_OS_VERSION_ORDER[1]
+    )
+    const agentControlSupportedOSVersionText = `<h1>CentOS:</h1><p>${centosSupportVersionText}</p> <h1>RedHat:</h1><p>${redhatSupportVersionText}</p>`
+
+    return (
+      <div
+        className="graph-tips"
+        data-for="graph-tips-tooltip"
+        data-tip={agentControlSupportedOSVersionText}
+      >
+        <span>?</span>
+        <ReactTooltip
+          id="graph-tips-tooltip"
+          effect="solid"
+          html={true}
+          place="bottom"
+          class="influx-tooltip"
+        />
+      </div>
+    )
+  }
+}
+
+export default AgentControlSupportOSVersionToolTip
diff --git a/frontend/src/agent_admin/components/AgentControlTable.tsx b/frontend/src/agent_admin/components/AgentControlTable.tsx
@@ -12,6 +12,7 @@ import AgentControlModal from 'src/agent_admin/components/AgentControlModal'
 import Dropdown from 'src/shared/components/Dropdown'
 import LoadingSpinner from 'src/flux/components/LoadingSpinner'
 import AgentMinionsToolTip from 'src/agent_admin/components/AgentMinionsToolTip'
+import AgentControlSupportOSVersionToolTip from 'src/agent_admin/components/AgentControlSupportOSVersionToolTip'
 
 // Contants
 import {
@@ -218,10 +219,14 @@ class AgentControlTable extends PureComponent<Props, State> {
             This feature is{' '}
             <span className="caution-word">not supported yet</span> for Windows.
           </span>
-          <SearchBar
-            placeholder="Filter by Host..."
-            onSearch={this.updateSearchTerm}
-          />
+          <span style={{display: 'flex'}}>
+            <span className="tooltip--agent-control">OS Support</span>
+            <AgentControlSupportOSVersionToolTip />
+            <SearchBar
+              placeholder="Filter by Host..."
+              onSearch={this.updateSearchTerm}
+            />
+          </span>
         </div>
         <div className="panel-body">{this.AgentTableContents}</div>
         <div className="panel-body--agent-control">

diff --git a/frontend/src/agent_admin/components/CollectorConfig.tsx b/frontend/src/agent_admin/components/CollectorConfig.tsx
@@ -23,8 +23,7 @@ import AgentCodeEditor from 'src/agent_admin/components/AgentCodeEditor'
 interface Props {
   isCollectorInstalled: boolean
   focusedCollectorConfigTab: CollectorConfigTabName | ''
-  configScript: string
-  inputConfigScript: string
+  tomlConfigScript: string
   selectedService: string[]
   collectorConfigTableTabs: CollectorConfigTabName[]
   collectorConfigTableData: CollectorConfigTableData
@@ -112,7 +111,7 @@ class CollectorConfig extends PureComponent<Props, State> {
 
   private get CodeEditor() {
     const {
-      inputConfigScript,
+      tomlConfigScript,
       handleBeforeChangeScript,
       handleChangeScript,
     } = this.props
@@ -129,7 +128,7 @@ class CollectorConfig extends PureComponent<Props, State> {
           }}
         >
           <AgentCodeEditor
-            configScript={inputConfigScript}
+            configScript={tomlConfigScript}
             onBeforeChangeScript={handleBeforeChangeScript}
             onChangeScript={handleChangeScript}
           />

diff --git a/frontend/src/agent_admin/constants/agentControlTableSupportedOsVersion.ts b/frontend/src/agent_admin/constants/agentControlTableSupportedOsVersion.ts
@@ -0,0 +1,11 @@
+export const SUPPORTED_OS_VERSION = {
+  SUPPORTED_CENTOS_VERSION: ['CentOS 7.X'],
+  // SUPPORTED_UBUNTU_VERSION: ['Ubuntu 16.04', 'Ubuntu 18.04'],
+  SUPPORTED_REDHAT_VERSION: ['RedHat 7.X'],
+}
+
+export const SUPPORTED_OS_VERSION_ORDER = [
+  'SUPPORTED_CENTOS_VERSION',
+  // 'SUPPORTED_UBUNTU_VERSION',
+  'SUPPORTED_REDHAT_VERSION',
+]
diff --git a/frontend/src/agent_admin/constants/index.ts b/frontend/src/agent_admin/constants/index.ts
@@ -24,6 +24,11 @@ import {
   COLLECTOR_CONFIG_TAB_ORDER,
 } from 'src/agent_admin/constants/CollectorConfigTable'
 
+import {
+  SUPPORTED_OS_VERSION,
+  SUPPORTED_OS_VERSION_ORDER,
+} from 'src/agent_admin/constants/agentControlTableSupportedOsVersion'
+
 export {
   NETWORK_ACCESS,
   GET_STATUS,
@@ -39,4 +44,6 @@ export {
   COLLECTOR_DROPDOWN_DATA,
   COLLECTOR_CONFIG_TAB_ABBREVIATION,
   COLLECTOR_CONFIG_TAB_ORDER,
+  SUPPORTED_OS_VERSION,
+  SUPPORTED_OS_VERSION_ORDER,
 }
diff --git a/frontend/src/agent_admin/containers/ServiceConfig.tsx b/frontend/src/agent_admin/containers/ServiceConfig.tsx
@@ -112,7 +112,7 @@ interface State {
   collectorServerObject: MinionsObject
   isCollectorInstalled: boolean
   configScript: string
-  inputConfigScript: string
+  tomlConfigScript: string
   configEditStyle: 'basic' | 'toml'
   focusedMinion: string
   focusedTenant: string
@@ -131,7 +131,7 @@ export class ServiceConfig extends PureComponent<Props, State> {
     this.state = {
       collectorServerObject: {},
       focusedCollectorConfigTab: '',
-      inputConfigScript: '',
+      tomlConfigScript: '',
       configScript: '',
       configEditStyle: 'basic',
       isCollectorInstalled: false,
@@ -236,7 +236,7 @@ export class ServiceConfig extends PureComponent<Props, State> {
       selectedService: [],
       projectFileList: {files: [], isLoading: true},
       configScript: '',
-      inputConfigScript: '',
+      tomlConfigScript: '',
     })
 
     try {
@@ -354,7 +354,7 @@ export class ServiceConfig extends PureComponent<Props, State> {
     script: string
   ) => {
     this.setState({
-      inputConfigScript: script,
+      tomlConfigScript: script,
     })
   }
 
@@ -403,7 +403,7 @@ export class ServiceConfig extends PureComponent<Props, State> {
     } = this.state
 
     if (configEditStyle === 'toml') {
-      return this.updateCollectorConfigTableDataByTOM(configScript)
+      return this.updateCollectorConfigTableDataByTOM()
     }
 
     const configObj = TOML.parse(configScript)
@@ -418,23 +418,17 @@ export class ServiceConfig extends PureComponent<Props, State> {
     inputPlugins.interval = collectorConfigTableData.interval
     inputPlugins.enabled_services = selectedService
 
-    const inputConfigObj = _.cloneDeep(configObj)
-
-    delete inputConfigObj.outputs
     this.setState({
-      inputConfigScript: TOML.stringify(inputConfigObj),
+      tomlConfigScript: TOML.stringify(configObj),
     })
 
     return TOML.stringify(configObj)
   }
 
-  public updateCollectorConfigTableDataByTOM(configScript) {
-    const {focusedCollectorConfigTab, inputConfigScript} = this.state
-    const configObj = TOML.parse(configScript)
-    const inputConfigObj = TOML.parse(inputConfigScript)
-    const inputPlugins = inputConfigObj['inputs'][focusedCollectorConfigTab][0]
-
-    configObj.inputs = inputConfigObj.inputs
+  public updateCollectorConfigTableDataByTOM() {
+    const {focusedCollectorConfigTab, tomlConfigScript} = this.state
+    const tomlConfigObj = TOML.parse(tomlConfigScript)
+    const inputPlugins = tomlConfigObj['inputs'][focusedCollectorConfigTab][0]
 
     this.setState({
       collectorConfigTableData: {
@@ -448,7 +442,7 @@ export class ServiceConfig extends PureComponent<Props, State> {
       selectedService: inputPlugins.enabled_services,
     })
 
-    return TOML.stringify(configObj)
+    return TOML.stringify(tomlConfigObj)
   }
 
   public debugTelegrafCloudPlugin(configScript) {
@@ -626,12 +620,9 @@ export class ServiceConfig extends PureComponent<Props, State> {
         )
         const configObj = TOML.parse(hostLocalFileReadData)
         const inputPlugins = this.getInputPlugins(configObj)
-        const inputConfigObj = _.cloneDeep(configObj)
-
-        delete inputConfigObj.outputs
 
         this.setState({
-          inputConfigScript: TOML.stringify(inputConfigObj),
+          tomlConfigScript: TOML.stringify(configObj),
           configScript: TOML.stringify(configObj),
           serviceConfigStatus: RemoteDataState.Done,
           focusedTenant: selectedTenant,
@@ -671,7 +662,7 @@ export class ServiceConfig extends PureComponent<Props, State> {
       },
       selectedService: [],
       configScript: '',
-      inputConfigScript: '',
+      tomlConfigScript: '',
     })
 
     notify(notifyConfigFileReadFailed(tomlParsingErrorMessage))
@@ -747,7 +738,7 @@ export class ServiceConfig extends PureComponent<Props, State> {
       focusedCollectorConfigTab: selectedCollectorConfigTab,
       serviceConfigStatus: RemoteDataState.Loading,
       configScript: '',
-      inputConfigScript: '',
+      tomlConfigScript: '',
     })
 
     try {
@@ -796,7 +787,7 @@ export class ServiceConfig extends PureComponent<Props, State> {
       projectFileList: {files: [], isLoading: true},
       serviceConfigStatus: RemoteDataState.Done,
       configScript: '',
-      inputConfigScript: '',
+      tomlConfigScript: '',
     })
 
     notify(notifyGetProjectFileFailed(error))
@@ -815,8 +806,7 @@ export class ServiceConfig extends PureComponent<Props, State> {
       collectorConfigTableData,
       focusedCollectorConfigTab,
       selectedService,
-      configScript,
-      inputConfigScript,
+      tomlConfigScript,
       configEditStyle,
     } = this.state
 
@@ -854,8 +844,7 @@ export class ServiceConfig extends PureComponent<Props, State> {
             </div>
             <div className="service-config-collector__container">
               <CollectorConfig
-                inputConfigScript={inputConfigScript}
-                configScript={configScript}
+                tomlConfigScript={tomlConfigScript}
                 configEditStyle={configEditStyle}
                 collectorConfigTableTabs={collectorConfigTableTabs}
                 serviceConfigStatus={serviceConfigStatus}