Advertisement
Guest User

Untitled

a guest
May 11th, 2018
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 68.71 KB | None | 0 0
  1. /* @flow */
  2.  
  3. import React, { PureComponent } from 'react';
  4. import { connect } from 'react-redux';
  5. import type { Connector } from 'react-redux';
  6. import * as action from '../../../actions/TabBar';
  7. import { Row, Col, Tab } from '../../../components/rubix';
  8. import type {
  9. ReduxState,
  10. Dispatch,
  11. TabBar as TabBarType
  12. } from '../../../types';
  13. import Datatable from '../../../components/Datatable';
  14. import Widget from '../../../components/Widget';
  15. import InputForm from '../../../components/InputForm';
  16. import config from '../../../config';
  17.  
  18. type Props = {
  19. match: Object,
  20. dispatchTabBarSetTabs: (tabs: TabBarType) => void,
  21. dispatchTabBarSelectTab: (selectedTab: Object) => void,
  22. tabBar: TabBarType
  23. };
  24.  
  25. class App extends PureComponent<Props> {
  26. componentDidMount() {
  27. this.setTabBarTabs();
  28. // set default tab
  29. const { dispatchTabBarSelectTab } = this.props;
  30. dispatchTabBarSelectTab({ key: 1 });
  31. }
  32. setTabBarTabs() {
  33. const { dispatchTabBarSetTabs } = this.props;
  34. dispatchTabBarSetTabs([
  35. {
  36. id: 1,
  37. label: 'Summary'
  38. },
  39. {
  40. id: 2,
  41. label: 'Custom Tables'
  42. },
  43. {
  44. id: 3,
  45. label: 'Custom Buttons'
  46. },
  47. {
  48. id: 4,
  49. label: 'Custom Fields'
  50. },
  51. {
  52. id: 5,
  53. label: 'Instances'
  54. },
  55. {
  56. id: 99,
  57. label: 'Activity Log'
  58. }
  59. ]);
  60. }
  61.  
  62. handleSelect(key) {
  63. // this doesn't do anything, we just need it to suppress warnings
  64. // eslint-disable-next-line react/no-unused-state
  65. this.setState({ key });
  66. }
  67. props: Props;
  68. render() {
  69. const { match: { params } } = this.props;
  70. return (
  71. <div>
  72. <Tab.Container
  73. id="tabs-with-dropdown"
  74. onSelect={this.handleSelect}
  75. activeKey={this.props.tabBar.selectedTab.key}
  76. >
  77. <Row className="clearfix">
  78. <Col sm={12}>
  79. <Tab.Content animation={false}>
  80. <Tab.Pane eventKey={1}>
  81. <div>
  82. <Row>
  83. <Col sm={3} collapseRight>
  84. <Widget
  85. label="App Installs"
  86. APIRoute="apps/widgets"
  87. APIQuery={params.id}
  88. data="num_installs"
  89. loadDataFromAPI
  90. typeOf="app"
  91. id={params.id}
  92. type="text"
  93. color="#e74c3c"
  94. icon="icon-fontello-group-circled"
  95. />
  96. </Col>
  97. <Col sm={3} collapseRight>
  98. <Widget
  99. label="Placeholder 1"
  100. data="num_installs"
  101. loadDataFromWidget={`app:${params.id}`}
  102. type="text"
  103. color="#f1c40f"
  104. />
  105. </Col>
  106. <Col sm={3} collapseRight>
  107. <Widget
  108. label="Placeholder 2"
  109. data="num_installs"
  110. loadDataFromWidget={`app:${params.id}`}
  111. type="text"
  112. color="#4cd137"
  113. />
  114. </Col>
  115. <Col sm={3}>
  116. <Widget
  117. label="Placeholder 3"
  118. data="num_installs"
  119. loadDataFromWidget={`app:${params.id}`}
  120. type="text"
  121. color="#14bfff"
  122. />
  123. </Col>
  124. </Row>
  125. </div>
  126. <InputForm
  127. label="App Summary"
  128. APIRoute="apps"
  129. APIQuery={params.id}
  130. loadDataFromAPI
  131. typeOf="manageapp"
  132. id={params.id}
  133. fields={{
  134. display_name: {
  135. label: 'Name',
  136. type: 'dynamicText',
  137. width: 25,
  138. validate: ['required']
  139. },
  140. publisher: {
  141. label: 'Publisher',
  142. type: 'dynamicText',
  143. validate: ['required'],
  144. width: 25
  145. },
  146. version: {
  147. label: 'Version',
  148. type: 'dynamicText',
  149. width: 10,
  150. validate: ['required']
  151. },
  152. app_slots: {
  153. label: 'App Slots',
  154. type: 'dynamicText',
  155. width: 10,
  156. validate: ['required']
  157. },
  158. subdomain: {
  159. label: 'Subdomain',
  160. type: 'dynamicText',
  161. width: 15,
  162. validate: ['required']
  163. },
  164. brand_id: {
  165. type: 'selector',
  166. width: 15,
  167. label: 'Brand',
  168. validate: ['required'],
  169. params: {
  170. APIRoute: 'brands',
  171. orderby: 'display_name',
  172. searchItems: ['display_name'],
  173. submitValue: 'id'
  174. }
  175. },
  176. hide_save: {
  177. label: 'Hide Save',
  178. type: 'switch',
  179. width: 10
  180. },
  181. RequiresDomain: {
  182. label: 'Req Domain',
  183. type: 'switch',
  184. width: 15
  185. },
  186. show_app: {
  187. label: 'Show App',
  188. type: 'switch',
  189. width: 10
  190. },
  191. admin_only: {
  192. label: 'Admin Only',
  193. type: 'switch',
  194. width: 10
  195. },
  196. enabled: {
  197. label: 'Enabled',
  198. type: 'switch',
  199. width: 10
  200. },
  201. featured: {
  202. label: 'Featured',
  203. type: 'switch',
  204. width: 10
  205. },
  206. allow_multiple: {
  207. label: 'Allow Multi',
  208. type: 'switch',
  209. width: 10
  210. },
  211. ssl: {
  212. label: 'SSL',
  213. type: 'switch',
  214. width: 10
  215. },
  216. IsWebApp: {
  217. label: 'Web App',
  218. type: 'switch',
  219. width: 15
  220. },
  221. reinstall_on_cylo_change: {
  222. label: `Reinstall on ${config.entity.single} Change`,
  223. type: 'switch',
  224. width: 20
  225. },
  226. server_default: {
  227. label: 'Server Default',
  228. type: 'switch',
  229. width: 16
  230. },
  231. cylo_default: {
  232. label: 'Cylo Default',
  233. type: 'switch',
  234. width: 16
  235. },
  236. notify_on_install: {
  237. label: 'Notify Install',
  238. type: 'switch',
  239. width: 16
  240. },
  241. wildcard_ssl: {
  242. label: 'Wildcard SSL',
  243. type: 'switch',
  244. width: 16
  245. },
  246. expect_callback: {
  247. label: 'API Callback',
  248. type: 'switch',
  249. width: 16
  250. },
  251. usernsmode: {
  252. type: 'selector',
  253. label: 'User NS Mode',
  254. params: {
  255. menuItems: {
  256. host: 'host'
  257. }
  258. },
  259. width: 25
  260. },
  261. rating: {
  262. label: 'Rating',
  263. type: 'number',
  264. width: 10
  265. },
  266. upvotes: {
  267. label: 'Upvotes',
  268. type: 'number',
  269. width: 10
  270. },
  271. downvotes: {
  272. label: 'Downvotes',
  273. type: 'number',
  274. width: 10
  275. },
  276. NetworkMode: {
  277. type: 'selector',
  278. label: 'Network Mode',
  279. params: {
  280. menuItems: {
  281. bridge: 'bridge',
  282. default: 'default',
  283. host: 'host',
  284. none: 'none'
  285. }
  286. },
  287. width: 20
  288. },
  289. static_4th_ip_octet: {
  290. label: 'Static 4th IP Octet',
  291. type: 'number',
  292. width: 25
  293. },
  294. short_description: {
  295. label: 'Short Description',
  296. type: 'dynamicText',
  297. width: 70,
  298. validate: ['required']
  299. },
  300. devsite: {
  301. label: 'Dev Site',
  302. type: 'dynamicText',
  303. width: 30
  304. },
  305. description: {
  306. label: 'Description',
  307. type: 'textArea',
  308. width: 100,
  309. params: {
  310. multiline: true
  311. }
  312. },
  313. type: {
  314. type: 'selector',
  315. label: 'Type',
  316. params: {
  317. menuItems: {
  318. docker: 'docker'
  319. }
  320. },
  321. width: 10
  322. },
  323. registry: {
  324. type: 'selector',
  325. label: 'Registry',
  326. params: {
  327. menuItems: {
  328. 'repo.cylo.io': 'repo.cylo.io',
  329. 'Docker Hub': 'dockerhub'
  330. }
  331. },
  332. width: 20
  333. },
  334. Image: {
  335. label: 'Image',
  336. type: 'dynamicText',
  337. width: 20
  338. },
  339. tag: {
  340. label: 'Tag',
  341. type: 'dynamicText',
  342. width: 10,
  343. validate: ['required']
  344. },
  345. source_repo: {
  346. label: 'Source Repo URL',
  347. type: 'dynamicText',
  348. width: 20
  349. },
  350. spc0: {
  351. label: 'spc',
  352. type: 'spacer',
  353. width: 20
  354. },
  355. Memory: {
  356. label: 'Memory',
  357. type: 'number',
  358. width: 10
  359. },
  360. MemorySwap: {
  361. label: 'MemorySwap',
  362. type: 'number',
  363. width: 10
  364. },
  365. MemoryReservation: {
  366. label: 'MemoryReservation',
  367. type: 'number',
  368. width: 10
  369. },
  370. CPUs: {
  371. label: 'CPUs',
  372. type: 'number',
  373. width: 10
  374. },
  375. PidsLimit: {
  376. label: 'PID Limit',
  377. type: 'number',
  378. width: 10
  379. },
  380. TCPDynamicPorts: {
  381. label: 'Dynamic TCP Ports',
  382. type: 'number',
  383. width: 10
  384. },
  385. UDPDynamicPorts: {
  386. label: 'Dynamic UDP Ports',
  387. type: 'number',
  388. width: 10
  389. },
  390. TCPPortRange: {
  391. label: 'TCP Port Range',
  392. type: 'dynamicText',
  393. width: 15
  394. },
  395. UDPPortRange: {
  396. label: 'UDP Port Range',
  397. type: 'dynamicText',
  398. width: 15
  399. },
  400. cmd: {
  401. label: 'Command',
  402. type: 'dynamicText',
  403. width: 30
  404. },
  405. volumes: {
  406. label: 'Volumes',
  407. type: 'dynamicText',
  408. width: 30
  409. },
  410. // links: {
  411. // label: 'Links',
  412. // type: 'dynamicText',
  413. // width: 30
  414. // },
  415. Privileged: {
  416. label: 'Privileged',
  417. type: 'switch',
  418. width: 25
  419. },
  420. Init: {
  421. label: 'Init',
  422. type: 'switch',
  423. width: 15
  424. },
  425. LogConfig: {
  426. type: 'selector',
  427. label: 'Log Config',
  428. params: {
  429. menuItems: {
  430. jsonFile: 'json-file',
  431. syslog: 'syslog',
  432. journald: 'journald',
  433. gelf: 'gelf',
  434. fluentd: 'fluentd',
  435. awslogs: 'awslogs',
  436. splunk: 'splunk',
  437. etwlogs: 'etwlogs',
  438. null: 'none'
  439. }
  440. },
  441. width: 25
  442. },
  443. SecurityOpt: {
  444. label: 'Security Opt',
  445. type: 'dynamicText',
  446. width: 25
  447. },
  448. // custom_description: {
  449. // label: 'Custom Description',
  450. // type: 'dynamicText',
  451. // width: 100
  452. // },
  453. icon_image: {
  454. width: 100,
  455. type: 'cropper',
  456. label: 'Icon',
  457. params: {
  458. width: 250,
  459. height: 250,
  460. aspectRatio: 1,
  461. maxFileSize: 300000,
  462. path: 'assets/images/apps/icons/'
  463. }
  464. }
  465. }}
  466. />
  467.  
  468. <div>
  469. <Row>
  470. <Col sm={4} collapseRight>
  471. <Datatable
  472. label="Categories"
  473. typeOf="category"
  474. belongsTo="app"
  475. id={params.id}
  476. APIRoute={`appcategories/app/${params.id}`}
  477. columns={[
  478. {
  479. name: 'category',
  480. title: 'Name',
  481. inputField: {
  482. type: 'search',
  483. validate: ['required'],
  484. params: {
  485. wildcardSearch: true,
  486. minLength: 0,
  487. APIRoute: 'appcategories',
  488. orderby: 'display_name',
  489. searchItems: ['display_name'],
  490. submitValue: 'id'
  491. }
  492. }
  493. }
  494. ]}
  495. sorting={[{ columnName: 'id', direction: 'asc' }]}
  496. columnOrder={['category']}
  497. enableAdding
  498. enableDeleting
  499. enableSelection
  500. />
  501. </Col>
  502. <Col sm={8}>
  503. <Datatable
  504. label="Mounts"
  505. typeOf="mounts"
  506. belongsTo="app"
  507. id={params.id}
  508. APIRoute="appmounts"
  509. columns={[
  510. {
  511. name: 'app_id',
  512. type: 'hidden',
  513. defaultValue: params.id
  514. },
  515. {
  516. name: 'Target',
  517. title: 'Target',
  518. inputField: {
  519. type: 'dynamicText',
  520. validate: ['required']
  521. },
  522. filter: {
  523. type: 'dynamicText'
  524. }
  525. },
  526. {
  527. name: 'Source',
  528. title: 'Source',
  529. inputField: {
  530. type: 'dynamicText',
  531. validate: ['required']
  532. },
  533. filter: {
  534. type: 'dynamicText'
  535. }
  536. },
  537. {
  538. name: 'Type',
  539. title: 'Type',
  540. inputField: {
  541. type: 'selector',
  542. params: {
  543. menuItems: {
  544. bind: 'bind',
  545. volume: 'volume',
  546. tmpfs: 'tmpfs'
  547. }
  548. }
  549. },
  550. filter: {
  551. type: 'selector',
  552. params: {
  553. menuItems: {
  554. bind: 'bind',
  555. volume: 'volume',
  556. tmpfs: 'tmpfs'
  557. }
  558. }
  559. }
  560. },
  561. {
  562. name: 'ReadOnly',
  563. title: 'Read Only',
  564. type: 'IsEnabledCell',
  565. inputField: {
  566. validate: ['required'],
  567. type: 'selector',
  568. defaultValue: 0,
  569. params: {
  570. menuItems: {
  571. Enabled: 1,
  572. Disabled: 0
  573. }
  574. }
  575. },
  576. filter: {
  577. validate: ['required'],
  578. type: 'selector',
  579. params: {
  580. menuItems: {
  581. Enabled: 1,
  582. Disabled: 0
  583. }
  584. }
  585. }
  586. },
  587. {
  588. name: 'Consistency',
  589. title: 'Consistency',
  590. inputField: {
  591. type: 'selector',
  592. params: {
  593. menuItems: {
  594. default: 'default',
  595. consistent: 'consistent',
  596. cached: 'cached',
  597. delegated: 'delegated'
  598. }
  599. }
  600. },
  601. filter: {
  602. type: 'selector',
  603. params: {
  604. menuItems: {
  605. default: 'default',
  606. consistent: 'consistent',
  607. cached: 'cached',
  608. delegated: 'delegated'
  609. }
  610. }
  611. }
  612. },
  613. {
  614. name: 'lock_to_bind_dir',
  615. title: 'Lock to bind dir',
  616. type: 'IsEnabledCell',
  617. inputField: {
  618. validate: ['required'],
  619. type: 'selector',
  620. defaultValue: 'home',
  621. params: {
  622. menuItems: {
  623. host: 'host',
  624. private: 'private',
  625. home: 'home',
  626. volume: 'volume'
  627. }
  628. }
  629. },
  630. filter: {
  631. type: 'selector',
  632. params: {
  633. menuItems: {
  634. host: 'host',
  635. private: 'private',
  636. home: 'home',
  637. volume: 'volume'
  638. }
  639. }
  640. }
  641. }
  642. ]}
  643. sorting={[{ columnName: 'id', direction: 'asc' }]}
  644. columnOrder={[
  645. 'Target',
  646. 'Source',
  647. 'Type',
  648. 'ReadOnly',
  649. 'Consistency',
  650. 'lock_to_bind_dir'
  651. ]}
  652. filters={{ app_id: params.id }}
  653. enableAdding
  654. enableDeleting
  655. enableSelection
  656. enableEditing
  657. />
  658. </Col>
  659. </Row>
  660. <Row>
  661. <Col sm={12}>
  662. <Datatable
  663. label="Binds"
  664. typeOf="binds"
  665. belongsTo="app"
  666. id={params.id}
  667. APIRoute="appbinds"
  668. columns={[
  669. {
  670. name: 'app_id',
  671. type: 'hidden',
  672. defaultValue: params.id
  673. },
  674. {
  675. name: 'Source',
  676. title: 'Source',
  677. inputField: {
  678. type: 'dynamicText'
  679. },
  680. filter: {
  681. type: 'dynamicText'
  682. }
  683. },
  684. {
  685. name: 'Destination',
  686. title: 'Destination',
  687. inputField: {
  688. type: 'dynamicText'
  689. },
  690. filter: {
  691. type: 'dynamicText'
  692. }
  693. },
  694. {
  695. name: 'Permissions',
  696. title: 'Permissions',
  697. inputField: {
  698. type: 'dynamicText'
  699. },
  700. filter: {
  701. type: 'dynamicText'
  702. }
  703. },
  704. {
  705. name: 'UID',
  706. title: 'UID',
  707. inputField: {
  708. type: 'dynamicText'
  709. },
  710. filter: {
  711. type: 'dynamicText'
  712. }
  713. },
  714. {
  715. name: 'lock_to_bind_dir',
  716. title: 'Lock to bind dir',
  717. inputField: {
  718. validate: ['required'],
  719. type: 'selector',
  720. defaultValue: 'home',
  721. params: {
  722. menuItems: {
  723. host: 'host',
  724. private: 'private',
  725. home: 'home',
  726. volume: 'volume'
  727. }
  728. }
  729. },
  730. filter: {
  731. validate: ['required'],
  732. type: 'selector',
  733. params: {
  734. menuItems: {
  735. host: 'host',
  736. private: 'private',
  737. home: 'home',
  738. volume: 'volume'
  739. }
  740. }
  741. }
  742. }
  743. ]}
  744. sorting={[{ columnName: 'id', direction: 'asc' }]}
  745. columnOrder={[
  746. 'Source',
  747. 'Desintation',
  748. 'Permissions',
  749. 'UID',
  750. 'lock_to_bind_dir'
  751. ]}
  752. filters={{ app_id: params.id }}
  753. enableAdding
  754. enableDeleting
  755. enableSelection
  756. enableEditing
  757. />
  758. </Col>
  759. </Row>
  760. <Row>
  761. <Col sm={12}>
  762. <Datatable
  763. label="Block IO"
  764. typeOf="blockio"
  765. belongsTo="app"
  766. id={params.id}
  767. APIRoute="appblockio"
  768. columns={[
  769. {
  770. name: 'type',
  771. type: 'hidden',
  772. defaultValue: 'app'
  773. },
  774. {
  775. name: 'relid',
  776. type: 'hidden',
  777. defaultValue: params.id
  778. },
  779. {
  780. name: 'Device',
  781. title: 'Device',
  782. inputField: {
  783. type: 'dynamicText'
  784. },
  785. filter: {
  786. type: 'dynamicText'
  787. }
  788. },
  789. {
  790. name: 'ReadBps',
  791. title: 'ReadBps',
  792. inputField: {
  793. type: 'dynamicText'
  794. },
  795. filter: {
  796. type: 'dynamicText'
  797. }
  798. },
  799. {
  800. name: 'WriteBps',
  801. title: 'WriteBps',
  802. inputField: {
  803. type: 'dynamicText'
  804. },
  805. filter: {
  806. type: 'dynamicText'
  807. }
  808. },
  809. {
  810. name: 'ReadIOps',
  811. title: 'ReadIOps',
  812. inputField: {
  813. type: 'dynamicText'
  814. },
  815. filter: {
  816. type: 'dynamicText'
  817. }
  818. },
  819. {
  820. name: 'WriteIOps',
  821. title: 'WriteIOps',
  822. inputField: {
  823. type: 'dynamicText'
  824. },
  825. filter: {
  826. type: 'dynamicText'
  827. }
  828. }
  829. ]}
  830. sorting={[{ columnName: 'id', direction: 'asc' }]}
  831. columnOrder={[
  832. 'Device',
  833. 'ReadBps',
  834. 'WriteBps',
  835. 'ReadIOps',
  836. 'WriteIOps'
  837. ]}
  838. filters={{ type: 'app', relid: params.id }}
  839. enableAdding
  840. enableDeleting
  841. enableSelection
  842. enableEditing
  843. />
  844. </Col>
  845. </Row>
  846. <Row>
  847. <Col sm={12}>
  848. <Datatable
  849. label="Environment Variables"
  850. typeOf="envvars"
  851. belongsTo="app"
  852. id={params.id}
  853. APIRoute="appenvvars"
  854. columns={[
  855. {
  856. name: 'app_id',
  857. type: 'hidden',
  858. defaultValue: params.id
  859. },
  860. {
  861. name: 'Key',
  862. title: 'Key',
  863. inputField: {
  864. type: 'dynamicText'
  865. },
  866. filter: {
  867. type: 'dynamicText'
  868. }
  869. },
  870. {
  871. name: 'Value',
  872. title: 'Value',
  873. inputField: {
  874. type: 'dynamicText'
  875. },
  876. filter: {
  877. type: 'dynamicText'
  878. }
  879. },
  880. {
  881. name: 'template_type',
  882. validate: ['required'],
  883. title: 'Template Type',
  884. inputField: {
  885. type: 'selector',
  886. params: {
  887. menuItems: {
  888. none: 'none',
  889. cylo: 'cylo',
  890. app: 'app',
  891. instance: 'instance',
  892. alldomains: 'alldomains'
  893. }
  894. }
  895. },
  896. filter: {
  897. type: 'selector',
  898. params: {
  899. menuItems: {
  900. none: 'none',
  901. cylo: 'cylo',
  902. app: 'app',
  903. instance: 'instance',
  904. alldomains: 'alldomains'
  905. }
  906. }
  907. }
  908. }
  909. ]}
  910. sorting={[{ columnName: 'id', direction: 'asc' }]}
  911. columnOrder={['Key', 'Value', 'template_type']}
  912. filters={{ app_id: params.id }}
  913. enableAdding
  914. enableDeleting
  915. enableSelection
  916. enableEditing
  917. />
  918. </Col>
  919. </Row>
  920. <Row>
  921. <Col sm={4} collapseRight>
  922. <Datatable
  923. label="Volumes From"
  924. typeOf="volsfrom"
  925. belongsTo="app"
  926. id={params.id}
  927. APIRoute="appvolumes_from"
  928. columns={[
  929. {
  930. name: 'app_id',
  931. type: 'hidden',
  932. defaultValue: params.id
  933. },
  934. {
  935. name: 'from_instance',
  936. title: 'From Instance',
  937. inputField: {
  938. type: 'dynamicText'
  939. },
  940. filter: {
  941. type: 'dynamicText'
  942. }
  943. },
  944. {
  945. name: 'Permissions',
  946. title: 'Permissions',
  947. inputField: {
  948. type: 'dynamicText'
  949. },
  950. filter: {
  951. type: 'dynamicText'
  952. }
  953. }
  954. ]}
  955. sorting={[{ columnName: 'id', direction: 'asc' }]}
  956. columnOrder={['from_instance', 'Permissions']}
  957. filters={{ app_id: params.id }}
  958. enableAdding
  959. enableDeleting
  960. enableSelection
  961. enableEditing
  962. />
  963. </Col>
  964. <Col sm={8}>
  965. <Datatable
  966. label="ULimits"
  967. typeOf="ulimits"
  968. belongsTo="app"
  969. id={params.id}
  970. APIRoute="appulimits"
  971. columns={[
  972. {
  973. name: 'type',
  974. type: 'hidden',
  975. defaultValue: 'app'
  976. },
  977. {
  978. name: 'relid',
  979. type: 'hidden',
  980. defaultValue: params.id
  981. },
  982. {
  983. name: 'Name',
  984. title: 'Name',
  985. inputField: {
  986. type: 'dynamicText'
  987. },
  988. filter: {
  989. type: 'dynamicText'
  990. }
  991. },
  992. {
  993. name: 'Soft',
  994. title: 'Soft',
  995. inputField: {
  996. type: 'dynamicText'
  997. },
  998. filter: {
  999. type: 'dynamicText'
  1000. }
  1001. },
  1002. {
  1003. name: 'Hard',
  1004. title: 'Hard',
  1005. inputField: {
  1006. type: 'dynamicText'
  1007. },
  1008. filter: {
  1009. type: 'dynamicText'
  1010. }
  1011. }
  1012. ]}
  1013. sorting={[{ columnName: 'id', direction: 'asc' }]}
  1014. columnOrder={['Name', 'Soft', 'Hard']}
  1015. filters={{ type: 'app', relid: params.id }}
  1016. enableAdding
  1017. enableDeleting
  1018. enableSelection
  1019. enableEditing
  1020. />
  1021. </Col>
  1022. </Row>
  1023. <Row>
  1024. <Col sm={4} collapseRight>
  1025. <Datatable
  1026. label="Chained Apps"
  1027. typeOf="appchains"
  1028. belongsTo="app"
  1029. id={params.id}
  1030. APIRoute="appchains"
  1031. columns={[
  1032. {
  1033. name: 'app_id',
  1034. type: 'hidden',
  1035. defaultValue: params.id
  1036. },
  1037. {
  1038. name: 'chained_to',
  1039. title: 'Chained To',
  1040. type: 'select',
  1041. defaultValueFrom: ['chained_to_name'],
  1042. inputField: {
  1043. defaultValueFrom: 'chained_to',
  1044. type: 'selector',
  1045. params: {
  1046. APIRoute: 'apps',
  1047. orderby: 'display_name',
  1048. searchItems: ['display_name'],
  1049. submitValue: 'id'
  1050. }
  1051. },
  1052. filter: {
  1053. type: 'selector',
  1054. params: {
  1055. APIRoute: 'apps',
  1056. orderby: 'display_name',
  1057. searchItems: ['display_name'],
  1058. submitValue: 'id'
  1059. }
  1060. }
  1061. }
  1062. ]}
  1063. sorting={[{ columnName: 'id', direction: 'asc' }]}
  1064. columnOrder={['chained_to']}
  1065. filters={{ app_id: params.id }}
  1066. enableAdding
  1067. enableDeleting
  1068. enableSelection
  1069. />
  1070. </Col>
  1071. <Col sm={8}>&nbsp;</Col>
  1072. </Row>
  1073. </div>
  1074. </Tab.Pane>
  1075. <Tab.Pane eventKey={2}>
  1076. <Datatable
  1077. label="App Custom Tables"
  1078. typeOf="table"
  1079. belongsTo="app"
  1080. id={params.id}
  1081. APIRoute="tables"
  1082. columns={[
  1083. {
  1084. name: 'type',
  1085. type: 'hidden',
  1086. defaultValue: 'app'
  1087. },
  1088. {
  1089. name: 'relid',
  1090. type: 'hidden',
  1091. defaultValue: params.id
  1092. },
  1093. {
  1094. name: 'tableName',
  1095. title: 'Table Name',
  1096. inputField: {
  1097. type: 'dynamicText',
  1098. validate: ['required']
  1099. },
  1100. filter: {
  1101. type: 'dynamicText',
  1102. wildcardSearch: true
  1103. }
  1104. },
  1105. {
  1106. name: 'maxRows',
  1107. title: 'Max Rows',
  1108. inputField: {
  1109. type: 'number'
  1110. },
  1111. filter: {
  1112. type: 'number'
  1113. }
  1114. },
  1115. {
  1116. name: 'dockerAdd',
  1117. title: 'Add Command',
  1118. inputField: {
  1119. type: 'dynamicText'
  1120. },
  1121. filter: {
  1122. type: 'dynamicText'
  1123. }
  1124. },
  1125. {
  1126. name: 'dockerUpdate',
  1127. title: 'Update Command',
  1128. inputField: {
  1129. type: 'dynamicText'
  1130. },
  1131. filter: {
  1132. type: 'dynamicText'
  1133. }
  1134. },
  1135. {
  1136. name: 'dockerDelete',
  1137. title: 'Delete Command',
  1138. inputField: {
  1139. type: 'dynamicText'
  1140. },
  1141. filter: {
  1142. type: 'dynamicText'
  1143. }
  1144. },
  1145. {
  1146. name: 'icon',
  1147. title: 'Icon',
  1148. inputField: {
  1149. type: 'dynamicText'
  1150. },
  1151. filter: {
  1152. type: 'dynamicText'
  1153. }
  1154. },
  1155. {
  1156. name: 'description',
  1157. title: 'Description',
  1158. inputField: {
  1159. type: 'dynamicText'
  1160. },
  1161. filter: {
  1162. type: 'dynamicText'
  1163. }
  1164. },
  1165. {
  1166. name: 'admin_only',
  1167. title: 'Admin Only',
  1168. type: 'IsEnabledCell',
  1169. inputField: {
  1170. type: 'selector',
  1171. params: {
  1172. menuItems: {
  1173. Yes: 1,
  1174. No: 0
  1175. }
  1176. }
  1177. },
  1178. filter: {
  1179. type: 'selector',
  1180. params: {
  1181. menuItems: {
  1182. Yes: 1,
  1183. No: 0
  1184. }
  1185. }
  1186. }
  1187. }
  1188. ]}
  1189. sorting={[{ columnName: 'id', direction: 'asc' }]}
  1190. columnOrder={[
  1191. 'tableName',
  1192. 'maxRows',
  1193. 'dockerAdd',
  1194. 'dockerUpdate',
  1195. 'dockerDelete',
  1196. 'icon',
  1197. 'description',
  1198. 'admin_only'
  1199. ]}
  1200. filters={{ type: 'app', relid: params.id }}
  1201. enableFilters
  1202. enableAdding
  1203. enableDeleting
  1204. enableSelection
  1205. enableEditing
  1206. />
  1207. </Tab.Pane>
  1208. <Tab.Pane eventKey={3}>
  1209. <Datatable
  1210. label="App Custom Buttons"
  1211. typeOf="button"
  1212. belongsTo="app"
  1213. id={params.id}
  1214. APIRoute="buttons"
  1215. columns={[
  1216. {
  1217. name: 'type',
  1218. type: 'hidden',
  1219. defaultValue: 'app'
  1220. },
  1221. {
  1222. name: 'relid',
  1223. type: 'hidden',
  1224. defaultValue: params.id
  1225. },
  1226. {
  1227. name: 'buttonName',
  1228. title: 'buttonName',
  1229. inputField: {
  1230. type: 'dynamicText',
  1231. validate: ['required']
  1232. },
  1233. filter: {
  1234. type: 'dynamicText',
  1235. wildcardSearch: true
  1236. }
  1237. },
  1238. {
  1239. name: 'buttonIcon',
  1240. title: 'buttonIcon',
  1241. inputField: {
  1242. type: 'dynamicText',
  1243. validate: ['required']
  1244. },
  1245. filter: {
  1246. type: 'dynamicText',
  1247. wildcardSearch: true
  1248. }
  1249. },
  1250. {
  1251. name: 'command',
  1252. title: 'Command',
  1253. inputField: {
  1254. type: 'dynamicText'
  1255. },
  1256. filter: {
  1257. type: 'dynamicText'
  1258. }
  1259. },
  1260. {
  1261. name: 'route_on_submit',
  1262. title: 'Route On Submit',
  1263. inputField: {
  1264. type: 'dynamicText'
  1265. },
  1266. filter: {
  1267. type: 'dynamicText'
  1268. }
  1269. },
  1270. {
  1271. name: 'dialog_text',
  1272. title: 'Dialog Text',
  1273. inputField: {
  1274. type: 'dynamicText'
  1275. },
  1276. filter: {
  1277. type: 'dynamicText'
  1278. }
  1279. },
  1280. {
  1281. name: 'admin_only',
  1282. title: 'Admin Only',
  1283. type: 'IsEnabledCell',
  1284. inputField: {
  1285. type: 'selector',
  1286. params: {
  1287. menuItems: {
  1288. Yes: 1,
  1289. No: 0
  1290. }
  1291. }
  1292. },
  1293. filter: {
  1294. type: 'selector',
  1295. params: {
  1296. menuItems: {
  1297. Yes: 1,
  1298. No: 0
  1299. }
  1300. }
  1301. }
  1302. }
  1303. ]}
  1304. sorting={[{ columnName: 'id', direction: 'asc' }]}
  1305. columnOrder={[
  1306. 'buttonName',
  1307. 'buttonIcon',
  1308. 'command',
  1309. 'route_on_submit',
  1310. 'dialog_text',
  1311. 'admin_only'
  1312. ]}
  1313. filters={{ type: 'app', relid: params.id }}
  1314. enableFilters
  1315. enableAdding
  1316. enableDeleting
  1317. enableSelection
  1318. enableEditing
  1319. />
  1320. </Tab.Pane>
  1321. <Tab.Pane eventKey={4}>
  1322. <Datatable
  1323. label="Custom Fields"
  1324. typeOf="field"
  1325. belongsTo="app"
  1326. id={params.id}
  1327. APIRoute="fields"
  1328. columns={[
  1329. {
  1330. name: 'type',
  1331. type: 'hidden',
  1332. defaultValue: 'app'
  1333. },
  1334. {
  1335. name: 'relid',
  1336. type: 'hidden',
  1337. defaultValue: params.id
  1338. },
  1339. {
  1340. name: 'display_name',
  1341. title: 'Name',
  1342. inputField: {
  1343. type: 'dynamicText',
  1344. validate: ['required']
  1345. },
  1346. filter: {
  1347. type: 'dynamicText',
  1348. wildcardSearch: true
  1349. }
  1350. },
  1351. {
  1352. name: 'fname',
  1353. title: 'Field Name',
  1354. inputField: {
  1355. type: 'dynamicText',
  1356. validate: ['required']
  1357. },
  1358. filter: {
  1359. type: 'dynamicText',
  1360. wildcardSearch: true
  1361. }
  1362. },
  1363. {
  1364. name: 'fieldtype',
  1365. title: 'Field Type',
  1366. inputField: {
  1367. type: 'selector',
  1368. validate: ['required'],
  1369. params: {
  1370. menuItems: {
  1371. dynamicText: 'dynamicText',
  1372. password: 'password',
  1373. textArea: 'textArea',
  1374. selector: 'selector',
  1375. switch: 'switch',
  1376. hidden: 'hidden',
  1377. clientURL: 'clientURL',
  1378. externalURL: 'externalURL',
  1379. staticText: 'staticText',
  1380. date: 'date',
  1381. email: 'email',
  1382. number: 'number',
  1383. IsEnabledCell: 'IsEnabledCell'
  1384. }
  1385. }
  1386. },
  1387. filter: {
  1388. type: 'selector',
  1389. params: {
  1390. menuItems: {
  1391. dynamicText: 'dynamicText',
  1392. password: 'password',
  1393. textArea: 'textArea',
  1394. selector: 'selector',
  1395. switch: 'switch',
  1396. hidden: 'hidden',
  1397. clientURL: 'clientURL',
  1398. externalURL: 'externalURL',
  1399. staticText: 'staticText',
  1400. date: 'date',
  1401. email: 'email',
  1402. number: 'number',
  1403. IsEnabledCell: 'IsEnabledCell'
  1404. }
  1405. }
  1406. }
  1407. },
  1408. {
  1409. name: 'description',
  1410. title: 'Description',
  1411. inputField: {
  1412. type: 'dynamicText',
  1413. validate: ['required']
  1414. },
  1415. filter: {
  1416. type: 'dynamicText',
  1417. wildcardSearch: true
  1418. }
  1419. },
  1420. {
  1421. name: 'default_value',
  1422. title: 'Default Value',
  1423. inputField: {
  1424. type: 'dynamicText'
  1425. },
  1426. filter: {
  1427. type: 'dynamicText',
  1428. wildcardSearch: true
  1429. }
  1430. },
  1431. {
  1432. name: 'options',
  1433. title: 'Options',
  1434. inputField: {
  1435. type: 'dynamicText'
  1436. },
  1437. filter: {
  1438. type: 'dynamicText',
  1439. wildcardSearch: true
  1440. }
  1441. },
  1442. {
  1443. name: 'required',
  1444. title: 'Req',
  1445. type: 'IsEnabledCell',
  1446. width: 50,
  1447. inputField: {
  1448. type: 'selector',
  1449. params: {
  1450. menuItems: {
  1451. Enabled: 1,
  1452. Disabled: 0
  1453. }
  1454. }
  1455. },
  1456. filter: {
  1457. type: 'selector',
  1458. params: {
  1459. menuItems: {
  1460. Enabled: 1,
  1461. Disabled: 0
  1462. }
  1463. }
  1464. }
  1465. },
  1466. {
  1467. name: 'minLength',
  1468. title: 'Min',
  1469. width: 50,
  1470. inputField: {
  1471. type: 'number'
  1472. },
  1473. filter: {
  1474. type: 'number',
  1475. wildcardSearch: true
  1476. }
  1477. },
  1478. {
  1479. name: 'maxLength',
  1480. title: 'Max',
  1481. width: 50,
  1482. inputField: {
  1483. type: 'number'
  1484. },
  1485. filter: {
  1486. type: 'number',
  1487. wildcardSearch: true
  1488. }
  1489. },
  1490. {
  1491. name: 'regex',
  1492. title: 'Regex',
  1493. inputField: {
  1494. type: 'dynamicText'
  1495. },
  1496. filter: {
  1497. type: 'dynamicText',
  1498. wildcardSearch: true
  1499. }
  1500. },
  1501. {
  1502. name: 'adminonly',
  1503. title: 'Admin',
  1504. type: 'IsEnabledCell',
  1505. width: 50,
  1506. inputField: {
  1507. type: 'selector',
  1508. params: {
  1509. menuItems: {
  1510. Enabled: 1,
  1511. Disabled: 0
  1512. }
  1513. }
  1514. },
  1515. filter: {
  1516. type: 'selector',
  1517. params: {
  1518. menuItems: {
  1519. Enabled: 1,
  1520. Disabled: 0
  1521. }
  1522. }
  1523. }
  1524. },
  1525. {
  1526. name: 'sort_order',
  1527. title: 'Sort',
  1528. width: 50,
  1529. inputField: {
  1530. type: 'number'
  1531. },
  1532. filter: {
  1533. type: 'number'
  1534. }
  1535. },
  1536. {
  1537. name: 'flex',
  1538. title: 'Flex',
  1539. width: 50,
  1540. inputField: {
  1541. validate: ['required'],
  1542. type: 'number'
  1543. },
  1544. filter: {
  1545. type: 'number',
  1546. wildcardSearch: true
  1547. }
  1548. },
  1549. {
  1550. name: 'template_type',
  1551. title: 'Tpl Type',
  1552. width: 100,
  1553. inputField: {
  1554. type: 'selector',
  1555. validate: ['required'],
  1556. params: {
  1557. menuItems: {
  1558. none: 'none',
  1559. app: 'app',
  1560. user: 'user',
  1561. instance: 'instance',
  1562. password: 'password'
  1563. }
  1564. }
  1565. }
  1566. }
  1567. ]}
  1568. sorting={[{ columnName: 'id', direction: 'asc' }]}
  1569. columnOrder={[
  1570. 'display_name',
  1571. 'fname',
  1572. 'fieldtype',
  1573. 'description',
  1574. 'default_value',
  1575. 'sort_order',
  1576. 'flex',
  1577. 'template_type',
  1578. 'required',
  1579. 'adminonly',
  1580. 'minLength',
  1581. 'maxLength',
  1582. 'options',
  1583. 'regex'
  1584. ]}
  1585. filters={{ type: 'app', relid: params.id }}
  1586. enableFilters
  1587. enableAdding
  1588. enableDeleting
  1589. enableEditing
  1590. />
  1591. </Tab.Pane>
  1592. <Tab.Pane eventKey={5}>
  1593. <Datatable
  1594. label="Installed Instances"
  1595. typeOf="appInstance"
  1596. belongsTo={config.entity.single.toLowerCase()}
  1597. id={params.id}
  1598. APIRoute="apps/instances"
  1599. onClickedURL={`/${config.entity.single.toLowerCase()}manager/installedapps`}
  1600. onClickedParam="id"
  1601. columns={[
  1602. {
  1603. name: 'created_at',
  1604. title: 'Install Date',
  1605. filter: { type: 'date' }
  1606. },
  1607. {
  1608. name: 'user_id',
  1609. title: 'User Name',
  1610. defaultValueFrom: ['firstname', 'lastname'],
  1611. filter: {
  1612. type: 'search',
  1613. params: {
  1614. wildcardSearch: true,
  1615. minLength: 3,
  1616. APIRoute: 'users',
  1617. orderby: 'id',
  1618. searchItems: ['firstname', 'lastname'],
  1619. submitValue: 'id',
  1620. isSearch: true
  1621. }
  1622. }
  1623. },
  1624. {
  1625. name: 'cylo_id',
  1626. title: 'Cylo',
  1627. defaultValueFrom: ['cyloname'],
  1628. filter: {
  1629. type: 'search',
  1630. params: {
  1631. wildcardSearch: true,
  1632. minLength: 3,
  1633. APIRoute: 'cylos',
  1634. orderby: 'id',
  1635. searchItems: ['cyloname'],
  1636. submitValue: 'id'
  1637. }
  1638. }
  1639. },
  1640. {
  1641. name: 'version',
  1642. title: 'Version'
  1643. },
  1644. {
  1645. name: 'latest_ver',
  1646. title: 'Latest'
  1647. },
  1648. {
  1649. name: 'app_slots',
  1650. title: 'Slots'
  1651. },
  1652. {
  1653. name: 'installing',
  1654. title: 'Installing',
  1655. type: 'IsEnabledCell',
  1656. filter: {
  1657. type: 'selector',
  1658. params: {
  1659. menuItems: {
  1660. Yes: 1,
  1661. No: 0
  1662. }
  1663. }
  1664. }
  1665. },
  1666. {
  1667. name: 'enabled',
  1668. title: 'Enabled',
  1669. type: 'IsEnabledCell',
  1670. filter: {
  1671. type: 'selector',
  1672. params: {
  1673. menuItems: {
  1674. Enabled: 1,
  1675. Disabled: 0
  1676. }
  1677. }
  1678. }
  1679. }
  1680. ]}
  1681. sorting={[{ columnName: 'created_at', direction: 'desc' }]}
  1682. columnOrder={[
  1683. 'user_id',
  1684. 'cylo_id',
  1685. 'version',
  1686. 'latest_ver',
  1687. 'app_slots',
  1688. 'installing',
  1689. 'enabled'
  1690. ]}
  1691. filters={{ app_id: params.id }}
  1692. enableFilters
  1693. />
  1694. </Tab.Pane>
  1695. <Tab.Pane eventKey={99}>
  1696. <Datatable
  1697. label="User Activity Logs"
  1698. typeOf="log"
  1699. belongsTo="user"
  1700. id={params.id}
  1701. APIRoute="activitylog"
  1702. onClickedURL="/logs/activitylogs"
  1703. onClickedParam="id"
  1704. columns={[
  1705. {
  1706. name: 'user_id',
  1707. title: 'Name',
  1708. defaultValueFrom: [
  1709. 'firstname',
  1710. 'lastname',
  1711. 'servername'
  1712. ],
  1713. filter: {
  1714. type: 'search',
  1715. params: {
  1716. wildcardSearch: true,
  1717. minLength: 3,
  1718. APIRoute: 'users',
  1719. orderby: 'id',
  1720. searchItems: ['firstname', 'lastname'],
  1721. submitValue: 'id',
  1722. isSearch: true
  1723. }
  1724. }
  1725. },
  1726. {
  1727. name: 'created_at',
  1728. title: 'Time',
  1729. filter: { type: 'date' }
  1730. },
  1731. {
  1732. name: 'ip',
  1733. title: 'IP Address',
  1734. filter: { type: 'dynamicText', wildcardSearch: true }
  1735. },
  1736. {
  1737. name: 'route',
  1738. title: 'Route',
  1739. filter: { type: 'dynamicText' }
  1740. },
  1741. {
  1742. name: 'action',
  1743. title: 'Action',
  1744. filter: { type: 'dynamicText' }
  1745. },
  1746. {
  1747. name: 'type',
  1748. title: 'Type',
  1749. filter: { type: 'dynamicText' }
  1750. },
  1751. {
  1752. name: 'relid',
  1753. title: 'ID',
  1754. filter: { type: 'number' }
  1755. }
  1756. ]}
  1757. sorting={[{ columnName: 'created_at', direction: 'desc' }]}
  1758. columnOrder={[
  1759. 'created_at',
  1760. 'ip',
  1761. 'route',
  1762. 'action',
  1763. 'type',
  1764. 'relid'
  1765. ]}
  1766. filters={{ type: 'App', relid: params.id }}
  1767. enableFilters
  1768. enableDragging
  1769. />
  1770. </Tab.Pane>
  1771. </Tab.Content>
  1772. </Col>
  1773. </Row>
  1774. </Tab.Container>
  1775. </div>
  1776. );
  1777. }
  1778. }
  1779.  
  1780. const connector: Connector<{}, Props> = connect(
  1781. ({ tabBar }: ReduxState) => ({ tabBar }),
  1782. (dispatch: Dispatch) => ({
  1783. dispatchTabBarSetTabs: (tabs: TabBarType) =>
  1784. dispatch(action.tabBarSetTabs(tabs)),
  1785. dispatchTabBarSelectTab: (selectedTab: Object) =>
  1786. dispatch(action.tabBarSelectTab(selectedTab))
  1787. })
  1788. );
  1789.  
  1790. export default connector(App);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement