Merge pull request #227 from caktus/develop

Prepare production release v1.10.0

Author: Afani97

Dockerfile

@@ -113,8 +113,8 @@ RUN groupadd --gid $USER_GID $USERNAME \
 #   openssh-client -- for git over SSH
 #   sudo -- to run commands as superuser
 #   vim -- enhanced vi editor for commits
-ENV KUBE_CLIENT_VERSION="v1.22.15"
-ENV HELM_VERSION="3.8.2"
+ENV KUBE_CLIENT_VERSION="v1.25.10"
+ENV HELM_VERSION="3.12.0"
 RUN --mount=type=cache,target=/var/cache/apt --mount=type=cache,target=/var/lib/apt \
     --mount=type=cache,mode=0755,target=/root/.cache/pip \
     set -ex \
@@ -124,6 +124,7 @@ RUN --mount=type=cache,target=/var/cache/apt --mount=type=cache,target=/var/lib/
     docker-compose-plugin \
     git-core \
     gnupg2 \
+    jq \
     libpcre3 \
     libpq-dev \
     mime-support \

deploy/group_vars/all.yml

@@ -64,7 +64,7 @@ k8s_install_descheduler: yes
 # You must set the k8s_descheduler_chart_version to match the Kubernetes
 # node version (0.23.x -> K8s 1.23.x); see:
 # https://github.com/kubernetes-sigs/descheduler#compatibility-matrix
-k8s_descheduler_chart_version: v0.22.1
+k8s_descheduler_chart_version: v0.25.2
 # See values.yaml for options:
 # https://github.com/kubernetes-sigs/descheduler/blob/master/charts/descheduler/values.yaml#L63
 k8s_descheduler_release_values:
@@ -96,7 +96,7 @@ k8s_iam_users: [copelco]
 # https://github.com/kubernetes/ingress-nginx/releases
 k8s_ingress_nginx_chart_version: "4.4.2"
 # https://github.com/jetstack/cert-manager/releases
-k8s_cert_manager_chart_version: "v1.7.2"
+k8s_cert_manager_chart_version: "v1.11.1"
 # AWS only:
 # Use the newer load balancer type (NLB). DO NOT edit k8s_aws_load_balancer_type after
 # creating your Service.

deploy/requirements.yml

@@ -2,16 +2,16 @@
 
 - src: https://github.com/caktus/ansible-role-django-k8s
   name: caktus.django-k8s
-  version: v1.5.1
+  version: v1.6.0
 
 - src: https://github.com/caktus/ansible-role-aws-web-stacks
   name: caktus.aws-web-stacks
   version: ''
 
 - src: https://github.com/caktus/ansible-role-k8s-web-cluster
   name: caktus.k8s-web-cluster
-  version: v1.4.0
+  version: v1.5.0
 
 - src: https://github.com/caktus/ansible-role-k8s-hosting-services
   name: caktus.k8s-hosting-services
-  version: v0.9.0
+  version: v0.11.0

frontend/package-lock.json

@@ -10,12 +10,15 @@
     "autosuggest-highlight": "^3.3.0",
     "axios": "^0.27.2",
     "babel-eslint": "^10.1.0",
+    "chart.js": "^4.2.1",
     "date-fns": "^2.28.0",
     "framer-motion": "^4.1.17",
+    "lodash.clonedeep": "^4.5.0",
     "lodash.range": "^3.2.0",
     "p-min-delay": "^4.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-content-loader": "^6.2.0",
     "react-csv": "^2.2.2",
     "react-datepicker": "^4.11.0",
@@ -25,6 +28,7 @@
     "react-popper": "^2.3.0",
     "react-router-dom": "^5.3.3",
     "react-scripts": "5.0.1",
+    "react-switch": "^7.0.0",
     "react-table": "^7.8.0",
     "react-tooltip": "^4.2.21",
     "reaktus": "^0.1.20",

frontend/package.json

@@ -41,6 +41,30 @@ import FindAStopResults from './FindAStopResults/FindAStopResults';
 import DepartmentSearch from './Elements/DepartmentSearch';
 import * as S from './HomePage/HomePage.styled';
 
+// New Charts
+import {
+  ArcElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+} from 'chart.js';
+
+ChartJS.register(
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
 function App() {
   const [showCompare, setShowCompare] = React.useState(false);
   const [agencyId, setAgencyId] = React.useState(null);

frontend/src/Components/App.js

@@ -20,6 +20,7 @@ function Line({
   dAxisProps = {},
   iAxisProps = {},
   yAxisLabel,
+  xAxisLabel = 'Year',
 }) {
   if (loading) return <ChartLoading skeleton={BarSkeleton} />;
 
@@ -35,7 +36,7 @@ function Line({
           {...dAxisProps}
         />
         <VictoryAxis
-          label="Year"
+          label={xAxisLabel}
           style={AXIS_STYLE}
           tickFormat={iTickFormat}
           tickValues={iTickValues}

frontend/src/Components/Charts/ChartPrimitives/Line.js

@@ -3,6 +3,7 @@ import { smallerThanDesktop, smallerThanTabletLandscape } from '../../../styles/
 import { H2 } from '../../../styles/StyledComponents/Typography';
 
 export const ChartSection = styled.div`
+  margin-top: ${(props) => (props.marginTop ? props.marginTop : '3')}em;
   margin-bottom: 2em;
 `;
 
@@ -63,8 +64,10 @@ export const Spacing = styled.div`
 export const PieSection = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
-  width: 33%;
+  align-items: ${(props) => (props.alignItems ? props.alignItems : 'center')};
+  width: ${(props) => (props.zoomed ? '90%' : '33%')};
+  margin: 0 auto;
+  height: auto;
 
   @media (${smallerThanDesktop}) {
     flex-direction: row;
@@ -80,12 +83,20 @@ export const PieWrapper = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: center;
+  width: ${(props) => (props.zoomed ? '100%' : 'auto')};
+  height: ${(props) => (props.zoomed ? '100%' : 'auto')};
 
   @media (${smallerThanTabletLandscape}) {
     flex-direction: column;
   }
 `;
 
+export const PieActionsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const SectionWrapper = styled.div`
   margin: 1em 0;
 `;

frontend/src/Components/Charts/ChartSections/ChartsCommon.styled.js

@@ -51,7 +51,6 @@ export const KeyLabel = styled.p`
 `;
 
 export const Addendum = styled.p`
-  margin-top: 1em;
   font-style: italic;
   color: ${(props) => props.theme.colors.textLight};
   font-size: 16px;

frontend/src/Components/Charts/ChartSections/Legend/Legend.styled.js

@@ -30,6 +30,7 @@ import Legend from '../ChartSections/Legend/Legend';
 import ChartHeader from '../ChartSections/ChartHeader';
 import DataSubsetPicker from '../ChartSections/DataSubsetPicker/DataSubsetPicker';
 import useOfficerId from '../../../Hooks/useOfficerId';
+import displayDefinition from '../../../util/displayDefinition';
 
 function Searches(props) {
   const { agencyId } = props;
@@ -230,6 +231,7 @@ function Searches(props) {
               onChange={handleStopPurposeSelect}
               options={[SEARCH_TYPE_DEFAULT].concat(SEARCH_TYPES)}
             />
+            <p style={{ marginTop: '10px' }}>{displayDefinition(searchType)}</p>
             <S.Spacing>
               <Legend
                 heading="Show on graph:"