Update ara-web patternfly modules to use the released version
Patternfly is released, we can now use component from react-core modules. Update patternfly modules. Replace html components with react equivalents Change-Id: I93941fe86ae2dda905af78779b414cbc8cc4fcc1
This commit is contained in:
Guillaume Vincent
parent
8f72f77129
commit
46f8897604
|
|
@ -1131,6 +1131,19 @@
|
|||
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz",
|
||||
"integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.2.18",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.18.tgz",
|
||||
"integrity": "sha512-834DrzO2Ne3upCW+mJJPC/E6BsFcj+2Z1HmPIhbpbj8UaKmXWum4NClqLpUiMetugRlHuG4jbIHNdv2/lc3c1Q=="
|
||||
},
|
||||
"@fortawesome/free-brands-svg-icons": {
|
||||
"version": "5.8.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.2.tgz",
|
||||
"integrity": "sha512-nhEWctDOP6f+Ka10LXAFoF+6mtWidC2iQgTBGRGgydmhBtcIEwyxWVx5wQHa86A1zAMi5TnipDAYQs2qn7DD6A==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.18"
|
||||
}
|
||||
},
|
||||
"@hapi/address": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz",
|
||||
|
|
@ -1400,45 +1413,36 @@
|
|||
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
|
||||
},
|
||||
"@patternfly/patternfly": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-2.1.1.tgz",
|
||||
"integrity": "sha512-V3gUgO+hmFcXp7gDi8x3zgwR6Xy4sOmODtgGPFAVAB031IkLD651UuOgz7GB2s2R65HyhTUaV5NH95d6wNlJgg=="
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-2.6.14.tgz",
|
||||
"integrity": "sha512-ikSkb4p6iMBM3lXfeTjAWRoJ6LSDf6f814r7DaKbR/jOPQZvW90GmqFPUt2vyzqBbkUhlhwqwjr8ILFofA25Tw=="
|
||||
},
|
||||
"@patternfly/react-core": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-3.1.3.tgz",
|
||||
"integrity": "sha512-hRuCr6Mmm5ZXN7eUmQrq6mRuPIlKQnUJA3YCEowWaVSH2X10Y70luACz00lO1nD+rUd4vOL2lG1dLyCjwX9/Fw==",
|
||||
"version": "3.16.10",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-3.16.10.tgz",
|
||||
"integrity": "sha512-ASoNNuC+S2UjUeT2aR7LsAuDJpvXzMHYCjRc9WmXD9S52nvqA5p4SS9cXV60RCTvRpUbXJ7/55gnxi4Dt9u6/A==",
|
||||
"requires": {
|
||||
"@patternfly/react-icons": "^3.7.3",
|
||||
"@patternfly/react-styles": "^3.0.2",
|
||||
"@patternfly/react-tokens": "^2.3.2",
|
||||
"@patternfly/react-icons": "^3.8.1",
|
||||
"@patternfly/react-styles": "^3.2.0",
|
||||
"@patternfly/react-tokens": "^2.5.1",
|
||||
"@tippy.js/react": "^1.1.1",
|
||||
"emotion": "^9.2.9",
|
||||
"exenv": "^1.2.2",
|
||||
"focus-trap-react": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@patternfly/react-icons": {
|
||||
"version": "3.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.7.4.tgz",
|
||||
"integrity": "sha512-YgKQt7qloOvGJEt3kRJLlRe6eJMwU0YbfuC2bsTzcmCReI5cSNv0ZyuV9rOIOpB5rRaNPmCm9RjKBCixFjcaYg=="
|
||||
},
|
||||
"@patternfly/react-tokens": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.3.2.tgz",
|
||||
"integrity": "sha512-17rGae23JIwDD1in2Y0AUqgkrb7g3gEvUitkWOIGeYgqk/L8oo+0CGV2CHWYwWHM0PaBk3GvDrHDGKuJIxmr5A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@patternfly/react-icons": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.7.1.tgz",
|
||||
"integrity": "sha512-Q7MDYKy+/4SjMR4UVK35Dg1srE2i4zwFiMA8UpuKqfqPaE5DsfpJALLeedxIiuMjhVC2XwoEwiQQkNczB2ejQQ=="
|
||||
"version": "3.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.9.2.tgz",
|
||||
"integrity": "sha512-EwPB+Nodd7zwiFh7R3Qq6Dif+xUR3WOwaJ+SRbP5NsxEAJf3CyYyrd7rbN8yFrFLTMKzknT2ez9XrP/5Lgr5LQ==",
|
||||
"requires": {
|
||||
"@fortawesome/free-brands-svg-icons": "^5.8.1"
|
||||
}
|
||||
},
|
||||
"@patternfly/react-styles": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-3.0.2.tgz",
|
||||
"integrity": "sha512-JiGxDkC4JArQJ13RQOjSUE4jPmwrAq8f5E+qg0tVws1A9BQ2l3uGCRFMVbfa57qqjqk0jXNmIVdFSeCG18qwJQ==",
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-3.2.0.tgz",
|
||||
"integrity": "sha512-8M7bo4kPvypHlbzuynV53xjk5176EktfEgZ283sfHmvUlU3Yvq2+m8hS9ERHE9gd91Ip4HiyucAVVACd2gtHNQ==",
|
||||
"requires": {
|
||||
"@babel/helper-plugin-utils": "^7.0.0-beta.48",
|
||||
"camel-case": "^3.0.0",
|
||||
|
|
@ -1480,9 +1484,9 @@
|
|||
}
|
||||
},
|
||||
"@patternfly/react-tokens": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.2.2.tgz",
|
||||
"integrity": "sha512-5yszwICn0/ZPz9YWQcilYmHdP7dIGwTNba0GPyqQfXOpuSJ2X3uLwZfuMGdqhOOsJTZmH9ksv2LQpc9HXhWa1Q=="
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.5.1.tgz",
|
||||
"integrity": "sha512-ZykUfWT4yCELXhGGwQxcNqnXwe3sqfSuoL6IlQRV6wtUKk+/et7NkVvrRwvci926+Usemr4IQVc8V9gbHqRN/A=="
|
||||
},
|
||||
"@svgr/babel-plugin-add-jsx-attribute": {
|
||||
"version": "4.2.0",
|
||||
|
|
@ -2383,6 +2387,47 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"babel-core": {
|
||||
"version": "6.26.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
|
||||
"integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
|
||||
"requires": {
|
||||
"babel-code-frame": "^6.26.0",
|
||||
"babel-generator": "^6.26.0",
|
||||
"babel-helpers": "^6.24.1",
|
||||
"babel-messages": "^6.23.0",
|
||||
"babel-register": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"babel-template": "^6.26.0",
|
||||
"babel-traverse": "^6.26.0",
|
||||
"babel-types": "^6.26.0",
|
||||
"babylon": "^6.18.0",
|
||||
"convert-source-map": "^1.5.1",
|
||||
"debug": "^2.6.9",
|
||||
"json5": "^0.5.1",
|
||||
"lodash": "^4.17.4",
|
||||
"minimatch": "^3.0.4",
|
||||
"path-is-absolute": "^1.0.1",
|
||||
"private": "^0.1.8",
|
||||
"slash": "^1.0.0",
|
||||
"source-map": "^0.5.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"json5": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
|
||||
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-eslint": {
|
||||
"version": "10.0.1",
|
||||
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.1.tgz",
|
||||
|
|
@ -3123,47 +3168,6 @@
|
|||
"lodash": "^4.17.4",
|
||||
"mkdirp": "^0.5.1",
|
||||
"source-map-support": "^0.4.15"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-core": {
|
||||
"version": "6.26.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
|
||||
"integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
|
||||
"requires": {
|
||||
"babel-code-frame": "^6.26.0",
|
||||
"babel-generator": "^6.26.0",
|
||||
"babel-helpers": "^6.24.1",
|
||||
"babel-messages": "^6.23.0",
|
||||
"babel-register": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"babel-template": "^6.26.0",
|
||||
"babel-traverse": "^6.26.0",
|
||||
"babel-types": "^6.26.0",
|
||||
"babylon": "^6.18.0",
|
||||
"convert-source-map": "^1.5.1",
|
||||
"debug": "^2.6.9",
|
||||
"json5": "^0.5.1",
|
||||
"lodash": "^4.17.4",
|
||||
"minimatch": "^3.0.4",
|
||||
"path-is-absolute": "^1.0.1",
|
||||
"private": "^0.1.8",
|
||||
"slash": "^1.0.0",
|
||||
"source-map": "^0.5.7"
|
||||
}
|
||||
},
|
||||
"debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"json5": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
|
||||
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-runtime": {
|
||||
|
|
@ -3787,7 +3791,8 @@
|
|||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
|
@ -3805,11 +3810,13 @@
|
|||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -3822,15 +3829,18 @@
|
|||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -3933,7 +3943,8 @@
|
|||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -3943,6 +3954,7 @@
|
|||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -3955,17 +3967,20 @@
|
|||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
|
|
@ -3982,6 +3997,7 @@
|
|||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
|
@ -4054,7 +4070,8 @@
|
|||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -4064,6 +4081,7 @@
|
|||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -4139,7 +4157,8 @@
|
|||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
|
|
@ -4169,6 +4188,7 @@
|
|||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
@ -4186,6 +4206,7 @@
|
|||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
|
|
@ -4224,11 +4245,13 @@
|
|||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -6359,45 +6382,6 @@
|
|||
"requires": {
|
||||
"ansi-wrap": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"babel-core": {
|
||||
"version": "6.26.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
|
||||
"integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
|
||||
"requires": {
|
||||
"babel-code-frame": "^6.26.0",
|
||||
"babel-generator": "^6.26.0",
|
||||
"babel-helpers": "^6.24.1",
|
||||
"babel-messages": "^6.23.0",
|
||||
"babel-register": "^6.26.0",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"babel-template": "^6.26.0",
|
||||
"babel-traverse": "^6.26.0",
|
||||
"babel-types": "^6.26.0",
|
||||
"babylon": "^6.18.0",
|
||||
"convert-source-map": "^1.5.1",
|
||||
"debug": "^2.6.9",
|
||||
"json5": "^0.5.1",
|
||||
"lodash": "^4.17.4",
|
||||
"minimatch": "^3.0.4",
|
||||
"path-is-absolute": "^1.0.1",
|
||||
"private": "^0.1.8",
|
||||
"slash": "^1.0.0",
|
||||
"source-map": "^0.5.7"
|
||||
}
|
||||
},
|
||||
"debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"json5": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
|
||||
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -8049,11 +8033,13 @@
|
|||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -8070,7 +8056,8 @@
|
|||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
|
|
@ -8199,13 +8186,15 @@
|
|||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
"private": true,
|
||||
"homepage": "http://localhost:3000/",
|
||||
"dependencies": {
|
||||
"@patternfly/patternfly": "^2.0.0",
|
||||
"@patternfly/react-core": "^3.1.3",
|
||||
"@patternfly/react-icons": "^3.7.1",
|
||||
"@patternfly/react-tokens": "^2.2.2",
|
||||
"@patternfly/patternfly": "^2.6.14",
|
||||
"@patternfly/react-core": "^3.16.10",
|
||||
"@patternfly/react-icons": "^3.9.2",
|
||||
"@patternfly/react-tokens": "^2.5.1",
|
||||
"axios": "^0.18.0",
|
||||
"braces": "^3.0.1",
|
||||
"react": "^16.8.6",
|
||||
|
|
|
|||
39
src/App.js
39
src/App.js
|
|
@ -8,6 +8,7 @@ import store from "./store";
|
|||
import { getConfig } from "./config/configActions";
|
||||
import * as Containers from "./containers";
|
||||
import Header from "./layout/navigation/Header";
|
||||
import Page from "./layout/Page";
|
||||
|
||||
class App extends Component {
|
||||
state = {
|
||||
|
|
@ -24,29 +25,21 @@ class App extends Component {
|
|||
return (
|
||||
<Provider store={store}>
|
||||
<BrowserRouter basename={process.env.PUBLIC_URL}>
|
||||
<div>
|
||||
<div className="pf-c-background-image" />
|
||||
<div className="pf-c-page" id="page-layout-horizontal-nav">
|
||||
<Header />
|
||||
<main role="main" className="pf-c-page__main">
|
||||
<section className="pf-c-page__main-section">
|
||||
<Switch>
|
||||
<Redirect from="/" exact to="/playbooks" />
|
||||
<Route
|
||||
path="/playbooks"
|
||||
exact
|
||||
component={Containers.PlaybooksContainer}
|
||||
/>
|
||||
<Route
|
||||
path="/playbooks/:id"
|
||||
component={Containers.PlaybookContainer}
|
||||
/>
|
||||
<Route component={Containers.Container404} />
|
||||
</Switch>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<Page header={<Header />}>
|
||||
<Switch>
|
||||
<Redirect from="/" exact to="/playbooks" />
|
||||
<Route
|
||||
path="/playbooks"
|
||||
exact
|
||||
component={Containers.PlaybooksContainer}
|
||||
/>
|
||||
<Route
|
||||
path="/playbooks/:id"
|
||||
component={Containers.PlaybookContainer}
|
||||
/>
|
||||
<Route component={Containers.Container404} />
|
||||
</Switch>
|
||||
</Page>
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,25 @@
|
|||
import React, { Component } from "react";
|
||||
import {
|
||||
Bullseye,
|
||||
Button,
|
||||
PageSection,
|
||||
PageSectionVariants
|
||||
} from "@patternfly/react-core";
|
||||
|
||||
export default class Container404 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="pf-l-bullseye">
|
||||
<div className="pf-l-bullseye__item">
|
||||
<div className="pf-c-card">
|
||||
<div className="pf-c-card__body">
|
||||
<p>We are looking for your page...but we can't find it</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PageSection variant={PageSectionVariants.light}>
|
||||
<Bullseye>
|
||||
<p className="pf-u-text-align-center">
|
||||
We are looking for your page...but we can't find it
|
||||
<br />
|
||||
<Button variant="secondary" component="a" href="/" className="pf-u-mt-xl">
|
||||
Go to index
|
||||
</Button>
|
||||
</p>
|
||||
</Bullseye>
|
||||
</PageSection>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,45 @@
|
|||
import React, { Component } from "react";
|
||||
import {
|
||||
Bullseye,
|
||||
Card,
|
||||
CardBody,
|
||||
PageSection,
|
||||
PageSectionVariants
|
||||
} from "@patternfly/react-core";
|
||||
|
||||
export default class LoadingContainer extends Component {
|
||||
state = {
|
||||
seconds: 0
|
||||
};
|
||||
|
||||
tick() {
|
||||
this.setState(state => ({
|
||||
seconds: state.seconds + 1
|
||||
}));
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.interval = setInterval(() => this.tick(), 1000);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { seconds } = this.state;
|
||||
const nbDots = 3;
|
||||
const nbDotsToDisplay = (seconds % nbDots) + 1;
|
||||
const dots = ".".repeat(nbDotsToDisplay);
|
||||
const spaces = " ".repeat(nbDots - nbDotsToDisplay).replace(/ /g, "\u00a0");
|
||||
return (
|
||||
<div className="pf-l-bullseye">
|
||||
<div className="pf-l-bullseye__item">
|
||||
<div className="pf-c-card">
|
||||
<div className="pf-c-card__body">loading</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PageSection variant={PageSectionVariants.default}>
|
||||
<Bullseye>
|
||||
<Card>
|
||||
<CardBody>{`loading${dots}${spaces}`}</CardBody>
|
||||
</Card>
|
||||
</Bullseye>
|
||||
</PageSection>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import styled from "styled-components";
|
||||
import { Page } from "@patternfly/react-core";
|
||||
|
||||
const AraPage = styled(Page)`
|
||||
min-height: 100vh;
|
||||
`;
|
||||
|
||||
export default AraPage;
|
||||
|
|
@ -1,70 +1,50 @@
|
|||
import React, { Component } from "react";
|
||||
import styled from "styled-components";
|
||||
import { Link } from "react-router-dom";
|
||||
import { withRouter } from "react-router";
|
||||
import {
|
||||
Brand,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavList,
|
||||
NavVariants,
|
||||
PageHeader
|
||||
} from "@patternfly/react-core";
|
||||
import logo from "./logo.svg";
|
||||
|
||||
const AraImg = styled.img`
|
||||
const Logo = styled(Brand)`
|
||||
height: 45px;
|
||||
`;
|
||||
|
||||
export class NavLink extends Component {
|
||||
class Header extends Component {
|
||||
render() {
|
||||
const { to, className, location, children, ...rest } = this.props;
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
className={`${className} ${
|
||||
location.pathname.indexOf(to) === -1 ? "" : "pf-m-current"
|
||||
}`}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class Header extends Component {
|
||||
render() {
|
||||
const { location } = this.props;
|
||||
return (
|
||||
<header role="banner" className="pf-c-page__header">
|
||||
<div className="pf-c-page__header-brand">
|
||||
<Link to="/playbooks" className="pf-c-page__header-brand-link">
|
||||
<AraImg className="pf-c-brand" src={logo} alt="Ara Logo" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="pf-c-page__header-nav">
|
||||
<nav
|
||||
className="pf-c-nav"
|
||||
id="page-layout-horizontal-nav-horizontal-nav"
|
||||
aria-label="Horizontal Nav Example"
|
||||
const { location, history } = this.props;
|
||||
const TopNav = (
|
||||
<Nav onSelect={this.onNavSelect} aria-label="Nav">
|
||||
<NavList variant={NavVariants.horizontal}>
|
||||
<NavItem
|
||||
to="/playbooks"
|
||||
onClick={() => history.push("/playbooks")}
|
||||
isActive={location.pathname.indexOf("playbooks") !== -1}
|
||||
preventDefault
|
||||
>
|
||||
<ul className="pf-c-nav__horizontal-list">
|
||||
<li className="pf-c-nav__item">
|
||||
<NavLink
|
||||
to="/playbooks"
|
||||
className="pf-c-nav__link"
|
||||
location={location}
|
||||
>
|
||||
Playbooks
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="pf-c-nav__item">
|
||||
<a
|
||||
href="https://ara.readthedocs.io/en/latest/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="pf-c-nav__link"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
Playbooks
|
||||
</NavItem>
|
||||
<NavItem
|
||||
to="https://ara.readthedocs.io/en/latest/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</NavItem>
|
||||
</NavList>
|
||||
</Nav>
|
||||
);
|
||||
return (
|
||||
<PageHeader
|
||||
logo={<Logo src={logo} alt="Ara Logo" />}
|
||||
logoProps={{ href: "/" }}
|
||||
topNav={TopNav}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,18 @@
|
|||
import React, { Component } from "react";
|
||||
import { List, ListItem } from '@patternfly/react-core';
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
List,
|
||||
ListItem,
|
||||
PageSection,
|
||||
PageSectionVariants
|
||||
} from "@patternfly/react-core";
|
||||
import { connect } from "react-redux";
|
||||
import { isEmpty } from "lodash";
|
||||
import { LoadingContainer, Container404 } from "../containers";
|
||||
import { getPlaybook } from "./playbooksActions";
|
||||
|
||||
|
||||
export class PlaybookContainer extends Component {
|
||||
state = {
|
||||
isLoading: true,
|
||||
|
|
@ -29,77 +36,74 @@ export class PlaybookContainer extends Component {
|
|||
return <Container404 />;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<div className="pf-c-card">
|
||||
<div class="pf-c-card__header">
|
||||
<h1 className="pf-c-title pf-m-lg">Hosts</h1>
|
||||
</div>
|
||||
<div className="pf-c-card__body">
|
||||
<PageSection variant={PageSectionVariants.light}>
|
||||
<Card>
|
||||
<CardHeader>Hosts</CardHeader>
|
||||
<CardBody>
|
||||
<table class="pf-c-table pf-m-compact pf-m-grid-md" role="grid">
|
||||
<thead>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>OK</th>
|
||||
<th>CHANGED</th>
|
||||
<th>FAILED</th>
|
||||
<th>SKIPPED</th>
|
||||
<th>UNREACHABLE</th>
|
||||
<th>Name</th>
|
||||
<th>OK</th>
|
||||
<th>CHANGED</th>
|
||||
<th>FAILED</th>
|
||||
<th>SKIPPED</th>
|
||||
<th>UNREACHABLE</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</thead>
|
||||
<tbody>
|
||||
{playbook.hosts.map(host => (
|
||||
<tr key={host.id}>
|
||||
<tr key={host.id}>
|
||||
<td data-label="Name">{host.name}</td>
|
||||
<td data-label="OK">{host.ok}</td>
|
||||
<td data-label="CHANGED">{host.changed}</td>
|
||||
<td data-label="FAILED">{host.failed}</td>
|
||||
<td data-label="SKIPPED">{host.skipped}</td>
|
||||
<td data-label="UNREACHABLE">{host.unreachable}</td>
|
||||
</tr>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pf-c-card">
|
||||
<div class="pf-c-card__header">
|
||||
<h1 className="pf-c-title pf-m-lg">Plays</h1>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>Plays</CardHeader>
|
||||
{playbook.plays.map(play => (
|
||||
<div className="pf-c-card__body">
|
||||
<h2>{play.name}</h2>
|
||||
<List>
|
||||
<CardBody>
|
||||
<h2>{play.name}</h2>
|
||||
<List>
|
||||
<ListItem>Started: {play.started}</ListItem>
|
||||
<ListItem>Ended: {play.ended}</ListItem>
|
||||
<ListItem>Duration: {play.duration}</ListItem>
|
||||
</List>
|
||||
<table class="pf-c-table pf-m-compact pf-m-grid-md" role="grid">
|
||||
</List>
|
||||
<table class="pf-c-table pf-m-compact pf-m-grid-md" role="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr>
|
||||
<th>Task</th>
|
||||
<th>Host</th>
|
||||
<th>Action</th>
|
||||
<th>Duration</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{play.tasks.map(task =>
|
||||
task.results.map(result =>
|
||||
<tr key={result.id}>
|
||||
<th data-label="Task">{task.name}</th>
|
||||
<th data-label="Host">{result.host.name}</th>
|
||||
<th data-label="Action">{task.action}</th>
|
||||
<th data-label="Duration">{result.duration}</th>
|
||||
<th data-label="Status">{result.status}</th>
|
||||
</tr>
|
||||
))}
|
||||
{play.tasks.map(task =>
|
||||
task.results.map(result => (
|
||||
<tr key={result.id}>
|
||||
<th data-label="Task">{task.name}</th>
|
||||
<th data-label="Host">{result.host.name}</th>
|
||||
<th data-label="Action">{task.action}</th>
|
||||
<th data-label="Duration">{result.duration}</th>
|
||||
<th data-label="Status">{result.status}</th>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</table>
|
||||
</CardBody>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</PageSection>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { Component } from "react";
|
||||
import styled from "styled-components";
|
||||
import { Card, CardBody } from "@patternfly/react-core";
|
||||
import {
|
||||
CheckCircleIcon,
|
||||
ExclamationCircleIcon,
|
||||
|
|
@ -138,8 +139,8 @@ export default class Playbook extends Component {
|
|||
className="pf-u-mb-xs"
|
||||
onClick={() => history.push(`/playbooks/${playbook.id}`)}
|
||||
>
|
||||
<div className="pf-c-card">
|
||||
<div className="pf-c-card__body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<PlaybookContent>
|
||||
<StatusAndName>
|
||||
<StatusIcon status={playbook.status} />
|
||||
|
|
@ -174,8 +175,8 @@ export default class Playbook extends Component {
|
|||
</span>
|
||||
</Duration>
|
||||
</PlaybookContent>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</PlaybookWrapper>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,20 @@
|
|||
import React, { Component } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { isEmpty } from "lodash";
|
||||
|
||||
import {
|
||||
Bullseye,
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
EmptyState,
|
||||
EmptyStateVariant,
|
||||
EmptyStateIcon,
|
||||
EmptyStateBody,
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title
|
||||
} from "@patternfly/react-core";
|
||||
import { CubesIcon } from "@patternfly/react-icons";
|
||||
import { LoadingContainer } from "../containers";
|
||||
import { getPlaybooks } from "./playbooksActions";
|
||||
import PlaybookSummary from "./PlaybookSummary";
|
||||
|
|
@ -27,40 +40,41 @@ export class PlaybooksContainer extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageSection variant={PageSectionVariants.default}>
|
||||
{!isLoading && isEmpty(playbooks) && (
|
||||
<div className="pf-l-bullseye">
|
||||
<div className="pf-l-bullseye__item">
|
||||
<div className="pf-c-card">
|
||||
<div className="pf-c-card__body">
|
||||
<div className="pf-c-empty-state">
|
||||
<i
|
||||
className="fas fa-cubes pf-c-empty-state__icon"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h1 className="pf-c-title pf-m-lg">No playbooks</h1>
|
||||
<p className="pf-c-empty-state__body">
|
||||
There is no playbook available on this instance of Ara
|
||||
</p>
|
||||
<div className="pf-c-empty-state__action">
|
||||
<a
|
||||
href="https://ara.readthedocs.io/en/latest/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
See documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Bullseye>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<EmptyState variant={EmptyStateVariant.large}>
|
||||
<EmptyStateIcon icon={CubesIcon} />
|
||||
<Title headingLevel="h5" size="lg">
|
||||
No playbooks
|
||||
</Title>
|
||||
<EmptyStateBody>
|
||||
There is no playbook available on this instance of Ara
|
||||
</EmptyStateBody>
|
||||
<Button
|
||||
variant="primary"
|
||||
component="a"
|
||||
href="https://ara.readthedocs.io/en/latest/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
See documentation
|
||||
</Button>
|
||||
</EmptyState>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Bullseye>
|
||||
)}
|
||||
{playbooks.map(playbook => (
|
||||
<PlaybookSummary key={playbook.id} playbook={playbook} history={history} />
|
||||
<PlaybookSummary
|
||||
key={playbook.id}
|
||||
playbook={playbook}
|
||||
history={history}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</PageSection>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue