[NIFI-2559] UI - Controller Service update missing icons

This closes #864

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css

@@ -263,12 +263,18 @@ div.ajax-loading {
     background-image: url(../images/iconLoading.gif);
 }
 
-div.ajax-complete {
-    background-image: url(../images/iconCommit.png);
+div.ajax-complete:before {
+    font-family: FontAwesome;
+    content: "\f00c";
+    font-size: 16px;
+    color: #70B59A;
 }
 
-div.ajax-error {
-    background-image: url(../images/iconDelete.png);
+div.ajax-error:before {
+    font-family: FontAwesome;
+    content: "\f1f8";
+    font-size: 16px;
+    color: #004849;
 }
 
 .refresh-button {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css

@@ -39,10 +39,6 @@
 
 /* controller-service settings */
 
-#controller-service-configuration .setting-input {
-    font-size: 11px !important;
-}
-
 #controller-service-name {
     width: 250px;
     float: left;
@@ -82,10 +78,6 @@ ul.referencing-component-listing li {
     white-space: nowrap;
 }
 
-div.referencing-component-state {
-    margin-top: -2px;
-}
-
 div.referencing-component-bulletins {
     float: left;
     margin-left: 5px;
@@ -95,10 +87,16 @@ div.referencing-component-bulletins {
     display: none;
 }
 
+div.referencing-component-bulletins:before {
+    font-family: FontAwesome;
+    content: "\f24a";
+    font-size: 16px;
+    color: #004849;
+}
+
 div.service.expansion-button {
     float: left;
     margin-right: 4px;
-    margin-top: 2px;
     width: 10px;
     height: 10px;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/login.css

@@ -54,7 +54,6 @@
     left: 0px;
     padding-top: 100px;
     padding-left: 100px;
-    font-family: Verdana, Geneva, sans-serif;
     z-index: 1300;
     width: 412px;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css

@@ -57,12 +57,21 @@ div.context-menu-provenance {
     white-space: normal;
 }
 
-.collapsed {
-    background: transparent url(../images/iconTwistArrow.png) no-repeat scroll top left;
+.collapsed:before {
+    font-family: FontAwesome;
+    content: "\f0da";
+    font-size: 16px;
+    color: #004849;
+    float: left;
+    margin-right: 3px;
 }
 
-.expanded {
-    background: transparent url(../images/iconTwistArrow.png) no-repeat scroll top right;
+.expanded:before {
+    font-family: FontAwesome;
+    content: "\f0d7";
+    font-size: 16px;
+    color: #004849;
+    float: left;
 }
 
 #new-template-description {
@@ -98,6 +107,12 @@ div.has-errors, div.invalid {
     color: #ba554a !important;
 }
 
+div.has-errors:before, div.invalid:before {
+    font-family: FontAwesome;
+    content: "\f071";
+    color: #ba554a;
+}
+
 div.transmitting {
     float: left;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css

@@ -69,7 +69,13 @@ div.processor-configuration-warning-icon {
     margin-right: 8px;
     width: 18px;
     height: 16px;
-    background-image: url(../images/iconAlert.png);
+}
+
+div.processor-configuration-warning-icon:before {
+    font-family: FontAwesome;
+    content: "\f071";
+    font-size: 16px;
+    color: #ba554a;
 }
 
 #auto-terminate-relationship-names {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css

@@ -94,7 +94,13 @@ div.remote-port-removed {
     margin-top: 17px;
     width: 18px;
     height: 18px;
-    background-image: url("../images/iconPortRemoved.png");
+}
+
+div.remote-port-removed:before {
+    font-family: FontAwesome;
+    content: "\f071";
+    font-size: 16px;
+    color: #ba554a;
 }
 
 div.remote-port-edit-container {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/shell.css

@@ -51,28 +51,12 @@
     font-size: 16px;
 }
 
-div.undock-normal {
-    background: transparent url(../images/iconPopOut.png) no-repeat left;
-}
-
-div.undock-hover {
-    background: transparent url(../images/iconPopOut.png) no-repeat right;
-}
-
 #shell-close-button {
     float: left;
     color: #004849;
     font-size: 16px;
 }
 
-div.close-normal {
-    background: transparent url(../images/iconClose.png) no-repeat left;
-}
-
-div.close-hover {
-    background: transparent url(../images/iconClose.png) no-repeat right;
-}
-
 #shell {
     position: absolute;
     top: 48px;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css

@@ -334,7 +334,6 @@ span.sorted {
 }
 
 #cluster-processor-icon {
-    background-image: url(../images/iconProcessor.png);
     width: 28px;
     height: 26px;
     float: left;
@@ -342,6 +341,13 @@ span.sorted {
     margin-top: -2px;
 }
 
+#cluster-processor-icon:before {
+    font-family: flowfont;
+    content: "\e808";
+    font-size: 16px;
+    color: #ad9897;
+}
+
 #cluster-processor-details {
     float: left;
 }
@@ -400,7 +406,6 @@ span.sorted {
 }
 
 #cluster-input-port-icon {
-    background-image: url(../images/iconInputPort.png);
     background-size: cover;
     width: 40px;
     height: 26px;
@@ -409,6 +414,13 @@ span.sorted {
     margin-top: -2px;
 }
 
+#cluster-input-port-icon:before {
+    font-family: flowfont;
+    content: "\e832";
+    font-size: 16px;
+    color: #ad9897;
+}
+
 #cluster-input-port-details {
     float: left;
 }
@@ -467,7 +479,6 @@ span.sorted {
 }
 
 #cluster-output-port-icon {
-    background-image: url(../images/iconOutputPort.png);
     background-size: cover;
     width: 40px;
     height: 26px;
@@ -476,6 +487,13 @@ span.sorted {
     margin-top: -2px;
 }
 
+#cluster-output-port-icon:before {
+    font-family: flowfont;
+    content: "\e833";
+    font-size: 16px;
+    color: #ad9897;
+}
+
 #cluster-output-port-details {
     float: left;
 }
@@ -534,13 +552,19 @@ span.sorted {
 }
 
 #cluster-remote-process-group-icon {
-    background-image: url(../images/iconRemoteProcessGroup.png);
     width: 30px;
     height: 22px;
     float: left;
     margin-right: 5px;
 }
 
+#cluster-remote-process-group-icon:before {
+    font-family: flowfont;
+    content: "\e805";
+    font-size: 16px;
+    color: #ad9897;
+}
+
 #cluster-remote-process-group-details {
     float: left;
 }
@@ -599,7 +623,6 @@ span.sorted {
 }
 
 #cluster-connection-icon {
-    background-image: url(../images/iconConnection.png);
     width: 28px;
     height: 28px;
     float: left;
@@ -607,6 +630,13 @@ span.sorted {
     margin-top: -4px;
 }
 
+#cluster-connection-icon:before {
+    font-family: flowfont;
+    content: "\e834";
+    font-size: 16px;
+    color: #ad9897;
+}
+
 #cluster-connection-details {
     float: left;
 }
@@ -665,7 +695,6 @@ span.sorted {
 }
 
 #cluster-process-group-icon {
-    background-image: url(../images/iconProcessGroup.png);
     width: 29px;
     height: 20px;
     float: left;
@@ -673,6 +702,13 @@ span.sorted {
     margin-top: 1px;
 }
 
+#cluster-process-group-icon:before {
+    font-family: flowfont;
+    content: "\e804";
+    font-size: 16px;
+    color: #ad9897;
+}
+
 #cluster-process-group-details {
     float: left;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css

@@ -100,7 +100,7 @@ div.string-check-container {
 div.string-check {
     width: 12px;
     height: 12px;
-    margin-top: 4px;
+    margin-top: 3px;
 }
 
 span.string-check-label {
@@ -110,7 +110,6 @@ span.string-check-label {
 }
 
 div.value pre {
-    font-family: Verdana, Arial, Helvetica, sans-serif;
     overflow: hidden;
 }
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js

@@ -349,7 +349,7 @@ nf.ContextMenu = (function () {
      * {
      *      click: refresh (function),
      *      text: 'Start' (string),
-     *      img: 'images/iconRun.png'
+     *      clazz: 'fa fa-refresh'
      * }
      * 
      * @param {jQuery} contextMenu The context menu