IO-1047 IO-1046 IO-1045 Add production alert everywhere

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -1,5 +1,5 @@
 import { Card, Col, Row, Space, Tag } from "antd";
-import { WarningFilled } from "@ant-design/icons";
+import { WarningFilled, ExclamationCircleFilled } from "@ant-design/icons";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -59,14 +59,17 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
         <Card title={"Job Status"} style={{ height: "100%" }}>
           <div>
             <DataLabel label={t("jobs.fields.status")}>
-              {job.status}
-              {job.inproduction && (
-                <span style={{ marginLeft: ".5rem" }}>
+              <Space wrap>
+                {job.status}
+                {job.inproduction && (
                   <Tag color="#f50" key="production">
                     {t("jobs.labels.inproduction")}
                   </Tag>
-                </span>
-              )}
+                )}
+                {job.production_vars && job.production_vars.alert ? (
+                  <ExclamationCircleFilled className="production-alert" />
+                ) : null}
+              </Space>
             </DataLabel>
             <DataLabel label={t("jobs.fields.ins_co_nm_short")}>
               {job.ins_co_nm}