-import * as React from 'react';\r
-\r
-import { withComponents, WithComponents } from '../utilities/withComponents';\r
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';\r
-\r
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';\r
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\r
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\r
-import Typography from '@material-ui/core/Typography';\r
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r
-\r
-import { MaterialTable, MaterialTableCtorType, ColumnType } from '../components/material-table';\r
-import { TreeView, ITreeItem, TreeViewCtorType } from '../components/material-ui/treeView';\r
-import { SvgIconProps } from '@material-ui/core/SvgIcon';\r
-\r
-const styles = (theme: Theme) => createStyles({\r
- root: {\r
- width: '100%',\r
- },\r
- heading: {\r
- fontSize: theme.typography.pxToRem(15),\r
- fontWeight: theme.typography.fontWeightRegular,\r
- },\r
-});\r
-\r
-class SampleData {\r
- _id: string;\r
- index: number;\r
- guid: string;\r
- isActive: boolean;\r
- balance: string;\r
- age: number;\r
- firstName: string;\r
- lastName: string;\r
- company: string;\r
- email: string;\r
- registered: string;\r
- latitude: string;\r
- longitude: string;\r
-}\r
-\r
-// https://next.json-generator.com/NJ5Bv-v1I\r
-const tableData: SampleData[] = [\r
- {\r
- "_id": "5c0e18399919a5c43636fdf2",\r
- "index": 0,\r
- "guid": "48728d8e-8300-4d0f-b967-e2166d023066",\r
- "isActive": false,\r
- "balance": "$3,480.16",\r
- "age": 33,\r
- "firstName": "Brooke",\r
- "lastName": "Morris",\r
- "company": "ZORROMOP",\r
- "email": "brooke.morris@zorromop.de",\r
- "registered": "Sunday, February 11, 2018 2:55 PM",\r
- "latitude": "-69.109379",\r
- "longitude": "113.735639"\r
- },\r
- {\r
- "_id": "5c0e1839b61e3eeaf164259d",\r
- "index": 1,\r
- "guid": "28723570-1507-422e-b78c-924402371fb1",\r
- "isActive": false,\r
- "balance": "$1,305.01",\r
- "age": 28,\r
- "firstName": "Jolene",\r
- "lastName": "Everett",\r
- "company": "ZENCO",\r
- "email": "jolene.everett@zenco.de",\r
- "registered": "Saturday, December 8, 2018 5:17 PM",\r
- "latitude": "13.683025",\r
- "longitude": "85.101421"\r
- },\r
- {\r
- "_id": "5c0e1839e81f57913c5d2147",\r
- "index": 2,\r
- "guid": "e914dc5d-91a3-405d-ac48-aee6f0cd391a",\r
- "isActive": true,\r
- "balance": "$1,418.37",\r
- "age": 28,\r
- "firstName": "Elva",\r
- "lastName": "Travis",\r
- "company": "ZYTREK",\r
- "email": "elva.travis@zytrek.de",\r
- "registered": "Thursday, March 10, 2016 5:13 PM",\r
- "latitude": "53.75862",\r
- "longitude": "-67.784532"\r
- },\r
- {\r
- "_id": "5c0e1839bc9224a2b54c0f69",\r
- "index": 3,\r
- "guid": "88cbdce0-0bcc-4d16-83c3-3017690503c4",\r
- "isActive": true,\r
- "balance": "$1,709.60",\r
- "age": 21,\r
- "firstName": "Ellis",\r
- "lastName": "Mcpherson",\r
- "company": "DIGIPRINT",\r
- "email": "ellis.mcpherson@digiprint.de",\r
- "registered": "Sunday, December 21, 2014 5:25 AM",\r
- "latitude": "46.486149",\r
- "longitude": "-66.657067"\r
- },\r
- {\r
- "_id": "5c0e183951b51475db0f35d1",\r
- "index": 4,\r
- "guid": "c887ac86-7ba1-4eb6-9b47-e88a1bcb3713",\r
- "isActive": true,\r
- "balance": "$3,578.54",\r
- "age": 25,\r
- "firstName": "Marcia",\r
- "lastName": "Rocha",\r
- "company": "ZAPPIX",\r
- "email": "marcia.rocha@zappix.de",\r
- "registered": "Tuesday, June 16, 2015 11:21 AM",\r
- "latitude": "-39.905461",\r
- "longitude": "150.873895"\r
- },\r
- {\r
- "_id": "5c0e18398c5be8d362a578eb",\r
- "index": 5,\r
- "guid": "0d160697-9b5b-4941-9b5f-4ba3a7f97b49",\r
- "isActive": true,\r
- "balance": "$414.98",\r
- "age": 32,\r
- "firstName": "Lavonne",\r
- "lastName": "Wilkins",\r
- "company": "FARMAGE",\r
- "email": "lavonne.wilkins@farmage.de",\r
- "registered": "Monday, February 1, 2016 5:27 PM",\r
- "latitude": "-16.839256",\r
- "longitude": "-105.824746"\r
- },\r
- {\r
- "_id": "5c0e18399804086c836d7d56",\r
- "index": 6,\r
- "guid": "715a5f63-35b6-4903-a46e-ba584b005e64",\r
- "isActive": false,\r
- "balance": "$1,755.78",\r
- "age": 32,\r
- "firstName": "Wise",\r
- "lastName": "Berg",\r
- "company": "ZIZZLE",\r
- "email": "wise.berg@zizzle.de",\r
- "registered": "Saturday, March 28, 2015 1:40 AM",\r
- "latitude": "51.15269",\r
- "longitude": "65.795093"\r
- },\r
- {\r
- "_id": "5c0e18399c4d13538bcaf8c9",\r
- "index": 7,\r
- "guid": "7ee50269-23e8-499e-9a16-09f393d7600c",\r
- "isActive": false,\r
- "balance": "$342.52",\r
- "age": 27,\r
- "firstName": "Isabel",\r
- "lastName": "Battle",\r
- "company": "EZENTIA",\r
- "email": "isabel.battle@ezentia.de",\r
- "registered": "Thursday, June 7, 2018 12:16 AM",\r
- "latitude": "-53.318152",\r
- "longitude": "-153.516824"\r
- },\r
- {\r
- "_id": "5c0e18398d7fb9a4eceeffa2",\r
- "index": 8,\r
- "guid": "1e30c9ac-2297-4f16-83e6-9559b1ebe92c",\r
- "isActive": true,\r
- "balance": "$3,184.71",\r
- "age": 36,\r
- "firstName": "Lenora",\r
- "lastName": "Crawford",\r
- "company": "KIDGREASE",\r
- "email": "lenora.crawford@kidgrease.de",\r
- "registered": "Saturday, January 7, 2017 6:17 PM",\r
- "latitude": "-72.431496",\r
- "longitude": "9.413359"\r
- },\r
- {\r
- "_id": "5c0e18395837069ab6b79d00",\r
- "index": 9,\r
- "guid": "d04a02ed-5899-4729-a7e5-2d85b5d03973",\r
- "isActive": true,\r
- "balance": "$1,553.28",\r
- "age": 35,\r
- "firstName": "Sasha",\r
- "lastName": "Bridges",\r
- "company": "IDEALIS",\r
- "email": "sasha.bridges@idealis.de",\r
- "registered": "Sunday, February 4, 2018 7:02 PM",\r
- "latitude": "8.095691",\r
- "longitude": "-105.758195"\r
- },\r
- {\r
- "_id": "5c0e18390be19bf65acad180",\r
- "index": 10,\r
- "guid": "3a1a77e6-ef15-4598-8274-c68ac3bb922a",\r
- "isActive": false,\r
- "balance": "$3,587.96",\r
- "age": 20,\r
- "firstName": "Wilkins",\r
- "lastName": "Beasley",\r
- "company": "DIGIFAD",\r
- "email": "wilkins.beasley@digifad.de",\r
- "registered": "Monday, March 5, 2018 1:27 PM",\r
- "latitude": "-88.062704",\r
- "longitude": "149.95661"\r
- },\r
- {\r
- "_id": "5c0e1839ffbbad5c9954e49f",\r
- "index": 11,\r
- "guid": "97a56950-a08c-4e00-8002-ba2d5de4da5d",\r
- "isActive": false,\r
- "balance": "$1,997.80",\r
- "age": 31,\r
- "firstName": "Sullivan",\r
- "lastName": "Mcclain",\r
- "company": "EARTHMARK",\r
- "email": "sullivan.mcclain@earthmark.de",\r
- "registered": "Saturday, October 27, 2018 2:51 PM",\r
- "latitude": "-81.86349",\r
- "longitude": "-79.596991"\r
- },\r
- {\r
- "_id": "5c0e183914bd464d55e7325f",\r
- "index": 12,\r
- "guid": "294f6485-d0f9-4b25-b998-325ae90fa769",\r
- "isActive": true,\r
- "balance": "$1,405.46",\r
- "age": 24,\r
- "firstName": "Herminia",\r
- "lastName": "Fischer",\r
- "company": "ECOLIGHT",\r
- "email": "herminia.fischer@ecolight.de",\r
- "registered": "Thursday, January 16, 2014 4:48 PM",\r
- "latitude": "48.224363",\r
- "longitude": "11.08339"\r
- },\r
- {\r
- "_id": "5c0e183968ec2556d8f6566c",\r
- "index": 13,\r
- "guid": "16edfea4-7b37-4e54-868c-c369b413dd78",\r
- "isActive": false,\r
- "balance": "$3,440.67",\r
- "age": 39,\r
- "firstName": "Blanchard",\r
- "lastName": "Blackwell",\r
- "company": "GEOFORMA",\r
- "email": "blanchard.blackwell@geoforma.de",\r
- "registered": "Wednesday, July 30, 2014 4:07 AM",\r
- "latitude": "-52.169297",\r
- "longitude": "10.415879"\r
- },\r
- {\r
- "_id": "5c0e183939a0fc955f2d94da",\r
- "index": 14,\r
- "guid": "4ed454e2-dde1-4ab5-a434-4a82205ced2d",\r
- "isActive": true,\r
- "balance": "$1,883.27",\r
- "age": 35,\r
- "firstName": "Gayle",\r
- "lastName": "Little",\r
- "company": "AQUAZURE",\r
- "email": "gayle.little@aquazure.de",\r
- "registered": "Tuesday, December 12, 2017 5:08 PM",\r
- "latitude": "-58.473236",\r
- "longitude": "38.022269"\r
- },\r
- {\r
- "_id": "5c0e1839099f9221ccd968ac",\r
- "index": 15,\r
- "guid": "1d052fd4-7c54-45fb-b0db-7de1acc4262a",\r
- "isActive": false,\r
- "balance": "$2,601.94",\r
- "age": 31,\r
- "firstName": "Jocelyn",\r
- "lastName": "Richards",\r
- "company": "GINK",\r
- "email": "jocelyn.richards@gink.de",\r
- "registered": "Sunday, October 30, 2016 9:12 PM",\r
- "latitude": "-43.489676",\r
- "longitude": "2.557869"\r
- },\r
- {\r
- "_id": "5c0e183970f320f377321c3f",\r
- "index": 16,\r
- "guid": "45bca125-8831-48c3-b22b-29ae318e7096",\r
- "isActive": false,\r
- "balance": "$3,441.74",\r
- "age": 34,\r
- "firstName": "Berta",\r
- "lastName": "Valentine",\r
- "company": "ISOSPHERE",\r
- "email": "berta.valentine@isosphere.de",\r
- "registered": "Sunday, March 19, 2017 8:22 PM",\r
- "latitude": "-40.188039",\r
- "longitude": "-170.085092"\r
- },\r
- {\r
- "_id": "5c0e1839ab960bb0a9f4f392",\r
- "index": 17,\r
- "guid": "d7b5122a-94c9-423c-b799-1a8f8314b152",\r
- "isActive": false,\r
- "balance": "$56.39",\r
- "age": 21,\r
- "firstName": "Russell",\r
- "lastName": "Powers",\r
- "company": "TETAK",\r
- "email": "russell.powers@tetak.de",\r
- "registered": "Thursday, November 3, 2016 9:23 PM",\r
- "latitude": "-51.610519",\r
- "longitude": "-133.280363"\r
- },\r
- {\r
- "_id": "5c0e183998f0195404b9aaa4",\r
- "index": 18,\r
- "guid": "a043ba97-ea7e-48ce-bb15-18ee09fb393d",\r
- "isActive": true,\r
- "balance": "$1,503.57",\r
- "age": 37,\r
- "firstName": "Rosario",\r
- "lastName": "Brennan",\r
- "company": "VIAGRAND",\r
- "email": "rosario.brennan@viagrand.de",\r
- "registered": "Saturday, March 17, 2018 10:32 PM",\r
- "latitude": "-43.773365",\r
- "longitude": "47.58682"\r
- },\r
- {\r
- "_id": "5c0e1839bcb2a5cc567129ac",\r
- "index": 19,\r
- "guid": "de6d5d36-201e-4f87-9976-ed31f3160e42",\r
- "isActive": false,\r
- "balance": "$1,160.18",\r
- "age": 29,\r
- "firstName": "Anita",\r
- "lastName": "Hodges",\r
- "company": "TUBALUM",\r
- "email": "anita.hodges@tubalum.de",\r
- "registered": "Sunday, November 26, 2017 11:54 AM",\r
- "latitude": "7.080244",\r
- "longitude": "-9.970715"\r
- },\r
- {\r
- "_id": "5c0e18394b37e854a1ef371c",\r
- "index": 20,\r
- "guid": "9407113b-896a-4699-ac1b-363bc3c6f8ad",\r
- "isActive": false,\r
- "balance": "$34.81",\r
- "age": 31,\r
- "firstName": "Barrett",\r
- "lastName": "Weaver",\r
- "company": "DUOFLEX",\r
- "email": "barrett.weaver@duoflex.de",\r
- "registered": "Tuesday, November 3, 2015 9:31 AM",\r
- "latitude": "40.30558",\r
- "longitude": "-69.986664"\r
- },\r
- {\r
- "_id": "5c0e1839b5658f90e16a86e0",\r
- "index": 21,\r
- "guid": "81f894c4-c931-422d-a30e-593824d95bf9",\r
- "isActive": true,\r
- "balance": "$2,808.63",\r
- "age": 26,\r
- "firstName": "Baxter",\r
- "lastName": "Chase",\r
- "company": "BUNGA",\r
- "email": "baxter.chase@bunga.de",\r
- "registered": "Friday, October 28, 2016 7:10 AM",\r
- "latitude": "-49.05652",\r
- "longitude": "63.123535"\r
- },\r
- {\r
- "_id": "5c0e1839cb9462c9ecbb59af",\r
- "index": 22,\r
- "guid": "92e67862-4fdf-43af-a3ef-ef3edb8d6706",\r
- "isActive": true,\r
- "balance": "$3,552.71",\r
- "age": 29,\r
- "firstName": "Olga",\r
- "lastName": "Kemp",\r
- "company": "OHMNET",\r
- "email": "olga.kemp@ohmnet.de",\r
- "registered": "Saturday, March 26, 2016 11:51 AM",\r
- "latitude": "-17.450481",\r
- "longitude": "-13.945794"\r
- },\r
- {\r
- "_id": "5c0e18396f999c2b8ac731a9",\r
- "index": 23,\r
- "guid": "a682eaae-34f0-4973-b8a0-30972de0732b",\r
- "isActive": false,\r
- "balance": "$1,999.20",\r
- "age": 21,\r
- "firstName": "Ebony",\r
- "lastName": "Le",\r
- "company": "MULTRON",\r
- "email": "ebony.le@multron.de",\r
- "registered": "Friday, March 27, 2015 9:23 AM",\r
- "latitude": "-70.380014",\r
- "longitude": "173.20685"\r
- },\r
- {\r
- "_id": "5c0e18391cfb28263eb42db7",\r
- "index": 24,\r
- "guid": "f1cddb5f-0b89-453e-b0c9-8193a56cc610",\r
- "isActive": true,\r
- "balance": "$2,950.91",\r
- "age": 30,\r
- "firstName": "Norman",\r
- "lastName": "Price",\r
- "company": "COMVEX",\r
- "email": "norman.price@comvex.de",\r
- "registered": "Tuesday, August 21, 2018 11:17 PM",\r
- "latitude": "86.501469",\r
- "longitude": "159.545352"\r
- },\r
- {\r
- "_id": "5c0e18394a6be11128c7e5ca",\r
- "index": 25,\r
- "guid": "dadb738a-40fd-45b6-abac-023a803d95c2",\r
- "isActive": true,\r
- "balance": "$2,767.09",\r
- "age": 25,\r
- "firstName": "Sara",\r
- "lastName": "Ruiz",\r
- "company": "AUSTECH",\r
- "email": "sara.ruiz@austech.de",\r
- "registered": "Wednesday, June 20, 2018 6:34 AM",\r
- "latitude": "86.784904",\r
- "longitude": "-120.331325"\r
- },\r
- {\r
- "_id": "5c0e183974631549eda97cea",\r
- "index": 26,\r
- "guid": "b5c43ee5-14ed-4ab5-b3db-b31a8bb65ceb",\r
- "isActive": true,\r
- "balance": "$3,235.42",\r
- "age": 32,\r
- "firstName": "Holly",\r
- "lastName": "Santos",\r
- "company": "LOVEPAD",\r
- "email": "holly.santos@lovepad.de",\r
- "registered": "Thursday, November 22, 2018 9:26 PM",\r
- "latitude": "-19.640066",\r
- "longitude": "50.410992"\r
- },\r
- {\r
- "_id": "5c0e1839ab9b933881429d78",\r
- "index": 27,\r
- "guid": "94961092-65ca-41b9-bc69-3e40ce2cafc9",\r
- "isActive": true,\r
- "balance": "$2,106.34",\r
- "age": 39,\r
- "firstName": "Rachel",\r
- "lastName": "Douglas",\r
- "company": "DEMINIMUM",\r
- "email": "rachel.douglas@deminimum.de",\r
- "registered": "Sunday, April 9, 2017 3:55 AM",\r
- "latitude": "31.395281",\r
- "longitude": "-1.899514"\r
- },\r
- {\r
- "_id": "5c0e183937f743155859c5a9",\r
- "index": 28,\r
- "guid": "07d7ef18-bcef-483d-999e-0b3da4a7098b",\r
- "isActive": true,\r
- "balance": "$2,260.65",\r
- "age": 40,\r
- "firstName": "Reed",\r
- "lastName": "Workman",\r
- "company": "BUZZMAKER",\r
- "email": "reed.workman@buzzmaker.de",\r
- "registered": "Wednesday, May 28, 2014 3:44 PM",\r
- "latitude": "23.789646",\r
- "longitude": "106.938375"\r
- },\r
- {\r
- "_id": "5c0e1839f8f4b60beb28b7ed",\r
- "index": 29,\r
- "guid": "9b4952e5-aa0e-4919-9e17-7c357a297394",\r
- "isActive": false,\r
- "balance": "$702.99",\r
- "age": 27,\r
- "firstName": "Cochran",\r
- "lastName": "Ware",\r
- "company": "HIVEDOM",\r
- "email": "cochran.ware@hivedom.de",\r
- "registered": "Monday, October 16, 2017 5:51 AM",\r
- "latitude": "85.953108",\r
- "longitude": "124.590037"\r
- },\r
- {\r
- "_id": "5c0e1839342fbd54a88269df",\r
- "index": 30,\r
- "guid": "30937d5b-9514-4ebd-b628-2cfb5017fe41",\r
- "isActive": false,\r
- "balance": "$385.88",\r
- "age": 35,\r
- "firstName": "Cote",\r
- "lastName": "Hess",\r
- "company": "TERAPRENE",\r
- "email": "cote.hess@teraprene.de",\r
- "registered": "Thursday, March 15, 2018 4:42 PM",\r
- "latitude": "81.38211",\r
- "longitude": "64.516797"\r
- },\r
- {\r
- "_id": "5c0e18395b6dc85d73ce1fb3",\r
- "index": 31,\r
- "guid": "f34847da-7f96-4cd8-8d8a-b06c0eb0a8f2",\r
- "isActive": true,\r
- "balance": "$3,494.56",\r
- "age": 27,\r
- "firstName": "Daniels",\r
- "lastName": "Ayala",\r
- "company": "BESTO",\r
- "email": "daniels.ayala@besto.de",\r
- "registered": "Sunday, December 18, 2016 10:52 AM",\r
- "latitude": "47.704227",\r
- "longitude": "41.674767"\r
- },\r
- {\r
- "_id": "5c0e183974587cdccf30b13f",\r
- "index": 32,\r
- "guid": "fdbb6d83-0e47-4453-b8a7-b47f44e4164b",\r
- "isActive": false,\r
- "balance": "$2,087.38",\r
- "age": 26,\r
- "firstName": "Powers",\r
- "lastName": "Drake",\r
- "company": "GENESYNK",\r
- "email": "powers.drake@genesynk.de",\r
- "registered": "Saturday, September 29, 2018 12:24 AM",\r
- "latitude": "40.580432",\r
- "longitude": "110.940759"\r
- },\r
- {\r
- "_id": "5c0e18397b51245e971c58b8",\r
- "index": 33,\r
- "guid": "6adfe544-238b-4001-b2a6-f50ea3094da3",\r
- "isActive": true,\r
- "balance": "$3,566.22",\r
- "age": 34,\r
- "firstName": "Pacheco",\r
- "lastName": "Ramsey",\r
- "company": "ENVIRE",\r
- "email": "pacheco.ramsey@envire.de",\r
- "registered": "Friday, September 11, 2015 12:14 AM",\r
- "latitude": "-30.691235",\r
- "longitude": "69.343692"\r
- },\r
- {\r
- "_id": "5c0e18391ede9c0996fd09e7",\r
- "index": 34,\r
- "guid": "d190b32f-d33b-4c17-a18a-bb2f57e79ba7",\r
- "isActive": false,\r
- "balance": "$1,671.63",\r
- "age": 32,\r
- "firstName": "Mcintyre",\r
- "lastName": "Chan",\r
- "company": "ORBAXTER",\r
- "email": "mcintyre.chan@orbaxter.de",\r
- "registered": "Wednesday, May 7, 2014 7:11 PM",\r
- "latitude": "7.380435",\r
- "longitude": "70.955103"\r
- },\r
- {\r
- "_id": "5c0e1839fe48069c9c260fa9",\r
- "index": 35,\r
- "guid": "a41c064b-6bf4-4ba5-b229-9b657d286936",\r
- "isActive": false,\r
- "balance": "$24.02",\r
- "age": 27,\r
- "firstName": "Genevieve",\r
- "lastName": "Sparks",\r
- "company": "ZBOO",\r
- "email": "genevieve.sparks@zboo.de",\r
- "registered": "Saturday, December 16, 2017 2:51 PM",\r
- "latitude": "-63.406337",\r
- "longitude": "118.662621"\r
- },\r
- {\r
- "_id": "5c0e1839a7e8e76accf0803e",\r
- "index": 36,\r
- "guid": "3e71864d-4be5-418e-ace8-346c3d7a9c5f",\r
- "isActive": true,\r
- "balance": "$3,261.01",\r
- "age": 30,\r
- "firstName": "Powell",\r
- "lastName": "Patterson",\r
- "company": "GAZAK",\r
- "email": "powell.patterson@gazak.de",\r
- "registered": "Thursday, May 18, 2017 10:10 AM",\r
- "latitude": "-10.428548",\r
- "longitude": "64.979192"\r
- },\r
- {\r
- "_id": "5c0e183984b0320f1118a8b0",\r
- "index": 37,\r
- "guid": "ec5b292c-6efb-471b-9bf5-a47286e03515",\r
- "isActive": false,\r
- "balance": "$918.71",\r
- "age": 37,\r
- "firstName": "Tara",\r
- "lastName": "Mcmillan",\r
- "company": "GRAINSPOT",\r
- "email": "tara.mcmillan@grainspot.de",\r
- "registered": "Sunday, May 17, 2015 1:01 PM",\r
- "latitude": "-13.519031",\r
- "longitude": "67.931062"\r
- },\r
- {\r
- "_id": "5c0e183965875876835ccd79",\r
- "index": 38,\r
- "guid": "b7e97ffb-439a-4454-90af-7f5ebd565ebc",\r
- "isActive": true,\r
- "balance": "$574.99",\r
- "age": 28,\r
- "firstName": "Pennington",\r
- "lastName": "Gallegos",\r
- "company": "CEDWARD",\r
- "email": "pennington.gallegos@cedward.de",\r
- "registered": "Wednesday, September 26, 2018 6:01 AM",\r
- "latitude": "-63.693261",\r
- "longitude": "-38.352153"\r
- },\r
- {\r
- "_id": "5c0e183922505dd21be49009",\r
- "index": 39,\r
- "guid": "5187aa39-4357-462b-9508-3c537d26d70d",\r
- "isActive": false,\r
- "balance": "$2,447.08",\r
- "age": 26,\r
- "firstName": "Meagan",\r
- "lastName": "Irwin",\r
- "company": "SENTIA",\r
- "email": "meagan.irwin@sentia.de",\r
- "registered": "Saturday, April 2, 2016 4:39 PM",\r
- "latitude": "1.051313",\r
- "longitude": "-86.168315"\r
- },\r
- {\r
- "_id": "5c0e183900a9f7f896e5b3b1",\r
- "index": 40,\r
- "guid": "31889843-79e7-4636-9ca1-4eb5cbcb0ae3",\r
- "isActive": true,\r
- "balance": "$1,992.25",\r
- "age": 22,\r
- "firstName": "Kelly",\r
- "lastName": "Cobb",\r
- "company": "BOVIS",\r
- "email": "kelly.cobb@bovis.de",\r
- "registered": "Tuesday, August 9, 2016 5:36 PM",\r
- "latitude": "-85.547579",\r
- "longitude": "-89.794104"\r
- },\r
- {\r
- "_id": "5c0e18393b25b8552ff950e2",\r
- "index": 41,\r
- "guid": "0bf02edc-ca1b-4cfe-8356-b65881bdca11",\r
- "isActive": true,\r
- "balance": "$465.96",\r
- "age": 27,\r
- "firstName": "Angela",\r
- "lastName": "Booker",\r
- "company": "EQUICOM",\r
- "email": "angela.booker@equicom.de",\r
- "registered": "Thursday, July 30, 2015 1:39 AM",\r
- "latitude": "-9.345395",\r
- "longitude": "107.070665"\r
- },\r
- {\r
- "_id": "5c0e183955d747ebbe25437b",\r
- "index": 42,\r
- "guid": "6405e559-5849-4d12-ae4e-520f13b4dffe",\r
- "isActive": true,\r
- "balance": "$15.63",\r
- "age": 28,\r
- "firstName": "Carrie",\r
- "lastName": "Mclean",\r
- "company": "BOINK",\r
- "email": "carrie.mclean@boink.de",\r
- "registered": "Wednesday, February 1, 2017 1:50 PM",\r
- "latitude": "72.287519",\r
- "longitude": "-135.436286"\r
- },\r
- {\r
- "_id": "5c0e1839e9cfe1b28e31e7e6",\r
- "index": 43,\r
- "guid": "e49e7ca7-a6cc-4cdb-bebe-5a3b6ba931eb",\r
- "isActive": true,\r
- "balance": "$3,127.94",\r
- "age": 33,\r
- "firstName": "Callie",\r
- "lastName": "Cooley",\r
- "company": "MUSIX",\r
- "email": "callie.cooley@musix.de",\r
- "registered": "Wednesday, August 30, 2017 4:58 PM",\r
- "latitude": "-38.954739",\r
- "longitude": "-152.706424"\r
- },\r
- {\r
- "_id": "5c0e18391bafa0750ff4f280",\r
- "index": 44,\r
- "guid": "c245ffd3-4924-4dce-ae4a-f4cabf057b54",\r
- "isActive": false,\r
- "balance": "$1,320.36",\r
- "age": 35,\r
- "firstName": "Terry",\r
- "lastName": "Bennett",\r
- "company": "EXOTECHNO",\r
- "email": "terry.bennett@exotechno.de",\r
- "registered": "Friday, June 17, 2016 11:54 PM",\r
- "latitude": "-48.946183",\r
- "longitude": "32.53167"\r
- },\r
- {\r
- "_id": "5c0e1839e91b27fcce34b70f",\r
- "index": 45,\r
- "guid": "0860cb66-de4c-410e-8233-aeef5ee9d64e",\r
- "isActive": false,\r
- "balance": "$1,187.75",\r
- "age": 30,\r
- "firstName": "Phoebe",\r
- "lastName": "Bartlett",\r
- "company": "VORATAK",\r
- "email": "phoebe.bartlett@voratak.de",\r
- "registered": "Tuesday, July 25, 2017 2:57 AM",\r
- "latitude": "-63.208957",\r
- "longitude": "-91.209743"\r
- },\r
- {\r
- "_id": "5c0e183987e8a4e98415c8dd",\r
- "index": 46,\r
- "guid": "49219833-172c-4659-9192-d1116a5ca833",\r
- "isActive": false,\r
- "balance": "$3,225.24",\r
- "age": 38,\r
- "firstName": "Jordan",\r
- "lastName": "Evans",\r
- "company": "PHARMACON",\r
- "email": "jordan.evans@pharmacon.de",\r
- "registered": "Sunday, April 23, 2017 6:27 PM",\r
- "latitude": "-59.454678",\r
- "longitude": "67.251185"\r
- },\r
- {\r
- "_id": "5c0e183944979692cc1a3e48",\r
- "index": 47,\r
- "guid": "680c4d15-d539-4db9-8793-a2f6d3f354aa",\r
- "isActive": false,\r
- "balance": "$2,913.14",\r
- "age": 28,\r
- "firstName": "Goodman",\r
- "lastName": "Cain",\r
- "company": "CAXT",\r
- "email": "goodman.cain@caxt.de",\r
- "registered": "Tuesday, November 1, 2016 6:11 PM",\r
- "latitude": "-30.187547",\r
- "longitude": "-164.313273"\r
- },\r
- {\r
- "_id": "5c0e1839ef5312ac08e3cbc3",\r
- "index": 48,\r
- "guid": "85f5fa5d-b6b3-47c6-ad1b-faee10a4e1bd",\r
- "isActive": true,\r
- "balance": "$544.97",\r
- "age": 27,\r
- "firstName": "Aisha",\r
- "lastName": "Oliver",\r
- "company": "MINGA",\r
- "email": "aisha.oliver@minga.de",\r
- "registered": "Sunday, July 3, 2016 8:18 AM",\r
- "latitude": "-21.527536",\r
- "longitude": "141.029691"\r
- },\r
- {\r
- "_id": "5c0e1839c2e58f5da04f29fd",\r
- "index": 49,\r
- "guid": "e2ee9b25-5887-49a9-a1c6-17432154d266",\r
- "isActive": true,\r
- "balance": "$3,621.65",\r
- "age": 31,\r
- "firstName": "Erin",\r
- "lastName": "Lester",\r
- "company": "SLOFAST",\r
- "email": "erin.lester@slofast.de",\r
- "registered": "Saturday, February 20, 2016 5:13 AM",\r
- "latitude": "-30.080798",\r
- "longitude": "-1.291093"\r
- }\r
-];\r
-\r
-const components = {\r
- 'counter': 'demoApp.counter'\r
-};\r
-\r
-class TreeDemoItem implements ITreeItem {\r
- title: string;\r
- children?: TreeDemoItem[];\r
- disabled?: boolean;\r
- icon?: React.ComponentType<SvgIconProps>;\r
-}\r
-\r
-const treeData: TreeDemoItem[] = [\r
- { title: "Erste Ebene", children: [ \r
- { title: "Zweite Ebene", children: [\r
- { title: "Dritte Ebene" },\r
- ]\r
- },\r
- { title: "Zweite Ebene 2" },\r
- ]\r
- },\r
- { title: "Erste Ebene 3" },\r
-];\r
-\r
-const SampleDataMaterialTable = MaterialTable as MaterialTableCtorType<SampleData>;\r
-\r
-const SampleTree = TreeView as any as TreeViewCtorType<TreeDemoItem>;\r
-\r
-const AboutComponent = (props: WithComponents<typeof components> & WithStyles<typeof styles>) => {\r
-\r
- return (\r
- <div>\r
- <h2>About</h2>\r
- <ExpansionPanel>\r
- <ExpansionPanelSummary expandIcon={ <ExpandMoreIcon /> }>\r
- <Typography className={ props.classes.heading }>Client Side Table Demo</Typography>\r
- </ExpansionPanelSummary>\r
- <ExpansionPanelDetails>\r
- <SampleDataMaterialTable rows={ tableData } columns={\r
- [\r
- { property: "index", type: ColumnType.text, title: "Index", width: "80px", disableFilter:true, disableSorting:true, disablePadding:true },\r
- { property: "firstName", type: ColumnType.text, title: "First Name" },\r
- { property: "lastName", type: ColumnType.text, title: "Last Name" },\r
- { property: "age", type: ColumnType.numeric, title: "Age", width: "60px" },\r
- { property: "email", type: ColumnType.text, title: "eMail" },\r
- { property: "actions", type: ColumnType.custom, title: "Actions", customControl: ({ rowData }) => (<div>Button</div>) },\r
- ]\r
- } idProperty={ "_id" } title={ "Customers 2018" } >\r
- </SampleDataMaterialTable>\r
- </ExpansionPanelDetails>\r
- </ExpansionPanel>\r
- <ExpansionPanel>\r
- <ExpansionPanelSummary expandIcon={ <ExpandMoreIcon /> }>\r
- <Typography className={ props.classes.heading }>Tree Demo</Typography>\r
- </ExpansionPanelSummary>\r
- <ExpansionPanelDetails>\r
- <SampleTree items={ treeData } contentProperty={"title"} childrenProperty={"children"} useFolderIcons enableSearchBar />\r
- </ExpansionPanelDetails>\r
- </ExpansionPanel>\r
- </div>\r
- )\r
-};\r
-\r
-export const About = withComponents(components)(withStyles(styles)(AboutComponent));\r
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+import React, { FC, useEffect, useState } from 'react';
+import * as marked from 'marked';
+import * as hljs from 'highlight.js';
+import { requestRestExt } from '../services/restService';
+import { Button, Typography } from '@mui/material';
+
+const defaultRenderer = new marked.Renderer();
+defaultRenderer.link = (href, title, text) => (
+ `<a target="_blank" rel="noopener noreferrer" href="${href}" title="${title}">${text}</a>`
+);
+
+type OdluxVersion= {version:string,build:string, framework: string,
+ applications:{
+ configurationApp: string,
+ connectApp: string,
+ eventLogApp: string,
+ faultApp: string,
+ helpApp: string,
+ inventoryApp: string,
+ maintenanceApp: string,
+ mediatorApp: string,
+ permanceHistoryApp: string,
+ }};
+
+type TopologyVersion = {version: string, buildTimestamp: string};
+
+const AboutComponent: FC = (props) => {
+
+ const textareaRef = React.createRef<HTMLTextAreaElement>();
+ const [content, setContent] = useState<string | null>(null);
+ const [isCopiedSuccessfully, setCopySuccess] = useState(false);
+ const [isContetLoaded, setContentLoaded] = useState(false);
+
+ useEffect(()=>{
+ loadAboutContent();
+ },[]);
+
+ const getMarkOdluxVersionMarkdownTable = (data:OdluxVersion|null|undefined):string => {
+ if(!data) {
+ return "";
+ }else{
+ let applicationVersions= '';
+ if(data.applications){
+
+ applicationVersions = `| Framework | ${data.framework}|\n `+
+ `| ConnectApp | ${data.applications.connectApp}|\n `+
+ `| FaultApp | ${data.applications.faultApp}|\n `+
+ `| MaintenanceApp | ${data.applications.maintenanceApp}|\n `+
+ `| ConfigurationApp | ${data.applications.configurationApp}|\n `+
+ `| PerformanceHistoryApp | ${data.applications.permanceHistoryApp}|\n `+
+ `| InventoryApp | ${data.applications.inventoryApp}|\n `+
+ `| EventLogApp | ${data.applications.eventLogApp}|\n `+
+ `| MediatorApp | ${data.applications.mediatorApp}|\n `+
+ `| HelpApp | ${data.applications.helpApp}|\n `;
+ }
+
+ return `| | |\n| --- | --- |\n| Version | ${data.version} |\n| Build timestamp | ${data.build}|\n`+
+ applicationVersions;
+ }
+ }
+
+ const getTopologyVersionMarkdownTable = (data: TopologyVersion|null|undefined) => {
+ if(!data){
+ return "No version";
+ }
+ else
+ {
+ const topologyInfo = `| | |\n| --- | --- |\n| Version | ${data.version} |\n` +
+ `| Build timestamp | ${data.buildTimestamp} |\n`;
+ return topologyInfo;
+ }
+ }
+
+ const loadAboutContent = (): void => {
+ const baseUri = window.location.pathname.substring(0,window.location.pathname.lastIndexOf("/")+1);
+ const init = {
+ 'method': 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'text/markdown',
+ }
+ };
+ const p1 = requestRestExt<string>('/about',init);
+ const p2 = requestRestExt<OdluxVersion>(`${baseUri}version.json`);
+ const p3 = requestRestExt<any>(`/topology/info/version`);
+
+ Promise.all([p1,p2, p3]).then((responses) => {
+ const response = responses[0];
+ const response2 = responses[1];
+ const response3 = responses[2];
+ const content = response.status == 200 ? response.data : `${response.status} ${response.message}` || "Server error";
+ const content2 = `\n## ODLUX Version Info\n`+(response2.status == 200 ? getMarkOdluxVersionMarkdownTable(response2.data) : `${response2.message}` || "ODLUX Server error");
+ const content3 = `\n## Topology API Version Info\n`+(response3.status == 200 ? getTopologyVersionMarkdownTable(response3.data): `Topology API not available`);
+ const loadedSucessfully = response.status == 200 ? true : false;
+ setContent((content + content2 + content3 ) || null);
+ setContentLoaded(loadedSucessfully);
+ }).catch((error) => {
+ setContent(error);
+ });
+ }
+
+ const copyToClipboard = (e: React.MouseEvent<HTMLButtonElement>) =>{
+ e.preventDefault();
+
+ if(textareaRef.current!==null){
+ textareaRef.current.select();
+ document.execCommand('copy');
+ if(e.currentTarget != null){ // refocus on button, otherwhise the textarea would be focused
+ e.currentTarget.focus();
+ }
+ setCopySuccess(true);
+ window.setTimeout(()=>{ setCopySuccess(false);},2000);
+ }
+ }
+
+ const markedOptions: marked.MarkedOptions = {
+ gfm: true,
+ breaks: false,
+ pedantic: false,
+ sanitize: true,
+ smartLists: true,
+ smartypants: false,
+ langPrefix: 'hljs ',
+ ...({}),
+ highlight: (code, lang) => {
+ if (!!(lang && hljs.getLanguage(lang))) {
+ return hljs.highlight(lang, code).value;
+ }
+ return code;
+ }
+ };
+
+
+ const className = "about-table"
+ const style: React.CSSProperties = {};
+ const containerStyle = { overflow: "auto", paddingRight: "20px" }
+
+ const html = (marked(content || 'loading', { renderer: markedOptions && markedOptions.renderer || defaultRenderer }));
+
+ return (
+ <div style={containerStyle}>
+ { isContetLoaded &&
+ <div style={{float: "right", marginRight: "10px"}}>
+ <Button aria-label="copy-version-information-button" color="inherit" variant="contained" onClick={e => copyToClipboard(e)}>
+ Copy to clipboard
+ </Button>
+ {
+ isCopiedSuccessfully &&
+ <Typography variant="body1" style={{color: "green"}} align="center">
+ copied successfully
+ </Typography>
+ }
+ </div>
+ }
+
+ <div
+ dangerouslySetInnerHTML={{ __html: html }}
+ className={className}
+ style={style}
+ />
+ <form>
+ <textarea
+ style={{opacity: ".01"}}
+ ref={textareaRef}
+ value={content || ''}
+ />
+ </form>
+ </div>
+ );
+};
+
+export const About = AboutComponent;
export default About;
\ No newline at end of file
Code Review / ccsdk / features.git / blobdiff