{"version":3,"file":"component---src-templates-plugin-health-score-jsx-e305d9d25bab38ec80fd.js","mappings":"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","sources":["webpack://@jenkins-cd/jenkins-plugin-site/./src/components/PluginHealthScore.jsx","webpack://@jenkins-cd/jenkins-plugin-site/./src/templates/plugin_healthScore.jsx"],"sourcesContent":["import React, {useState} from 'react';\nimport PropTypes from 'prop-types';\nimport TimeAgo from 'react-timeago';\n\nimport ucFirst from '../utils/ucfirst';\nimport {formatter} from '../commons/helper';\nimport './PluginHealthScore.css';\n\nfunction ScoreIcon({score, className}) {\n    const isCorrect = score === 100;\n    return (\n        <div className={`${className} pluginHealth-score-icon--${isCorrect ? 'correct' : 'incorrect'}`}>\n            {isCorrect ?\n                <ion-icon name=\"checkmark-outline\"/> :\n                <ion-icon name=\"close-outline\"/>\n            }\n        </div>\n    );\n}\n\nScoreIcon.propTypes = {\n    className: PropTypes.string,\n    score: PropTypes.number.isRequired,\n};\n\nfunction ScoreValue({value}) {\n    return (\n        <div>\n            {`${value}%`}\n        </div>\n    );\n}\n\nScoreValue.propTypes = {\n    value: PropTypes.number.isRequired,\n};\n\nfunction ScoreResolutions({resolutions}) {\n    return (\n        <div className=\"pluginHealth--score-component--resolutions\">\n            <ul>\n                {resolutions.map((resolution, idx) => {\n                    return (\n                        <li key={idx}>\n                            <a href={resolution.link}>{resolution.text}</a>\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n}\n\nScoreResolutions.propTypes = {\n    resolutions: PropTypes.arrayOf(PropTypes.shape({\n        text: PropTypes.string,\n        link: PropTypes.string,\n    })),\n};\n\nfunction ScoreComponent({component: {value, reasons, resolutions}}) {\n    return (\n        <div className=\"pluginHealth--score-component\">\n            <ScoreIcon className=\"pluginHealth--score-component--icon\" score={value}/>\n            <div className=\"pluginHealth--score-component--reasons\">\n                {reasons.map((reason, idx) => {\n                    return (\n                        <span key={idx}>{reason}</span>\n                    );\n                })}\n                {resolutions.length > 0 && <ScoreResolutions resolutions={resolutions} />}\n            </div>\n            <ScoreValue value={value} />\n        </div>\n    );\n}\n\nScoreComponent.propTypes = {\n    component: PropTypes.shape({\n        value: PropTypes.number.isRequired,\n        weight: PropTypes.number.isRequired,\n        reasons: PropTypes.arrayOf(PropTypes.string),\n        resolutions: ScoreResolutions.propTypes.resolutions,\n    }).isRequired\n};\n\nfunction ScoreDetail({data: {name, components, value}}) {\n    const [collapsed, setCollapsed] = useState(value === 100);\n    return (\n        <div className=\"pluginHealth--score-section\">\n            <div className=\"pluginHealth--score-section--header\" onClick={() => setCollapsed(!collapsed)}>\n                <div className=\"pluginHealth--score-section--header-icon\">\n                    <ScoreIcon className=\"pluginHealth--score-section--header--icon\" score={value}/>\n                </div>\n                <div className=\"pluginHealth--score-section--header-title\">\n                    {name.split('-').map(ucFirst).join(' ')}\n                </div>\n                <ScoreValue value={value}/>\n                <div className=\"pluginHealth--score-section--collapsible-icon\">\n                    {collapsed ?\n                        <ion-icon name=\"chevron-down-outline\"/> :\n                        <ion-icon name=\"chevron-up-outline\"/>\n                    }\n                </div>\n            </div>\n            <div className={`pluginHealth-score-components--list ${collapsed ? 'collapse' : ''}`}>\n                {components.sort((d1, d2) => d2.weight - d2.weight).map((component, idx) => {\n                    return (<ScoreComponent key={idx} component={component}/>);\n                })}\n            </div>\n        </div>\n    );\n}\n\nScoreDetail.propTypes = {\n    data: PropTypes.shape({\n        name: PropTypes.string.isRequired,\n        components: PropTypes.arrayOf(ScoreComponent.propTypes.component).isRequired,\n        value: PropTypes.number.isRequired,\n        weight: PropTypes.number.isRequired,\n    }),\n};\n\nfunction compareString(a, b) {\n    if (a < b) return -1;\n    if (a > b) return 1;\n    return 0;\n}\n\nfunction PluginHealthScore({healthScore: {value: score, date, details}}) {\n    return (\n        <div className=\"container pluginHealth\">\n            <div id=\"pluginHealth--score\">\n                <div>\n                    <div className=\"pluginHealth--score-title\">\n                        <span id=\"pluginHealth--score-value\">{score}</span>\n                        <span id=\"pluginHealth--score-unit\">%</span>\n                    </div>\n                    <span id=\"pluginHealth--score-label\">health score</span>\n                </div>\n            </div>\n            <div>\n                {details.sort((d1, d2) => compareString(d1.name, d2.name)).map((data, idx) => {\n                    return (\n                        <ScoreDetail key={idx} data={data}/>\n                    );\n                })}\n            </div>\n\n            <div>\n                {'Computed: '}\n                <TimeAgo date={Date.parse(date)} formatter={formatter}/>\n            </div>\n        </div>\n    );\n}\n\nPluginHealthScore.propTypes = {\n    healthScore: PropTypes.shape({\n        value: PropTypes.number.isRequired,\n        date: PropTypes.string.isRequired,\n        details: PropTypes.arrayOf(ScoreDetail.propTypes.data).isRequired\n    }).isRequired,\n};\nexport default PluginHealthScore;\n","import {graphql} from 'gatsby';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {PropTypesJenkinsPlugin} from '../proptypes';\n\nimport PluginPageLayout from '../components/PluginPageLayout';\nimport PluginHealthScore from '../components/PluginHealthScore';\n\nconst TemplatePluginHealthScore = ({data: {jenkinsPlugin: plugin, healthScore}}) => {\n    return (\n        <PluginPageLayout plugin={plugin}>\n            {healthScore && <PluginHealthScore healthScore={healthScore}/>}\n        </PluginPageLayout>\n    );\n};\n\nTemplatePluginHealthScore.displayName = 'TemplatePluginHealthScore';\nTemplatePluginHealthScore.propTypes = {\n    data: PropTypes.shape({\n        jenkinsPlugin: PropTypesJenkinsPlugin.isRequired,\n        healthScore: PropTypes.shape({\n            value: PropTypes.number.isRequired,\n            date: PropTypes.string.isRequired,\n            details: PropTypes.arrayOf(PropTypes.shape({\n                components: PropTypes.arrayOf(PropTypes.shape({\n                    max: PropTypes.number.isRequired,\n                    value: PropTypes.number.isRequired,\n                    reasons: PropTypes.arrayOf(PropTypes.string).isRequired,\n                    resolutions: PropTypes.arrayOf(PropTypes.shape({\n                        text: PropTypes.string,\n                        link: PropTypes.string,\n                    })),\n                })).isRequired,\n                name: PropTypes.string.isRequired,\n                value: PropTypes.number.isRequired,\n                weight: PropTypes.number.isRequired,\n            }))\n        }).isRequired\n    })\n};\n\n/* eslint no-undef: \"off\" */\nexport const pageQuery = graphql`\n    query ($name: String!) {\n        jenkinsPlugin(name: {eq: $name}) {\n            ...JenkinsPluginFragment\n        }\n\n        healthScore: jenkinsPluginHealthScore(id: {eq: $name}) {\n            date\n            details {\n                components {\n                    weight\n                    value\n                    reasons\n                    resolutions {\n                        text\n                        link\n                    }\n                }\n                name\n                value\n                weight\n            }\n            value\n        }\n    }\n`;\n\nexport default TemplatePluginHealthScore;\n"],"names":["ScoreIcon","_ref","score","className","isCorrect","React","name","ScoreValue","_ref2","value","ScoreResolutions","_ref3","resolutions","map","resolution","idx","key","href","link","text","ScoreComponent","_ref4","component","reasons","reason","length","ScoreDetail","_ref5","data","components","collapsed","setCollapsed","useState","onClick","split","ucFirst","join","sort","d1","d2","weight","_ref6","healthScore","date","details","id","compareString","a","b","TimeAgo","Date","parse","formatter","TemplatePluginHealthScore","jenkinsPlugin","plugin","PluginPageLayout","PluginHealthScore","displayName"],"sourceRoot":""}